内容安全策略：页面的设置阻止了资源的加载答案

【问题标题】：Content Security Policy: The page's settings blocked the loading of a resource内容安全策略：页面的设置阻止了资源的加载
【发布时间】：2016-09-14 21:08:29
【问题描述】：

我在页面加载时使用CAPTCHA，但由于某些安全原因它被阻止。

我正面临这个问题：

内容安全策略：页面设置阻止加载的资源在 http://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit （“script-src http://test.com:8080 'unsafe-inline' 'unsafe-eval'”）。

我使用了以下 JavaScript 和元标记：

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<script src="http://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>

【问题讨论】：

如果我是你，我会尝试使用服务器端代码而不是 JavaScript。 JS 对 CORS 和类似的东西不太好。谷歌确实有这方面的选择..
我在这个问题上加了javascript标签，因为这个问题和jQuery无关。它会影响任何 JavaScript。事实上，如果你完全删除 jQuery 标签，这个问题会更有用，但我不适合这样做。
现在deleted answer 是正确的。 “内容安全策略：页面设置阻止加载资源”的一个原因是浏览器中的 JavaScript 未启用或阻止（例如，NoScript）。在这种情况下，部分错误输出可能是“无法处理未知指令‘noscript-marker’”。
我无法评论使用 about:config 的其他建议，所以我想我会在这里添加它。有人建议进入 about:config 并将 security.csp.enable 设置为 false。其他人都说这是一个可怕的想法。我只想说这也是我决定使用的解决方案。很多网站刚刚完全停止在 Firefox 中为我工作，到处都是这些错误。 Chrome 仍会加载它们。在不知道为什么会这样的情况下，将 security.csp.enable 设置为 false 允许这些站点使用 Firefox 再次加载，我更喜欢 Firefox 而不是 Chrome。如果

标签： javascript jquery content-security-policy

【解决方案1】：

您说过您只能从您自己的站点（自己）加载脚本。然后，您尝试从另一个站点 (www.google.com) 加载脚本，并且由于您对此进行了限制，因此您不能。这就是Content Security Policy (CSP) 的全部意义所在。

您可以将第一行更改为：

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.google.com">

或者，在您了解有关 CSP 的更多信息之前，可能值得完全删除该行。无论如何，您当前的 CSP 相当宽松（允许 unsafe-inline、unsafe-eval 和 default-src 或 *），所以说实话，它可能不会增加太多价值。

【讨论】：

这是一个不安全的解决方法 - Google's CSP checker 给这条线多次严重故障。（不幸的是，实现一个好的 CSP 并非易事，需要针对每个站点进行定制。）
我对这个评论有异议。 CSP 的问题是由于原始 CSP 造成的。所有这个答案所做的就是接受这个并将 www.google.com 域添加到这个问题中。我能否建议同时进一步收紧 CSP？可能，但我会说这超出了问题的范围。尤其是已经很明显 OP 不熟悉 CSP。
现在 CSP “不安全”了吗？这是有争议的。允许 unsafe-inline 和 unsafe-eval 以及 * 的默认来源违背了 CSP 的大部分目的（因此我还建议删除它），但应该记住 CSP 不能永远放松浏览器控制，所以即使这个失去的政策也在增加对没有 CSP 的页面的一些控制——正如它阻止谷歌脚本的事实所证明的那样！所以“不安全”可能不是一个好词。 “太松，不值得”也许是一种更好的措辞方式。所以是的，这个 CSP 有很多不足之处，但将 Google 添加到它并不是“不安全的解决方法”。
公平一点，任何 CSP（除了“一切都很好）”通常总比没有好。
这有一点点问题，我从chrome://global/content/elements/panel.js (Firefox) 收到了这个错误，它禁用了所有页面上的调试

【解决方案2】：

在 Visual Studio 2019 中运行我的 ASP.NET CoreAngular 项目时，有时我会在 Firefox 控制台中收到以下错误消息：

内容安全政策：页面的设置阻止了内联资源的加载（“default-src”）。

在 Chrome 中，错误消息是：

加载资源失败：服务器响应状态为404()

在我的情况下，它与我的内容安全策略无关，而只是我的 TypeScript 错误的结果。

检查 IDE 输出窗口是否存在 TypeScript 错误，例如：

> ERROR in src/app/shared/models/person.model.ts(8,20): error TS2304: Cannot find name 'bool'.
>
> i ｢wdm｣: Failed to compile.

_{注意：因为这个问题是谷歌上这条错误信息的第一个结果。}

【讨论】：

【解决方案3】：

我遇到了类似的错误类型。首先，我尝试在代码中添加元标记，但没有成功。

我发现在 nginx 网络服务器上你可能有一个安全设置可能会阻止外部代码运行：

# Security directives
server_tokens off;
add_header X-Frame-Options SAMEORIGIN;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'  https://ajax.googleapis.com  https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net; img-src 'self' https://ssl.google-analytics.com https://s-static.ak.facebook.com https://assets.zendesk.com; style-src 'self' 'unsafe-inline' https://assets.zendesk.com; font-src 'self' https://fonts.gstatic.com  https://themes.googleusercontent.com; frame-src https://player.vimeo.com https://assets.zendesk.com https://www.facebook.com https://s-static.ak.facebook.com https://tautt.zendesk.com; object-src 'none'";

检查内容安全策略。您可能需要添加源引用。

【讨论】：

请注意，这是不安全的 - 此 Content-SecurityPolicy 从 Google's CSP Evaluator 获得高严重性故障。

【解决方案4】：

我设法允许我所有必要的网站都带有这个标题：

header("Content-Security-Policy: default-src *; style-src 'self' 'unsafe-inline'; font-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' stackexchange.com");

【讨论】：

【解决方案5】：

我通过升级我使用的 Angular 版本（从 v8 -> v9）和 TypeScript 版本（从 3.5.3 -> 最新）来解决这个问题。

【讨论】：

解释是什么？

【解决方案6】：

您可以通过在 htaccess 中添加代码来修复

<IfModule mod_headers.c>
    # Feature-Policy
    Header set Feature-Policy "microphone 'none'"
    # Referrer-Policy
    Header set Referrer-Policy "same-origin"
    # Content-Security-Policy   
    Header set Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' e.g. https://ajax.googleapis.com https://ssif1.globalsign.com https://malsup.github.io https://seal.globalsign.com https://www.googletagmanager.com https://www.google.com https://www.gstatic.com https://assets.zendesk.com https://chimpstatic.com https://cdn.ywxi.net https://static.hotjar.com https://maxcdn.bootstrapcdn.com https://www.google-analytics.com https://static.zdassets.com https://connect.facebook.net https://script.hotjar.com https://*.livechatinc.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com https://ajax.googleapis.com;"
    # X-XSS-Protection
    Header set X-XSS-Protection "1; mode=block"
</IfModule>

【讨论】：

【解决方案7】：

您可以在浏览器中禁用它们。

火狐

在火狐地址栏输入about:config，找到security.csp.enable，设置为false。

铬

您可以安装名为 Disable Content-Security-Policy 的扩展程序来禁用 CSP。

【讨论】：

不要这样做，除了临时调试。这是浏览器的一项重要安全功能。
这只会在本地修复它，此外，它会使您的浏览器更容易受到攻击。
这是测试/调试的“建议”吗？如果是这样，则应在回答中提及它，以避免在不知情的人群中传播危险的漏洞。顺便说一句，正如@NeilChowdhury 所说，这将在您的系统上修复它，那么实际的网站访问者呢？
临时解决方案但有助于调试（加一）
@hackel 我会这样做的。我会的。