2

In my chrome extension, when a users clicks the browser action symbol, a new (popup) window opens loading a Google Map. To open the window I use the following snippet

chrome.browserAction.onClicked.addListener(function() {
  chrome.windows.create({'url': 'popup.html', 'width': 500, 'height': 400 });
});

The popup.html looks as follows:

<!doctype html>
<html>
  <head>
    <title>Popup</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="map-canvas" style="width:100%; height:100%"></div>
  </body>
</html>

I naturally ran into the Content Security Policy (CSP) issue. As a solution I found this Stackoverflow article. However, it didn't work out of the box. I got further "Refused to load script ..." CSP error messages. Only by extending the CSP line by all the required scripts I got it finally running with:

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

Now I wonder, if this the right way to do it. How do I know that the list of required https URLs won't change over time? I tried wildcards (https://*/*) but this bombed completely. Or perhaps I use the wring approach altogether.

Community
  • 1
  • 1
Christian
  • 3,239
  • 5
  • 38
  • 79

1 Answers1

3

There is no guarantee what domains Google Maps will load scripts from. If you need to use a more lenient CSP rule it would look like this:

script-src 'self' 'unsafe-eval' https:;

https: says it's ok to load from any domain but it has to be over SSL. This is not an ideal CSP ruleset as it's significantly more susceptible to JavaScript security issues.

abraham
  • 46,583
  • 10
  • 100
  • 152
  • Abraham, thanks! I had to change it to `https://`, otherwise I got an error, the same I got with my `https://*/*` approach. I'm aware that it's not good solution, but I only needing it for a proof-of-concept implementation...at least for the time being. – Christian Aug 16 '14 at 00:45
  • Good that you got it working. Odd though because the [this intro](http://www.html5rocks.com/en/tutorials/security/content-security-policy/) uses `https:` as an example. – abraham Aug 16 '14 at 05:36
  • @Christian The fact that `https://` was supported [is a bug that has been fixed in Chrome 38](https://code.google.com/p/chromium/issues/detail?id=404295). You cannot use an overly generic wildcard in the Content Security Policy of a Chrome extension (note that `https://` has never been a valid CSP directive, that has been fixed as well). – Rob W Aug 22 '14 at 14:28
  • 4
    Just going to put this here incase it can help anybody. This worked for me. "content_security_policy": "connect-src https://www.google.com https://maps.googleapis.com https://fonts.googleapis.com https://maps.gstatic.com ; script-src 'self' https://fonts.googleapis.com https://www.google.com https://maps.gstatic.com https://maps.googleapis.com 'unsafe-eval' https://fonts.googleapis.com https://www.google.com https://maps.gstatic.com https://maps.googleapis.com; object-src 'self'", – David Kierans Apr 11 '15 at 09:14