拒绝生成'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. by setting a response header (which I did in my web.config file):

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

2. with a meta tag in the page 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和Firefox浏览器中出现；使用Internet Explorer 11不需要内容安全策略。

提前感谢您的任何建议。

- Bob Gear

---

这个在互联网上吗？我可以看一下吗？错误显示为“default-src 'self'”，这意味着它没有看到你的任何一个值。你在网络活动中看到了预期的响应头吗？你是否在框架内进行了框架设置？ - oreoshake

@oreoshake 不，它目前正在开发中，只能在我的本地机器上使用。框架代码完全按照列表中的方式编写，直到我意识到这是一个IdentityServer的问题，才让我感到困惑 - 并提供了下面发布的解决方案。 - Bob Gear

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"},
              ...
              ...
 }

- Bob Gear