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

Posted

技术标签:

【中文标题】内容安全策略:页面的设置阻止了资源的加载【英文标题】: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。如果 【参考方案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-inlineunsafe-evaldefault-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 我会这样做的。我会的。

以上是关于内容安全策略:页面的设置阻止了资源的加载的主要内容,如果未能解决你的问题,请参考以下文章

内容安全策略正在阻止 Firefox 中的 svg 图标精灵

此计算机上的安全策略设置可能在阻止连接

无法在重新加载页面上获取 /login Angular 8 - 拒绝加载图像“/favicon.ico”,因为它违反了以下内容安全策略

web安全

由于内容安全策略,无法在Iframe中加载BIRT报告的图像

内容安全策略阻止了我的JQuery脚本中的代码