Chrome 扩展 - 内容安全策略 - 执行内联代码答案

【问题标题】：Chrome Extension - Content Security Policy - executing inline codeChrome 扩展 - 内容安全策略 - 执行内联代码
【发布时间】：2014-10-26 20:06:49
【问题描述】：

我在我的 chrome 扩展程序中使用了一个外部 JavaScript 库。我有内联执行，所以我得到了以下错误

（我在控制台上遇到的错误）

拒绝执行 JavaScript URL，因为它违反了以下内容内容安全策略指令：“script-src 'self' chrome-extension://". 'unsafe-inline' 关键字，一个哈希 ('sha256-...') 或 nonce ('nonce-...') 需要启用内联执行。

错误消息清楚地表明有一种解决方法。

Chrome-Content Security Policy 说不可能。许多相关问题都引用了此链接。

Blog这个博主说是可以的，但是可能这仅适用于旧版chrome扩展。

有什么办法可以解决吗？

PS：不想/不能更改我正在使用的整个库。

编辑：如何使用散列或随机数来启用内联执行。

【问题讨论】：

已经提出了类似的问题，但我想有些东西被遗漏了。
请给我们产生错误的代码
我认为从清单 3 开始，这没有解决方法

标签： google-chrome google-chrome-extension content-security-policy

【解决方案1】：

nonce 被 Chrome 扩展程序明确忽略为不安全。截至 2020 年 9 月 (v.85)，只有 'sha256..' 选项有效。但是不方便，因为每次 html 文件更新时哈希都会改变。

【讨论】：

你能用 sha256 举个例子吗？我知道这个也是无效的。

【解决方案2】：

你可以像这样配置csp nonce


Content-Security-Policy: script-src 'nonce-xyz123'; style-src 'nonce-xyz123';


<script src="https://www.paypal.com/sdk/js?client-id=sb" data-csp-nonce="xyz-123">

https://developer.paypal.com/docs/checkout/troubleshoot/support/#mobile

【讨论】：

当我尝试这个时，我的清单中的所有其他 .js 文件都拒绝加载，因为它违反了此政策
同意这对我也不起作用...同样的事情违反了政策
您目前有使用 paypal sdk 的示例吗？
嗨@JosephAstrahan，我不再从事这个项目。可能是规则被改变了

【解决方案3】：

你的代码中有这样的东西：

<button onclick="myFunction()"> Show password</button>

简而言之，这在 chrome 应用程序和扩展程序中是不允许的。

将其更改为以下内容即可：

html:

<button id="myButton"> Show password</button>
<script src="script.js"></script>

script.js：

document.getElementById("myButton").addEventListener("click", myFunction); function myFunction(){ console.log('asd'); }

长篇大论：

在 chrome 应用中，内容安全策略不允许内联 javascript。所以你必须把你的 javascript 放在一个 .js 文件中，并将它包含在你的 HTML 中。

延伸阅读：https://developer.chrome.com/extensions/contentSecurityPolicy

【讨论】：

【解决方案4】：

在登录页面添加simple checkbox 以切换密码可见性后，我遇到了这个问题，这是我解决问题的方法，希望对您有所帮助；

我已停止使用复选框的 onclick 事件，这导致这个问题在chrome的隐身模式下，而是给了一个id 我的复选框。

之前

<div class="form__row">
        <div class="form__controls">
            <label class="checkbox"><input type="checkbox" onclick="togglePasswordVisibility()"> Show password</label>
        </div>
    </div>

之后

<div class="form__row">
        <div class="form__controls">
            <label class="checkbox"><input type="checkbox" id="checkboxTogglePasswordVisibility"> Show password</label>
        </div>
    </div>

我创建了一个 Script.js 文件并在其中添加了一个事件监听器方法处理我的复选框的 onclick 事件来完成这项工作。

记得参考你的 js 文件，如果你还没有的话。您可以像这样简单地引用它。

<script src="../Scripts/Script.js"></script>

这是我添加到我的 Script.js 中的事件侦听器。

$(document).ready(function () {
    addEventListenerForCheckboxTogglePasswordVisibility()
});

