Question

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

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

拒绝执行JavaScript网址，因为它违反了以下规定内容安全政策指令：＆＃34; script-src＆＃39; self＆＃39; 铬 - 延伸：//＆＃34 ;. “不安全 - 内联”和“不安全”。关键字，哈希（＆＃39; sha256 -...＆＃39;）或nonce（＆＃39; nonce -...＆＃39;）需要启用内联执行。

错误消息清楚地表明可以解决这个问题。

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

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

任何可行的工作？

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

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

Answer 1

~~不，这是不可能放宽此政策。~~ unsafe-inline被Chrome Extensions特别忽略，因为清单版本为2。

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所述的技术来放宽限制。

<script>元素的哈希用法

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

您的代码中包含以下内容：

<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

Answer 4

Chrome扩展程序专门忽略

nonce 是不安全的。从2020年9月（v.85）开始，只有' sha256 .. '选项有效。但是很不方便，因为哈希随着每次html文件更新而更改。

Answer 5

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

修复前出现错误；

Answer 6

您可以像这样配置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

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

6 个答案:

更新

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

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

6 个答案:

更新

<script>元素的哈希用法

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