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

Question

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

我遇到了这个问题：

    Content Security Policy: The page's settings blocked the loading
    of a resource at
    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>

Answer 1

您说过您只能从您自己的站点（自己）加载脚本。然后您尝试从另一个站点 (www.google.com) and, because you've restricted this, you can't. That's the whole point of 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），所以老实说，它可能不会增加太多价值。

Answer 2

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

我发现在 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-Security-Policy。您可能需要添加源引用。

Answer 3

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

火狐

在 Firefox 地址栏中键入 about:config 并找到 security.csp.enable 并将其设置为 false。

Chrome

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

Answer 4

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

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).

在Chrome中，错误信息改为：

Failed to load resource: the server responded with a status of 404 ()

在我的案例中，它与我的内容安全策略无关，而只是我的 TypeScript 错误的结果。

检查您的 IDE 输出 window 是否存在 TypeScript 错误，例如：

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

_{注意：由于此问题是此错误消息 Google 上的第一个结果。}

Answer 5

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

Answer 6

我设法允许我所有必需的网站使用此 header:

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

Answer 7

您可以通过在 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>

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

Content Security Policy: The page's settings blocked the loading of a resource

javascript

jquery

content-security-policy

火狐

Chrome