function addEventListenerForCheckboxTogglePasswordVisibility() {
    var checkbox = document.getElementById("checkboxTogglePasswordVisibility");
    if (checkbox !== null) {
        checkbox.addEventListener('click', togglePasswordVisibility);
    }
}

function togglePasswordVisibility() {
    var passwordElement = document.getElementById("password");
    if (passwordElement.type === "password") {
        passwordElement.type = "text";
    } else {
        passwordElement.type = "password";
    }
}

修复前的错误；

【讨论】：

【解决方案5】：

~~不，这不可能放宽此政策。~~自清单版本 2 以来，Chrome 扩展程序明确忽略了unsafe-inline。

Documentation（强调我的）：

没有机制可以放宽对执行内联 JavaScript 的限制。 特别是，设置包含“unsafe-inline”的脚本策略将无效。

错误消息提到了几种可能的方法，但文档很清楚没有 CSP 将允许内联脚本，忽略 unsafe-inline 只是措施之一。

更新

从 Chrome 46 开始，可以通过在策略中指定源代码的 base64 编码哈希来将内联脚本列入白名单。此哈希必须以使用的哈希算法（sha256、sha384 或 sha512）作为前缀。有关示例，请参阅元素的哈希用法。

请参阅this answer 以更深入地了解白名单。

【讨论】：

+1;澄清 OP：CSP 规范允许放宽此限制（因此建议添加 unsafe-eval），但 CSP 中允许的 Chrome 扩展比一般 CSP 规范更窄。
@Xan - 同意“不安全内联”将无效。但我相信还有其他方法 - 哈希/随机数，正如错误消息所指出的那样。
@AmitG 如果您坚持不同意文档，那是您的选择。
此答案不再适用，请参阅我更新状态的答案here。
@ChrisHunt 感谢您对此的更新答案，我在答案中包含了新信息。

【解决方案6】：

复制自我对类似问题here 的回答。对于 Chrome 的最新版本（46+），当前的答案不再正确。 unsafe-inline 仍然无效（在清单和 meta 标头标签中），但根据 documentation，您可以使用 here 描述的技术来放松限制。

<script> 元素的哈希用法

script-src 指令允许开发人员通过将特定内联脚本的哈希指定为允许的脚本源来将其列入白名单。

用法很简单。服务器计算特定脚本块内容的哈希值，并将该值的 base64 编码包含在 Content-Security-Policy 标头中：
Content-Security-Policy: default-src 'self';
                     script-src 'self' https://example.com 'sha256-base64 encoded hash'

例如，考虑：

manifest.json：

{
  "manifest_version": 2,
  "name": "csp test",
  "version": "1.0.0",
  "minimum_chrome_version": "46",
  "content_security_policy": "script-src 'self' 'sha256-WOdSzz11/3cpqOdrm89LBL2UPwEU9EhbDtMy2OciEhs='",
  "background": {
    "page": "background.html"
  }
}

background.html：

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script>alert('foo');</script>
  </body>
</html>

结果：

我还测试了将适用的指令放在 meta 标记而不是清单中。虽然控制台消息中指示的 CSP 确实包含标记的内容，但它不会执行内联脚本（在 Chrome 53 中）。

新的background.html：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-WOdSzz11/3cpqOdrm89LBL2UPwEU9EhbDtMy2OciEhs='">
  </head>
  <body>
    <script>alert('foo');</script>
  </body>
</html>

结果：

【讨论】：

如何使用锚点 href 内联执行 JS，例如 <a href="javascript:void(0)">Hello</a>。我试过rRMdkshZyJlCmDX27XnL7g3zXaxv7ei6Sg+yt4R3svU= 和97l24HYIWEdSIQ8PoMHzpxiGCZuyBDXtN19RPKFsOgk= 没有运气。
使用manifest.json 的解决方案对我有用；元标记版本不起作用。
我得到一个 'content_security_policy'：在指令 'script-src' 中忽略了不安全的 CSP 值 "sha256-TTV2e1hDY8O7+uUJbANScTuJ3ibjGZ9SqN6LdxfzDCs="。

更新

&lt;script&gt; 元素的哈希用法

`<script>` 元素的哈希用法