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

Syed Ghulam Akbar · Accepted Answer · 2012-11-05T12:31:50.240

29

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.

edited Nov 05 '12 at 12:31

answered Nov 05 '12 at 11:14

Syed Ghulam Akbar

306
3
4

Thanks Akbar. I changed my manifest file according to what you said but now I am getting this error `ed to load script from 'https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/19/main.js' because of Content-Security-Policy.`. Any idea why? – Om3ga Nov 05 '12 at 11:30
I updated the the above content security policy line to also include the maps.gstatic.com line. I think you may need to add more relxation policies too. For this, I wold recommend going through these: http://developer.chrome.com/extensions/contentSecurityPolicy.html http://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html – Syed Ghulam Akbar Nov 05 '12 at 12:34
Thanks for the answer, do you have any solution to load the library inside a page as a content script? I've added the question [here](https://stackoverflow.com/questions/48937438/refused-to-load-the-script-of-google-maps-library-inside-content-script-of-chrom) – Mohammed AlBanna Feb 23 '18 at 23:30
Thanks but newer versions of Chrome now complain about loading fonts from 'https:' (nothing else after that, just https:), I have not managed to find a solution yet and have tried every variation on this page. Even with font source 'self' https: * it still complains about blocking the loading of 'https:' in the latest versions of Chrome. – robvdl Dec 22 '18 at 18:57
How we can do it in manifest V3? – Zeeshan Ahmad Khalil Sep 06 '22 at 06:05

score 2 · Answer 2 · answered Apr 08 '14 at 07:05

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.

score 0 · Answer 3 · edited Oct 11 '18 at 11:09

0

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

edited Oct 11 '18 at 11:09

skyboyer

22,209
7
57
64

answered Oct 11 '18 at 09:09

Muhammad

11

While this might answer the authors question, it lacks some explaining words and links to documentation. Raw code snippets are not very helpful without some phrases around it. You may also find [how to write a good answer](https://stackoverflow.com/help/how-to-answer) very helpful. Please edit your answer. – hellow Oct 11 '18 at 10:03

google maps api script does load due to content security policy

3 Answers3

Linked