Content Security Policy: cannot load Google API in Chrome extension
This is relative an Chrome extension. I am trying a simple one which uses the Google Chart API
I have this code in my html document "popup.html", which is loaded on the click on the Icon.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/libs/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=xxxxxxxxxxx"></script>
[...]
</body>
</html>
I get the following message:
Refused to load the script 'http://www.google.com/jsapi?key=xxxxxxxxxxx' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
I understood it is something relative to permissions, I tried to modify my Manifest file but without success:
{
[...]
"manifest_version": 2,
"permissions": ["http://*.google.com/"],
"content_security_policy": "script-src 'self' http://www.google.com; object-src 'self'",
}
Any idea?
Answer
I wrestled with this issue for the past 12 hours and finally got it to work. Why did it take so long? Because I got thrown off the trail multiple times. First, the false leads:
"Make it HTTPS" -- Doesn't matter. My Chrome extension now makes regular HTTP calls to a different domain and works just fine. (UPDATE: A little more clarification. The "make it https" myth is rooted in a similar problem people tend to have when it comes to SCRIPT loading. If you need to bring in an outside .js file, then yes, you need to modify your content_security_policy and include the proper hostname, which seems to only accept https. Keep in mind this is different than hitting an external hostname for something like REST services. As I stated before, this does not require modification of the content_security_policy, nor https.)
"Use JSONP in your JQuery AJAX calls" -- This might be a way to address cross-domain AJAX in normal web pages, but isn't necessary in a chrome extension due to the built-in Content Security Policy. Further, implementing JSONP sounds like a PITA because it requires server-side changes to handle the callback parameter (or something, I'm still not sure). In any case, not necessary.
"Mess with the Content Security Policy (CSP) string in your extension" - Under manifest version 2, the default string works fine: "script-src 'self'; object-src 'self'". You don't even have to explicitly specify it. What you need is a to include the domain you're trying to hit from the extension as a "permission" value.
The solution:
Remove all inline javascript from your extension. Get it into a separate .js file. I suspect that for most html files with any decent amount of javascript, this process will suck. Luckily for me, all I had was a body onload which I was able to move into a separate js file as window.addlistener onload event instead.
The page you really need to read to get past this issue is here: https://developer.chrome.com/apps/contentSecurityPolicy