内容安全策略：页面设置阻止加载 domain.com 上的资源（“default-src”）

Question

我正在尝试在我的网页中嵌入一个 twitch.tv 播放器，但我不断收到：

Content Security Policy: The page’s settings blocked the loading of a resource at https://player.twitch.tv/?channel=bluebeast8888&parent=http://blue.requiem.moe (“default-src”).

我当前的标题设置：

    header("Content-Security-Policy: default-src 'self' *.twitch.tv; script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'none'; style-src 'self' 'unsafe-inline'; media-src *; frame-src 'unsafe-inline' 'unsafe-eval' *.twitch.tv;");

我当前的元标记：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' player.twitch.tv; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.twitch.tv">

我做错了什么？

Answer 1

可能是 2 个问题：

A)。您使用非 CSP3 兼容的浏览器。在 HTTP: 页面上，无方案来源将通过同源策略获取方案。因此player.twitch.tv -> http://player.twitch.tv 和 *.twitch.tv -> http://*.twitch.tv.
http://*.twitch.tv 和 http://player.twitch.tv 都不允许在 CSP2 浏览器中使用带有 httpS://player.twitch.tv 的 iframe（而 CSP3 浏览器允许将 http: 升级到 https:）。
在这种情况下，如果您使用精确的方案嵌入 <iframe src='https://player.twitch.tv'>，则使用带有类似 default-src 'self' https://player.twitch.tv 的方案的源代码。

B)。可能您的 CSP 标头已被 .htaccess 或 Web 服务器配置中的其他 CSP 覆盖。您显示的 HTTP 标头包含 frame-src，但您在 default-src 中观察到违规，这意味着不是 HTTP 标头是锁定的原因。
检查真正传递到网页的 CSP 标头，here 是教程。
或者，您可以查看 Chrome 浏览器控制台 - 它比 Firefox 控制台更详细，并且不仅会显示违反的指令，还会显示其危险。

顺便说一句

1. 您在 Url phttps://player.twitch.tv/?channel=bluebeast8888&parent=http://blue.requiem.moe 中有错误（查看开发工具或浏览器控制台），parent=http://blue.requiem.moe 参数应该没有 http:// 方案：

https://player.twitch.tv/?channel=bluebeast8888&parent=http://blue.requiem.moe

1. 您在 HTTP 标头和元标记中有 different CSP。

多个策略通过逻辑“AND”进行操作 - 所有来源都应完好无损地通过两个 CSP。
同时保持 2 个 CSP 令人头疼，删除一个。

1. frame-src 指令不支持 'unsafe-inline' 和 'unsafe-eval' 令牌，您可以将其删除。