Chrome扩展程序 - 内容安全策略 - 执行内联代码

Question

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

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

拒绝执行JavaScript URL，因为它违反了以下内容安全策略指令：“script-src'self'chrome-extension：//”。要么是'unsafe-inline'关键字，哈希（'sha256 -...'），要么是nonce（'nonce -...'）来启用内联执行。

错误消息清楚地表明有可能解决方法。

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

Blog这位博主说这是可能的，但这可能仅适用于较旧的Chrome扩展程序。

任何可能的工作？

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

编辑：如何使用哈希或随机数启用内联执行。

Answer 1

不，这是不可能放宽这项政策。自清单版本2以来，Chrome扩展程序特别忽略了unsafe-inline。

Documentation（强调我的）：

没有放松对执行内联JavaScript的限制的机制。特别是，设置包含“unsafe-inline”的脚本策略将不起作用。

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

更新

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

有关白名单的更深入了解，请参阅this answer。

Answer 2

复制了我对类似问题here的回答。对于最新版本的Chrome（46+），目前的答案已不再适用。 unsafe-inline仍然没有效果（在清单和meta标题标签中），但根据documentation，你可以使用here描述的技术放宽限制。

Hash usage for <script> elements

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

用法很简单。服务器计算特定脚本块内容的哈希值，并在Content-Security-Policy头中包含该值的base64编码：
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>

结果：

Answer 3

我在登录页面上添加了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";
    }
}

修复前出错;

Chrome扩展程序 - 内容安全策略 - 执行内联代码

问题描述投票：14回答：3

3个回答

更新

Hash usage for `<script>` elements

最新问题

Chrome扩展程序 - 内容安全策略 - 执行内联代码

问题描述 投票：14回答：3

3个回答

更新

Hash usage for <script> elements

最新问题

问题描述投票：14回答：3

Hash usage for `<script>` elements