是否可以为 iframe 设置 Origin Header?

Posted

技术标签:

【中文标题】是否可以为 iframe 设置 Origin Header?【英文标题】:Is it possible to set Origin Header for a iframe? 【发布时间】:2013-09-03 07:35:29 【问题描述】:

什么是要求

我有一个 html/CSS 文档,我想将它加载到另一个 Web 应用程序上并进行修改。

选择使用 iframe,这样父样式就不会泄漏到要编辑的文档中。

做了什么

原始文档保存在 S3 上。 S3 已正确配置为支持 CORS。

当图片或视频标签被放置时带有 crossorigin="anonymous" 属性。发送正确的源头,S3 在响应头中设置 Access-Control-Allow-Origin。

问题

当从同一个 S3 存储桶在 iframe 中加载 html 文档时。由于未设置 CORS 的原始标头,因此我没有在响应标头中获得 Access-Control-Allow-Origin。

所以如果 S3 在请求中没有收到正确的源头,它就不会发送 Access-Control-Allow-Origin。

已尝试解决方案

我对仅适用于现代浏览器的解决方案感到满意。并因此研究了 HTML5 iframe 属性沙盒和无缝。但在这种情况下,它们似乎都没有帮助。

我还尝试通过 xhr2 加载内容,并将内容类型设置为文档并设置正确的原始标题。并将其添加到页面上的 iframe。问题是文档头部的 css 没有被加载。

还有其他解决方案吗?我期待一个可以在 iframe 上设置的属性,但在 w3c 规范中没有这样的属性。

【问题讨论】:

您好,您是如何解决这个问题的? 【参考方案1】:

我认为解决方案是您已经尝试过的解决方案:

通过 AJAX 加载 HTML,将其添加到 iframe 中:

document.open() / document.write() / document.close()

然后将所有相对链接重写为绝对链接

/css/style.css -> <origina-domain>/css/style.css

您需要对所有 CSS、JS、图像等执行此操作。

【讨论】:

以上是关于是否可以为 iframe 设置 Origin Header?的主要内容,如果未能解决你的问题,请参考以下文章

从 JS / jQuery 设置 iframe src 给出 DOMException:cross-origin

我如何确保iFrame的宽高比是否有效?

是否可以为跨域 iframe 的内容设置样式?

是否可以在伪元素之前/之后设置 iframe 样式?

跨域方式

将 iframe 设置为远程内容的内容高度