拒绝框架 'https://www.youtube.com/embed/xxxxx 因为它违反了内容安全策略指令

Question

我正在尝试在我的页面中嵌入一个 YouTube 视频，但在控制台中看到这样的错误：

Refused to frame 'https://www.youtube.com/embed/<~videoId~>?showinfo=0'
because it violates the following Content Security Policy directive: 
"default-src 'self'". Note that 'frame-src' was not explicitly set, so 
'default-src' is used as a fallback.

这似乎很清楚，所以在阅读了一些内容后，我发现了两种设置适当的内容安全策略的方法。

通过设置响应 header（我在 web.config 文件中所做的）：

<httpProtocol>
  <customHeaders>
    <add name="Content-Security-Policy" value="frame-src https://www.youtube.com/" />
  </customHeaders>
</httpProtocol>

在页面中使用元标记 header:

<meta http-equiv="Content-Security-Policy" content="frame-src https://www.youtube.com">

这些方法都不起作用； Chrome 继续在控制台中给出相同的结果（即使我已经完成了我认为消息的意思并设置了请求的内容安全策略）。 iframe 仍然被阻止且为空。

有很多关于内容安全策略的问题和答案，但我在这种情况下找不到任何问题和答案。

我的网站在 https 上运行，我的 iframe 和嵌入式视频如下所示：

<div id="videoContainer">
    <iframe src="https://www.youtube.com/embed/<~videoId~>?showinfo=0"
            frameborder="0"
            allowfullscreen>
    </iframe>
</div>

问题只出现在 Chrome 和 FFirefox 上； Internet Explorer 11 没有内容安全策略也可以。

提前感谢您的任何建议。

Answer 1

我自己找到了答案。我试图在 Identity Server 3 安装的登录页面上嵌入一个视频，这比我想象的要大。

Chrome 网络选项卡包含来自 Identity Server 的 csp 报告，根据该线索快速搜索可以在 Identity Server 文档中找到答案： https://identityserver.github.io/Documentation/docsv2/advanced/csp.html

在身份服务器选项中添加一个 cspOptions 条目解决了整个问题，而无需我添加任何我自己的自定义 headers:

var options = new IdentityServerOptions
{
    SigningCertificate = Certificate.Load(),
    Factory = factory,
    RequireSsl = true,
    CspOptions = new CspOptions() {FrameSrc = "https://www.youtube.com"},
              ...
              ...
 }

拒绝框架 'https://www.youtube.com/embed/xxxxx 因为它违反了内容安全策略指令

Refused to frame 'https://www.youtube.com/embed/xxxxx because it violates Content Security Policy directive

youtube

firefox

google-chrome

content-security-policy