iframe 限制

Question

是否有任何文档说明您不能做什么，使 iframe 无法使用？

您不能使用 facebook iframe，因为 x-frame-options 被拒绝

您不能在 Twitter 上使用 iframe，因为祖先违反了以下内容安全政策指令："frame-ancestors" self

有什么地方我可以检查什么可以和不可以设置为接受 iframe

Answer 1

据我所知，有两个 HTTP 标头可用于防止网站作为 iframe 加载到其他网站上：

X-Frame-选项

X-Frame-Options HTTP 响应标头可用于指示是否应允许浏览器以<frame>、<iframe>、<embed> 或<object> 呈现页面。

可能的值是：

• deny
• sameorigin
• allow-fromuri

您可以阅读更多关于他们各自的工作on MDN。

请注意，根据规范，frame-ancestors 优先于 X-Frame-Options：

frame-ancestors 指令废弃了 X-Frame-Options 标头。如果资源同时具有这两种策略，则应该强制执行 frame-ancestors 策略，而应该忽略 X-Frame-Options 策略。

从您发布的示例来看，Facebook 似乎将X-Frame-Options: deny 作为响应标头，这会阻止它从任何地方（在支持此标头的浏览器中）加载到 iframe 中。

内容安全策略

使用任一：

• frame-ancestors 限制哪些域可以将此网站嵌入 iframe

  HTTP Content-Security-Policy (CSP) frame-ancestors 指令指定可以使用<frame>、<iframe>、<object>、<embed> 或<applet> 嵌入页面的有效父级。

  与X-Frame-Options的主要区别在于

  许多用户代理实现 SAMEORIGIN 以便它只匹配顶级文档的位置。该指令检查每个祖先。如果任何祖先不匹配，则取消加载。

• frame-src 限制该网站可以在 iframe 中嵌入哪些域

  HTTP Content-Security-Policy (CSP) frame-src 指令使用 <frame> 和 <iframe> 等元素为嵌套浏览上下文加载指定有效源。

您可以在 MDN 上阅读有关 frame-ancestors 和 frame-src 的更多信息。

从您发布的示例来看，Twitter 似乎有Content-Security-Policy: frame-ancestors 'self'，这意味着该网站只能嵌入到同一个域中。