是否可以为 iframe 设置 Origin Header？

Question

什么是要求

我有一个 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 规范中没有这样的属性。

Answer 1

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

通过 AJAX 加载 HTML，将其添加到 iframe 中：

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

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

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

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