Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
232 views
in Technique[技术] by (71.8m points)

javascript - 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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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:

  1. "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.)

  2. "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.

  3. "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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...