Google Map React Throwing "refused to apply inline styles error"

Question

CSP Issue:

Our project have strict content security issue i.e. we are using style-src * and cannot add unsafe-inline option here. I am getting "refused to apply inline styles error" and CSS is not applied for google Map due above strict content security policy.

Steps to reproduce

1)Clone create react app

2)Install google-map-react v2.1.9

3)Add content security policy header inside your inside your public/index.html file

 <script> 
    var cspScriptPolicy = "default-src 'none'; connect-src * 'self'; font-src *;img-src * data:; script-src * 'self' maps.googleapis.com; style-src *; manifest-src 'self';"; 
        // Inject a tag to disable inline scripts 
        var cspMetaTag = document.createElement('meta'); 
        cspMetaTag.setAttribute('http-equiv', 'Content-Security-Policy'); cspMetaTag.setAttribute('content', cspScriptPolicy); 
document.getElementsByTagName('head')[0].appendChild(cspMetaTag); </script>

4. Use inline Styles prop from google map react library
5. Create build and serve it on localhost .

Expected behavior :: google map should not throw inline style errors and style should be applied.

Answer 1

Google Maps itself uses inline <style> therefore it requires 'unsafe-inline' in the 'style-src' directive.

Officially GMAP does not supports nonces, however the problem of inline styles can be solved by using 'nonce-value', but StreetView will not works.