拒绝框架 '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. 通过设置响应头（我在我的 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 条目添加到身份服务器选项完全解决了问题，而不需要我添加任何我自己的自定义标头：

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