iframe - 嵌入页面的不同方法

Question

我们为客户提供第三方网站。当我们处理 RFP 时，我们经常会被问到是否可以将我们的网站嵌入到我们客户的网站中。我们的许多潜在客户都有不寻常的限制或要求，例如“不要使用 iframe”。

为此，我被要求确保我们即将重新设计的网站能够以至少两种方式嵌入客户的网站。

将功能齐全的网站(与跨站点图像或静态内容相对)嵌入另一个网站的方法如下:

iframe - 经常被使用，经常被诽谤，还有我们的一些
之前的 RFP 明确排除了这种可能性。

Object/Embed tags - 回过头来，可以嵌入一个
以与嵌入相同的方式将功能齐全的 HTML 页面转换为另一个页面
一个闪光对象。

Ajax - 据说能够加载一个完整的
站点转换为 HTML 对象(例如 div 标签)，但由于跨域请求的危险性，似乎还有其他安全问题需要跳过。

是否有其他方法可以将完整站点放置在来自不同域的另一个站点中？以上三个中的任何一个是否有任何警告或限制(例如，我们的网站使用 AJAX 调用进行登录并更新一些用户定义的设置，这些在上述每个嵌入策略中都能正常运行吗？)我可能会不知道？

提前致谢。

Answer 1

X-Frame-Options响应头

如果您要将自己的站点嵌入到其他人的站点中，则必须小心 X-Frame-Options response header .确保您的网站不发送 SAMEORIGIN作为 X-Frame-Options 的值.如果这样做，将会导致 iframes and embedded objects 出现问题。 .你可以做两件事:

你绝对不发送标题:任何站点都可以在 iframe 中或作为嵌入对象显示您的站点。这可能会导致安全问题，例如 clickjacking .见 this article有关点击劫持的更多信息和防御。

您可以确保只有您授权的站点才能嵌入您的站点:这是通过发送 ALLOW-FROM url 来完成的X-Frame-Options 的值标题。您可以嗅探 HTTP-referer以确定哪个站点正在请求您的页面。这确实比选项 1 安全(当然，除非用户的浏览器是恶意的)。注意:并非所有浏览器都支持 ALLOW_FROM .见 linked reference对于支持的浏览器

同源政策

Same Origin Policy只要您的站点和您的客户站点不访问彼此的 DOM，就不会影响您。

CORS

Cross-Origin Resource Sharing如果来自您客户网站的脚本向您网站中的资源发出 AJAX 请求 ( XmlHttpRequest )，则应考虑。但就你的问题而言，我认为情况并非如此。

I gave an answer explaining CORS some time back ，如果你想对CORS有一个基本的了解，你可以阅读它。

第三方网站插件

您似乎正在尝试在客户站点中嵌入一些功能。考虑提供像这样的网站插件 Facebook和 Disqus做。

我不确定同源政策或 CORS 是否适用于此。我会找出来并回复你。

注: X-Frame-Options 、同源策略和 CORS 由浏览器实现。如果用户浏览器没有实现这些东西，或者如果浏览器被黑客入侵而不遵守这些安全策略，你就无能为力。