画布、iframe 和 Access-Control-Allow-Origin

【问题标题】：Canvas, iframe and Access-Control-Allow-Origin画布、iframe 和 Access-Control-Allow-Origin
【发布时间】：2013-08-17 04:29:23
【问题描述】：

我对这个问题感到很疯狂，希望有解决方案或解决方法。我在 iframe 中有一个画布，位于不同的域中（出于安全原因）。此画布显示 Processing.js 动画/绘图。我需要允许画布加载位于同一域中的图像文件。

index.html 和 iframe 位于 domain.com

index.html 和 canvas 位于 sub.domain.com

现在我确定：

画布可以加载/可视化远程图像，但无法访问远程图像数据（像素）。
画布可以完全访问同一域中的图像文件，除非它在 iframe (!?) 中播放。
设置 Access-Control-Allow-Origin 标头只允许访问其他域上的文件。
画布根本不支持/考虑 Access-Control-Allow-Origin 标头。

有没有办法绕过所有这些安全限制，只需在 iframe 中播放画布来加载图像文件？

【问题讨论】：

标签： http iframe canvas processing.js cross-domain-policy

【解决方案1】：

我找到了解决问题的方法（并且看到没有人回答）。实际上我忘记了一些事情......我在iframe 标签中使用了sandbox 属性，这就是问题所在。一旦删除，图像就可以在画布中访问了，至少在 Firefox 和 Chrome 中（还没有测试 IE）。反正sandbox属性支持还是很差的，在跨域场景下可能完全没用。

所以。我可以确认使用普通的iframe（没有任何sandbox 参数）在iframe 中将图像加载到canvas 时没有问题，当且仅当图像在canvas 页面的同一域。

【讨论】：

我有同样的问题，但我必须保留sandbox 属性。有没有办法强制 Canvas 在sub.domain.com 上下文中工作？看起来 iframe/sandbox 中的 Canvas 认为它位于顶级文档 www.domain.com 上下文中。有人解决了吗？现在是 2019 年，FF 和 Chrome 的行为是一致的，所以我认为这是故意的，而不是错误。