是否可以为 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?的主要内容,如果未能解决你的问题,请参考以下文章