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 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 am adding 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 that error again and again? Please help...

Update one

I added these two permissions to manifest file but still not working

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

Update two

I also used this sort 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 above doesnt work for me either

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;">