内容安全策略 Headers 阻止允许的域

Question

我正在尝试让内容安全策略在我的网站上正常工作，但即使应该允许内容，我还是被阻止了。在我的网站上使用 Google 的 CSP Evaluator 我可以看到规则：

default-src 'self';
font-src 'self' fonts.gstatic.com;
img-src 'self' gstatic.com;
script-src 'self' google.com gstatic.com;
style-src 'self' google.com gstatic.com;
form-action 'self';
frame-ancestors 'self';

在禁用 CPS 的情况下，我向 google 站点发出各种字体、样式和脚本（用于 ReCapture）请求，但启用它后 none 已加载这些请求（查看网络负载）请求图）。

查看 securityheaders.io 的 CSP，似乎我允许某些域通过没有任何问题。

default-src 'self';
script-src 'self' cdnjs.cloudflare.com;
img-src 'self';
style-src 'self' 'unsafe-inline' fonts.googleapis.com cdnjs.cloudflare.com;
font-src 'self' fonts.gstatic.com cdnjs.cloudflare.com;
form-action 'self';
report-uri https://scotthelme.report-uri.com/r/default/csp/enforce

奇怪的是，除了用于在弹出窗口中显示图像的灯箱之外 window 无法正常工作，该网站的外观和行为与启用或禁用 CSP 时相同。我还检查了 Cloudflare's guide 我似乎不需要使用它们作为我的 CDN 启用任何其他功能。

我正在使用 Wordpress plug-in 来管理这些 header，但我可以从加载站点中看到 header，而且它们确实存在。

我的 CSP header 明显有问题，会阻止加载列入白名单的网站

Answer 1

当您在应用程序中使用内联脚本以及尝试同时使用 CSP 时，您会遇到这种类型的错误。如果你想包含 CSP 以减少 XSS 攻击，那么你已经删除了应用程序中的内联脚本。内联脚本意味着在 html 文件本身的 "script" 标签内编写脚本。

示例：

<head>
   <script> console.log("Inline Scripting")</script>
</head>

问题解决方案： 1. 您可以将脚本放在单独的 js 文件中，然后在 html 文件中引用它（或） 2. 如果你想使用来自任何其他 server/domain 的脚本文件，你可以在 CSP 元标记中指定地址，你可以在你的 html 中引用该脚本。参考下面的例子：

<html>
<head>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://samplejs_website:8887/>
 <script src="https://samplejs_website:8887/index.js"></script>
</head>
<body>
</body>
</html>

注意：您可以在 CSP 元标记中使用 'unsafe-inline'，并且可以在您的应用程序中使用内联脚本。但是不推荐。

Answer 2

如果这是 Google 脚本之一的问题，我发现他们的脚本经常加载 other 脚本，这可能会导致 CSP 出错。查看 strict-dynamic 政策。它基本上说 "allow this known script to load other, unknown scripts".

内容安全策略 Headers 阻止允许的域

Content Security Policy Headers Blocking Allowed Domains

wordpress

content-security-policy