拒绝加载脚本，因为它违反了以下内容安全策略指令

Question

当我尝试将我的应用部署到 Android 系统高于 5.0.0 (Lollipop) 的设备上时，我不断收到这些错误消息：

07-03 18:39:21.621: D/SystemWebChromeClient(9132): file:///android_asset/www/index.html: 第 0 行：拒绝加载 脚本'http://xxxxx'，因为它违反了以下内容 安全策略指令：“script-src 'self' 'unsafe-eval' '不安全内联'”。07-03 18:39:21.621: I/chromium(9132): [INFO:CONSOLE(0)] "拒绝加载脚本 'http://xxx' 因为它 违反以下内容安全策略指令：“script-src 'self' 'unsafe-eval' 'unsafe-inline'"。

但是，如果我将其部署到 Android 系统为 4.4.x (KitKat) 的移动设备上，则安全策略适用于默认策略：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

然后我想，也许，我应该改成这样：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline'; object-src 'self'; style-src 'self' 'unsafe-inline'; media-src *">

基本上，这两个选项都不适合我。我该如何解决这个问题？

Answer 1

如果您使用的是头盔包，那么只需将 contentSecurityPolicy: false, 传递给这样的头盔功能选项

app.use(
  helmet({
    contentSecurityPolicy: false,
  })
);

Answer 2

对于像我这样使用 Apache/Debian 服务器的傻瓜，他们试图将其添加到 index.html 文件中（并因此损失了几个小时），答案将是这样的：

编辑：/etc/apache2/sites-available/yourwebsiteconfig.com-ssl.conf

添加或修改以下行：

Header always set Content-Security-Policy: "script-src 'self' 'unsafe-inline' 'unsafe-eval' data: https://www.googletagmanager.com"

这里：

<IfModule mod_headers.c>
        Header always append X-Frame-Options SAMEORIGIN
        Header always set Content-Security-Policy: "script-src 'self' 'unsafe-inline' 'unsafe-eval' data: https://www.googletagmanager.com"
</IfModule>

Answer 3

对于任何寻求完整解释的人，我建议您查看内容安全政策：https://www.html5rocks.com/en/tutorials/security/content-security-policy/。

"来自https://mybank.com 的代码只能访问 https://mybank.com 的数据，https://evil.example.com 应该 当然永远不允许访问。每个来源都与 网络的其余部分”

XSS 攻击是基于浏览器无法区分您的应用代码和从其他网站下载的代码。因此，您必须使用Content-Security-Policy HTTP 标头将您认为可以安全下载内容的内容来源列入白名单。

此政策使用一系列政策指令进行描述，每个政策指令都描述了特定资源类型或政策领域的政策。您的策略应该包含一个 default-src 策略指令，这是其他资源类型在没有自己的策略时的备用。

因此，如果您将标签修改为：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;**script-src 'self' http://onlineerp.solution.quebec 'unsafe-inline' 'unsafe-eval';** ">

您是说您正在授权执行 JavaScript 代码 (script-src) 起源于'self'、http://onlineerp.solution.quebec、'unsafe-inline'、'unsafe-eval'。

我猜前两个对您的用例完全有效，我对其他的有点不确定。 'unsafe-line' 和 'unsafe-eval' 存在安全问题，因此除非您对它们有非常特殊的需求，否则不应使用它们：

“如果 eval 和它的 text-to-JavaScript 兄弟是完全必要的 到您的应用程序中，您可以通过添加 'unsafe-eval' 作为 script-src 指令中允许的源。但是，再次，请不要。 禁止执行字符串的能力使其变得更加困难 攻击者可以在您的网站上执行未经授权的代码。”（Mike West，Google）

Answer 4

您收到此错误的可能原因可能是因为您已将 /build 文件夹添加到 .gitignore 文件中，或者通常没有将其检入 Git。

所以当你 Git 推送 Herokumaster 时，你引用的构建文件夹不会被推送到 Heroku。这就是它显示此错误的原因。

这就是它在本地正常工作的原因，但在部署到 Heroku 时却不行。

Answer 5

完整权限字符串

之前的答案没有解决我的问题，因为它们没有同时包含 blob: data: gap: 关键字；所以这是一个字符串：

<meta http-equiv="Content-Security-Policy" content="default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;">

警告：这会使文档暴露在许多漏洞中。请务必防止用户在控制台中执行代码或处于封闭环境中，例如 Cordova 应用程序。

Answer 6

添加元标记以忽略此政策对我们没有帮助，因为我们的网络服务器在响应中注入了 Content-Security-Policy 标头。

在我们的例子中，我们使用 Ngnix 作为 Tomcat 9 基于 Java 的应用程序的 Web 服务器。从网络服务器，它指示浏览器不允许inline scripts，因此为了临时测试，我们通过评论关闭了Content-Security-Policy。

如何在 ngnix 中关闭它

• 默认情况下，ngnix ssl.conf 文件会在响应中添加一个标头：

  #> grep 'Content-Security' -ir /etc/nginx/global/ssl.conf add_header Content-Security-Policy "default-src 'none'; frame-ancestors 'none'; script-src 'self'; img-src 'self'; style-src 'self'; base-uri 'self'; form-action 'self';";

• 如果你只是评论这一行并重新启动 ngnix，它不应该将标题添加到响应中。

如果您担心安全性或生产过程中的问题，请不要 遵循这一点，将这些步骤仅用于测试目的并继续。

Answer 7

为了详细说明这一点，添加

script-src 'self' http://somedomain 'unsafe-inline' 'unsafe-eval';

像这样的元标记，

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src 'self' https://somedomain.com/ 'unsafe-inline' 'unsafe-eval';  media-src *">

修正错误。

Answer 8

self answer given by MagngooSasa 成功了，但对于其他试图理解答案的人来说，这里有一些详细信息：

在使用 Visual Studio 开发 Cordova 应用程序时，我尝试导入远程 JavaScript 文件 [位于此处 http://Guess.What.com/MyScript.js]，但出现标题中提到的错误。

这里是meta标签before，在项目的index.html文件中：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

这里是 更正 元标记，允许导入远程脚本：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;**script-src 'self' http://onlineerp.solution.quebec 'unsafe-inline' 'unsafe-eval';** ">

再也没有错误了！

Answer 9

已解决：

script-src 'self' http://xxxx 'unsafe-inline' 'unsafe-eval';

Answer 10

我们使用了这个：

<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; style-src 'self' http://* https://* 'unsafe-inline'; script-src 'self' http://* https://* 'unsafe-inline' 'unsafe-eval'">