由于内容安全策略指令，扩展程序拒绝加载脚本

Posted 2023-02-19

【中文标题】由于内容安全策略指令，扩展程序拒绝加载脚本

【英文标题】：Extension refuses to load the script due to Content Security Policy directive

【发布时间】：2014-11-10 03:11:26

【问题描述】：

以下是我的 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="btnlogin" id="btnlogin">Login</button><br/><br/>

下面是js

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

清单文件：

"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"
,

我发现，当我在浏览器中运行此代码时，警报会正常显示，但当我将它作为 chrome 扩展程序运行时，它会出现以下错误。

未捕获的引用错误：$ 未定义

和

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

我不明白这些错误是什么。请帮助我理解扩展..

谢谢

【问题讨论】：

听起来您可能正在遵循有关制作旧版本 1 清单扩展的指南...$ is not defined 表示 jquery 未加载，第二条消息告诉您 jquery 未加载的原因没有加载。您应该向我们展示您的扩展清单。以下是扩展清单的文档：developer.chrome.com/extensions/manifest

在扩展中打包jQuery即可。

我已经下载了 jquery 文件并将其链接到 HTML 页面。事情已经开始了，但是 jquery 的更新或迁移呢？

我想我每次都需要手动更新jquery。

【参考方案1】：

在 Chrome 扩展程序中，扩展程序的 content security policy (CSP) 在您的清单中必须明确允许外部脚本源：

如果您需要一些外部 javascript 或对象资源，您可以通过将应接受的脚本的安全来源列入白名单来在有限程度上放宽政策...

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

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

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

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

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

    "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'"

然而，对于您的特定情况，更好的解决方案是在本地扩展中包含 jQuery，而不是从 Internet 加载（例如，您的扩展当前无法离线工作）。只需在您的扩展文件夹中包含一个 jQuery 副本，并在您的脚本标签中使用相对路径来引用它。假设您的 jQuery 库和 HTML 弹出文件位于同一个子目录中，只需执行以下操作：

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

【讨论】：

如果您需要允许多个网址怎么办？我在文档中没有看到任何关于如何实现这一目标的示例。

@TheMuffinMan 只需用空格分隔它们。请注意，CSP 是 Chrome aops/extensions 借用的通用 Web 标准；一般来说，您在查找 CSP 文档/语法时可能会更幸运。

@AdityaC 做 Chrome 扩展开发已经有一段时间了，但我不认为对非脚本资源有严格的 HTTPS 要求。只需将域添加到您的权限并获取 JSON。您需要分享您的代码（在一个新问题中）和您的具体错误。

多个网址如下所示："content_security_policy":"script-src 'self' https://example.com https://anotherexample.com; object-src 'self'"

并确保不要像我愚蠢的那样在域名后面加上斜线......

【参考方案2】：

<script nonce='<?= CSP::getNonce() ?>'>
var oldCreate = document.__proto__.createElement;
document.__proto__.createElement = function (elementName)       
    var el = oldCreate.apply(this, arguments);
    if (elementName == "script")            
        el.setAttribute('nonce', '<?= CSP::getNonce() ?>');
    
    return el;

</script>

<script nonce='<?= CSP::getNonce()?>' type="text/javascript" src="/include/jquery.js"></script>

【讨论】：

这没有回答问题。它没有提供任何有价值的信息。它使用的语言/库与问题中提出的不同。