【问题标题】:Refused to frame 'https://www.youtube.com/embed/xxxxx because it violates Content Security Policy directive拒绝框架'https://www.youtube.com/embed/xxxxx,因为它违反了内容安全政策指令
【发布时间】:2017-02-07 14:50:44
【问题描述】:

我正在尝试在我的页面中嵌入一个 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 也可以。

提前感谢您的任何建议。

【问题讨论】:

  • 这是网上的,我可以看看吗?错误显示"default-src 'self'",这意味着它没有看到您的任何一个值。您是否在网络活动中看到预期的响应标头?您是否在框架内取景?
  • @oreoshake 不,它目前正在开发中,只能在我的本地机器上使用。框架代码与列出的完全一样,让我很难过,直到我意识到这是一个 IdentityServer 的东西——我在下面发布了解决方案。

标签: google-chrome firefox youtube content-security-policy


【解决方案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"},
              ...
              ...
 }

【讨论】:

    猜你喜欢
    • 2021-05-10
    • 2020-06-23
    • 1970-01-01
    • 2018-07-02
    • 1970-01-01
    • 2016-01-14
    • 1970-01-01
    • 2020-12-15
    • 2020-04-16
    相关资源
    最近更新 更多