CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-chrome-extensioncontent-security-policy
Christian
Christian

Reputation: 3403

Content Security Policy: loading Google Map in new (popup) window

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.

Upvotes: 2

Views: 5803

Answers (1)

abraham
abraham

Reputation: 47913

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.

Upvotes: 3

Related Questions