由于内容安全策略指令，扩展拒绝加载脚本 [英] Extension refuses to load the script due to Content Security Policy directive

问题描述

以下是我的HTML代码

脚本：

  < script src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script> 
< script src =background.js>< / script> 
  

HTML：

 < button name =btnloginid =btnlogin>登入< / button>< br />< br /> 
  

以下是js

  $（document）.ready（function（）{
 document.getElementById（＃btnlogin）。click（function（）{$ b $ alert（s）; 
}）; 
}）; 
  

清单文件：

  {
manifest_version：2，
name：一键式小猫，
description：该扩展程序演示了一个'浏览器操作'小猫。，
版本：1.0，
browser_action：{
default_icon：icon.png，
default_popup：popup。 html
，
} 
  

我发现当我运行这段代码时只是在浏览器中比警报正常显示，但是当我将它作为Chrome扩展运行时，它会给出以下错误信息。

未捕获的ReferenceError：$未定义

和

拒绝加载脚本'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'，因为它违反了以下内容安全策略指令：script-src'self'chrome-extension-resource：。

不懂这些是什么错误。请帮我理解这个扩展名。

谢谢

解决方案

在Chrome扩展程序中，扩展程序的内容安全策略必须明确允许外部脚本源CSP）：

如果您需要一些外部JavaScript或对象资源，您可以将策略放宽到一定程度通过列入白名单安全的来源，脚本应该被接受......

宽松的策略定义允许从example.com通过HTTPS加载脚本资源，如下所示：

 content_security_policy：script-src'self'https://example.com; object-src'self'
  

只能通过HTTPS将脚本加载到扩展程序中，因此您必须加载jQuery CDN资源ce通过HTTPS：

 < script src =https：//ajax.googleapis.com / ...> < /脚本> 
  

然后将修改后的CSP添加到您的清单中，以允许该HTTPS资源：

  {
manifest_version：2，
name：一键小猫，
description ：这个扩展名演示了一个带有小猫的'浏览器动作'。，
version：1.0，
browser_action：{
default_icon：icon.png， 
default_popup：popup.html
}，
content_security_policy：script-src'self'https://ajax.googleapis.com; object-src'self' 
} 
  

然而，针对您的特定情况的更好解决方案将包括jQuery在您的扩展本地，而不是从互联网加载（例如，您的扩展目前不会脱机工作）。只需在扩展文件夹中包含jQuery的副本，并在脚本标记中使用相对路径引用它。假设你的jQuery库和HTML弹出文件在同一个子目录下，只需要：

 < script src =jquery-xyz min.js>< /脚本> 
  

Following is my code of HTML

Scripts:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="background.js"></script>

HTML:

      <button name="btnlogin" id="btnlogin">Login</button><br/><br/>

and following is js

$(document).ready(function(){
document.getElementById("#btnlogin").click(function(){
   alert("s");
 });
});

manifest file:

{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a 'browser action' with kittens.",
 "version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
}

I found that when I run this code simply in browser than alert appears properly but when I run it as a chrome extension it gives me following errors.

Uncaught ReferenceError: $ is not defined

and

Refused to load the script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

I don't understand what are these errors. Please help me understanding the extension..

Thank you

解决方案

In a Chrome extension, external script sources must be explicitly allowed by the extension's content security policy (CSP) in your manifest:

If you have a need for some external JavaScript or object resources, you can relax the policy to a limited extent by whitelisting secure origins from which scripts should be accepted...

A relaxed policy definition which allows script resources to be loaded from example.com over HTTPS might look like:

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

Scripts can only be loaded into an extension over HTTPS, so you must load the jQuery CDN resource over HTTPS:

<script src="https://ajax.googleapis.com/..."></script>

And add a modified CSP to your manifest to allow that HTTPS resource:

{
    "manifest_version": 2,
    "name": "One-click Kittens",
    "description": "This extension demonstrates a 'browser action' with kittens.",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

And even better solution for your particular case, however, would be to include jQuery in your extension locally, instead of loading from the Internet (for example, your extension currently won't work offline). Simply include a copy of jQuery in your extension folder and refer to it with a relative path in your script tag. Assuming your jQuery library and HTML popup file are in the same subdirectory, simply do:

<script src="jquery-x.y.z.min.js"></script>

这篇关于由于内容安全策略指令，扩展拒绝加载脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！