Mapbox-gl-js: SecurityError (DOM Exception 18): The operation is insecure.

[martinrisseeuw]

mapbox-gl-js version:

https://api.mapbox.com/mapbox-gl-js/v0.24.0/mapbox-gl.js

Steps to Trigger Behavior

1. Open safari Version 10.0.2 (12602.3.12.0.1)
2. Make sure you have the default privacy settings:
   
3. browse to https://usa.secrid.com/pages/store-locator
   
   
   
   1. When the map is being loaded it gives an error:
      
      
   
   

When I update to a newer version of Mapbox the error is fixed. However updating breaks the geocoder, and the newer version does not support the geocoder (https://github.com/mapbox/mapbox-gl-geocoder/blob/master/CHANGELOG.md) to be placed in a different container as the map.

Expected Behavior

The map should load properly without returning an error

Actual Behavior

When the map is being loaded it returns an error:

[mourner]

As far as I understand, this is more of an issue with the new geocoder behavior than anything we should fix on the GL JS side (as you say that the issue was already fixed). So I have to close here, but I'd suggest moving the container outside manually with something like div.appendChild(geocoderContainer — there should be nothing preventing you from doing this.

[martinrisseeuw]

I updated Mapbox unfortunately I still get the same result. I think when I tested I was testing on an http connection. The error changed a bit because of the updated but still returns dom exception 18:

Could we reopen the issue?

[mourner]

@martinrisseeuw please read the following section of the readme: https://github.com/mapbox/mapbox-gl-js#using-mapbox-gl-js-with-csp

[martinrisseeuw]

@mourner Thanks for the info. Unfortunately it seems I can't update the Content-Security-Policy response header because the website is hosted by Shopify. When I look at the response headers it should allow https://*.

The issue only appears in: Version 10.0.2 (12602.3.12.0.1) of Safari. Do you have any other suggestions that I can try?

[felixLam]

@mourner having the same issue here also on shopify and using mapbox gl js 0.31.

It works fine on Chrome, but fails to load the map in Safari. Could you elaborate on the suggested solution? The link appears to be broken https://github.com/mapbox/mapbox-gl-js#using-mapbox-gl-js-with-csp

[jfirebaugh]

That documentation recently moved to INSTALL.md: https://github.com/mapbox/mapbox-gl-js/blob/master/INSTALL.md#using-mapbox-with-csp

[felixLam]

Hi @jfirebaugh thanks for your prompt reply. Somehow I do not get past this even if I add the following meta-tag to the header:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://* blob: data:; script-src https://* 'unsafe-eval'; style-src 'unsafe-inline' https://*; child-src *;connect-src https://*;">

[jfirebaugh]

@felixLam Can you please open a new issue and include a minimal self-contained example that demonstrates the issue?

[felixLam]

@jfirebaugh See http://codepen.io/anon/pen/dNZzxO and click settings to verify or modify the meta tag CSP.