Geek Answers Handbook

Maps google api script loading due to content security policy

I am doing 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 script from 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXX&sensor=false' because of Content-Security-Policy.

Here is my manifest file

 { "name": "Name", "version": "1.0", "manifest_version": 2, "background": { "scripts": [ "js/script.js" ] }, "description": "Desc", "browser_action": { "default_icon": "images/icon.png", "default_title": "Title", "default_popup": "html/popup.html" }, "permissions": [ "http://*/", "http://*.google.com/", "http://localhost/*" ], "content_security_policy": "script-src 'self' http://google.com; object-src 'self'"

}

And I add my scripts like this

 <script src="../js/libs/jquery.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXX&sensor=false"></script> <script src="../js/plugins/easing.js"></script> <script src="../js/script.js"></script>

Why am I getting this error again and again? Please, help...

Refresh

I added these two permissions for the manifest file, but still did not work

 "https://maps.google.com/*", "https://maps.googleapis.com/*",

Update two

I also used this kind of content_security_policy

 "content_security_policy": "default-src 'none'; style-src 'self'; script-src 'self'; connect-src https://maps.googleapis.com; img-src https://maps.google.com"

But the above doesn't work for me either

+6
source share
2 answers

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

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

It just means that you allow the script to be run from your own / current page and from https://maps.googleapis.com.

Try it and see if it helps.

+15
source

I had the same problem and decided to replace the API URL with http with the 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 do not know if you need this information. But I was googling and spent some time, but could not find a direct answer, so I wrote here to hope that this helps someone.

+2
source

More articles:


All Articles