google maps api script does load due to content security policy

Question

I am making a google chrome extension where I want to use google maps. The problem is that when I run my script then it gives me this error

Refused to load s         


        

Answer 1

I think the problem here is that you have not correctly set the content security policy for Google Maps URL. You should change your "content_security_policy" in manifest file to something like this:

"content_security_policy": "script-src 'self' https://maps.googleapis.com https://maps.gstatic.com; object-src 'self'"

This simply means that you are allowing to run script from the self/current page, and from the "https://maps.googleapis.com".

Try this, and see if it helps.

Answer 2

I had a same issue and solved by replacing API URL from http to https version.

In HTML From:

<script type='text/javascript' src='http://maps.google.com/maps/api/js?v=3.3&sensor=false'></script>

To:

<script type='text/javascript' src='https://maps-api-ssl.google.com/maps/api/js?v=3.3&sensor=false'></script>

Then added https://maps-api-ssl.google.com to CPS in manifest.json

I don't know if you still need this info. But I was googling and spend some time but couldn't find a direct answer, so I wrote here to hope if it helps anyone.

Answer 3

Content Security Policy keeps you in safe from XSS attacks. But it means you need to whitelist external resources explicitly. You can make it by providing additional HTTP headers or by <meta> tag like:

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' data: gap: ws: ; 
    style-src 'self' https: *.googleapis.com; 
    script-src 'self' https: *.googleapis.com;
    media-src 'none'; 
    font-src *;
    connect-src *;
    img-src 'self' data: content: https: *.googleapis.com;">