google-chrome - 拒绝框架“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.

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

1. 通过设置响应 header (我在 web.config 文件中完成):

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

2. 在页眉中添加元标记:

   <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 条目完全解决了问题，而无需我添加任何我自己的自定义 header :

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