-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSP directives prevents map from loading #4062
Comments
Here's what I see in the console when loading the codepen in Safari: [Error] Refused to load http://production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js because it does not appear in the script-src directive of the Content Security Policy. So the security policy is preventing codepen from working at all. Can you set up an example that doesn't depend on codepen? |
Your example also won't work due to the inline script, and the fact that it's missing
|
Hi @jfirebaugh Thanks for your snippet and sorry for my late night coding mistake with the code pen sample. I have setup a dev store on shopify that includes a minimal html page including the meta tag above: In the process I also found why it does not work on shopify but appears to do fine on a vanilla server. The reason is that web workers do not follow the CSP of the document, but rather of the request that served it:
The mapbox js sdk is served without this header. My assumption is that Safari then falls back to the document's request header which ignores any changes to the meta tag for the workers. To reproduce locally setup a server and set the following headers (as used by shopify):
|
Related #559 |
I do not believe that this issue is limited to Shopify and would assume that other users experience similar issues. Nevertheless I also brought this up at Shopify: https://ecommerce.shopify.com/c/shopify-apis-and-technology/t/content-security-policy-response-headers-401287 |
The source for the worker script isn't https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.1/mapbox-gl.js, it's a
Therefore the worker script should be allowed in this scenario, since both the meta tag and the response header include |
Actually, it looks like a Shopify bug. They appear to be returning different CSP headers depending on the browser. Chrome --
Safari --
|
Closing since this is an issue with Shopify's browser sniffing. |
Running into the same issue on Shopify. Can't find a solution for this |
Was running into this and fixed it by adding the following CSP directive to my server:
|
it is most strange. |
|
@jonnybarnes Does this also affect iframes? I'm embedding via iframe as shown here but i keep getting:
Thanks |
I ran into this with an added twist which may be helpful for others: I've found that if I'm hosting a Mapbox map in a subdomain, I also need to set a CSP of All the other includes can be arranged at just the subdirectory level, but that one has to be at the root. |
Adding the CSP directive in the meta tag as described in https://github.com/mapbox/mapbox-gl-js/blob/master/INSTALL.md#using-mapbox-with-csp does not work as expected and leads to the map not loading correctly.
Minimal example https://mapbox-csp-bug.myshopify.com/pages/mapbox-csp-bug
The map displays correctly in Chrome, but fails to load with an error on Safari (Version 10.0.2 (12602.3.12.0.1).
This precludes usage of map box gl on any shopify hosted website (and other hosts where the developer for whatever reason cannot or does not want to change the CSP header).
Original issue:
#3982 (comment)
The text was updated successfully, but these errors were encountered: