Highcharts export as png (external) server no longer sends credentials? about highcharts

[Mattie112]

I can try to set that but, just to clarify:

• My code has not changed other then updating Highcharts from 11.2.0 to 11.3.0
• This happens in both Firefox and Chrome

So something in regards to the "defaults" seem to have changed. I will report back once I tested the suggestion from @goransle

edit:
I will test this Wednesday! Don't have the development setup running in my current location.

[Mattie112]

Small update:

It seems to be broken in v11.3.0 (as 11.2.0 is working). The changelog does list something in regards to the formAttributes that I found and listed above. https://www.highcharts.com/blog/changelog/#highcharts-v11.3.0

I am not yet 100% sure what is happening as we don't modify the request but it does not look to be a coincidence.

[jszuminski]

If the cookie is not being sent, I don't think that's the problem with the Export Server, but with the request being sent from the exporting module.

@goransle, do you have any ideas why that happens and how it could be changed?

[goransle]

This is likely due to the default behaviour of the browser's implementation of fetch.

You should be able to set the credentials option using exporting.fetchOptions in the chart configuration.

[Mattie112]

So,

It seems there are two interesting options there:

https://developer.mozilla.org/en-US/docs/Web/API/fetch#credentials
and (possible)
https://developer.mozilla.org/en-US/docs/Web/API/fetch#mode

My setup locally is not 100% the same as production. Locally it is domain:1234 for the angular frontend, and domain:2345 for the highcharts exporter. For prod this is simply xx.domain.com and yy.domain.com However in both cases there is an nginx in front of the highcharts-exporter to handle authentication. So keep this in mind. I tried to be as close to our production as possible with this. Just that I don't have a loadbalancer for local (yet...)

        const data = {
            title: {
                text: ''
            },
            xAxis: {
[...]
            exporting: {
                sourceHeight: 1500,
                sourceWidth: 1500,
                url: environment.highchartsExportUrl,
                csv: {
                    dateFormat: '%d/%m/%Y %H:%M:%S',
                    decimalPoint: '.'
                },
                fetchOptions:{
                    credentials: "omit", // omit, same-origin, include
                    mode: "cors" // cors, no-cors, same-origin
                }
            },
        } as Options;

(Tested with Chrome)

omit + cors = 401 + "xx has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled." + no cookie made it to the exporter

omit + no-cors = 401 + no error + no cookie made it to the exporter

omit + same-origin = "request mode is "same-origin" but the URL's origin is not same as the request origin xx:1234." -> NO request was sent by the browser

same-origin + cors = 401 + "xx has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled." + no cookie made it to the exporter

same-origin + no-cors = 401 + no error + no cookie made it to the exporter

same-origin + same-origin = "request mode is "same-origin" but the URL's origin is not same as the request origin xx:1234." -> NO request was sent by the browser

include + cors = "xx has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'."+ ERR_FAILED (but still a 200 OK) + cookie made it to the exporter

include + no-cors = 200 OK, no error, cookie made it to the exporter but no file is being downloaded (there was no response data)

include + same-origin = "request mode is "same-origin" but the URL's origin is not same as the request origin xx:1234." -> NO request was sent by the browser

So I think it should be "same-origin + cors". That sounds the most reasonable. Even through cookie is not received but that might be the local setup. Or possible something with the mode "same-origin" but at least for local development that does not work. I have to think a bit on hot to properly test it and then I will report back.

edit:
If I use credentials include and mode cors I can het it to work locally with adding some CORS headers. Now the question it does this work on production and can I perhaps switch to same-origin there.

Is there any way to say what the previous highcharts behavior was?

[jszuminski]

I'm not sure how it will work in your production environment as it depends on your setup configuration. However, if you ensure the appropriate CORS headers are in place along with credentials: include (just as it operates in the development environment), it should function similarly and effectively as it does in development.

The commit that you've shared (47a638f) introduces a minor modification. It removes formAttributes in favor of fetchOptions, which can easily be customized within the Highcharts configuration.