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

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

我正面临这个问题：

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

我使用了以下JavaScript和meta标签：

<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>

您已经说过只能从自己的站点（自身）加载脚本。然后，您尝试从另一个网站（www.google.com）加载脚本，并且由于限制了此操作，因此无法加载脚本。这就是内容安全策略（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的*），所以它可能不会增加太多的价值，是诚实的。

在Visual Studio 2019中运行我的ASP.NET Core Angular项目后，有时我会在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.

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

我有类似的错误类型。首先，我尝试在代码中添加meta标签，但是没有用。

我发现在Nginx Web服务器上，您可能具有可能阻止外部代码运行的安全设置：

# 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'";

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

我设法让所有必不可少的网站都带有此标头：

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

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

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

火狐浏览器

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

铬

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