如何修复 chrome-extension 内联 JavaScript 调用错误?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/36622181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 19:18:54  来源:igfitidea点击:

How to fix chrome-extension inline JavaScript invocation error?

javascriptgoogle-chromegoogle-chrome-extensioncontent-security-policy

提问by omah94

I'm making a chrome extension however I seem to get the following error when I try to fire up an onclick() event.

我正在制作一个 chrome 扩展,但是当我尝试启动 onclick() 事件时,我似乎收到以下错误。

Refused to load the script 'https://apis.google.com/js/client.js?onload=handleClientLoad' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:"

and

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

This is my manifest.json :

这是我的 manifest.json :

{
  "manifest_version": 2,

  "name": "SECURE",
  "description": "this extension offers secure communication for GMAIL     users",
  "version": "1.0",

 "browser_action": {
 "default_icon": "resources/icon16.png",
 "default_popup": "popup.html",
 "default_title": "Click here!"


 },

 "background":{
   "scripts":["background.js"]
},

 "content_scripts": [
  {
   "matches": ["http://*/*", "https://*/*"],
   "js":["myscript.js"],
   "run_at": "document_end"
  }
  ],
"permissions": ["identity", "https://accounts.google.com/*",  "https://www.googleapis.com/*"],

"oauth2": {
   "client_id": "975410329966.apps.googleusercontent.com",
 "scopes": [
   "<all urls>",
   "https://www.googleapis.com/auth/drive",
   "https://mail.google.com/",
   "https://www.googleapis.com/auth/gmail.login",
   "https://www.googleapis.com/auth/gmail.compose",
   "https://www.googleapis.com/auth/gmail.readonly",
   "https://www.googleapis.com/auth/gmail.send"
  ],

 "content_security_policy":"script-src 'self'  'unsafe-inline' 'unsafe eval'  https://apis.google.com/js/client.js?; object-src 'self'"


}
}

Any help towards fixing this error would greatly be appreciated.

对修复此错误的任何帮助将不胜感激。

回答by Haibara Ai

By default Content Security Policy, inline scripts won't be loaded and only local script can be loaded. You could relax the default policy by:

默认情况下Content Security Policy不会加载内联脚本,只能加载本地脚本。您可以通过以下方式放宽默认策略:

  1. Inline Script. Take a look at Official Guide, inline scripts can be whitelisted by specifying the base64-encoded hash of the source code in the policy. See Hash usage for elementsfor an example.

    But I believe a better way would extract this logic to a separate script and not use inline script.

  2. Remote Script. You could whitelist script resources https://apis.google.com/js/client.js?onload=handleClientLoadby the following section in manifest.json

    "content_security_policy":"script-src 'self' https://apis.google.com; object-src 'self'"
    

    Also, I believe a better way could be downloading the remote client.jsand include it as a local script.

  1. 内联脚本。看一下官方指南,内联脚本可以通过在策略中指定源代码的 base64 编码哈希来列入白名单。有关示例,请参阅元素的哈希用法

    但我相信更好的方法是将此逻辑提取到单独的脚本中,而不是使用内联脚本。

  2. 远程脚本。您可以https://apis.google.com/js/client.js?onload=handleClientLoad通过以下部分将脚本资源列入白名单manifest.json

    "content_security_policy":"script-src 'self' https://apis.google.com; object-src 'self'"
    

    另外,我相信更好的方法可能是下载远程client.js并将其作为本地脚本包含在内。

Please be aware as per the description of Inline Script, unsafe-inlineno longer works.

请注意根据Inline Script的描述,unsafe-inline不再有效。

Up until Chrome 45, there was no mechanism for relaxing the restriction against executing inline JavaScript. In particular, setting a script policy that includes 'unsafe-inline' will have no effect.

在 Chrome 45 之前,没有机制可以放宽对执行内联 JavaScript 的限制。特别是,设置包含“unsafe-inline”的脚本策略将不起作用