是否可以为iframe设置Origin Header？

Question

需要什么

我有一个HTML / CSS文档，我想在另一个Webapp上加载并修改。

选择使用iframe，以便没有样式父级泄漏到要编辑的文档中。

做了什么

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

使用crossorigin =“anonymous”属性放置图像或视频标记时。 发送正确的源头，S3在响应头中设置Access-Control-Allow-Origin。

问题

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

因此，如果请求中没有收到正确的源头，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，图像等执行此操作。