为什么我无法跨站点和跨框架获取对象 URL（又名“blob URL”）？

Question

我正在开发一个 iframeable 组件，现在偶然发现了一些看起来像是安全问题的问题。

我有两个网站：

• 站点 A，运行在 http://localhost:3002
• 站点 B，运行在 http://localhost:3000

站点 A 将站点 B 嵌入到 IFrame 中。站点 B 需要使用数据，而这些数据应该由站点 A 提供。但是，目前站点 B 只通过 URL 接受数据，并且由于原始 URL 可能需要身份验证，因此数据由站点 A 获取，并转换为对象 URL （与URL.createObjectURL）然后通过 提供给站点postMessageB。站点 B 现在应该从该 URL 获取数据并使用它。

然而，站点 B 获取对象 URL 被浏览器阻止：

• 铬合金：Not allowed to load local resource: blob:http://localhost:3002/<UUID>
• 火狐浏览器：Security Error: Content at http://localhost:3000/... may not load data from blob:http://localhost:3002/<UUID>

据我所知，这些消息与 CSP 或 CORS 没有关联。但是，我无法理解问题是什么以及它是否可以修复 - 我一直认为对象 URL 目前不存在任何跨站点问题，这正是使用它们的原因。

那么为什么会发生这种情况以及我能做什么呢？

Answer 1

请参阅https://github.com/w3c/FileAPI/issues/135及其中的参考文献。实践中存在同源限制，但这尚未反映在规范中。我们不太可能删除该限制，因为blob:URL 很容易造成内存泄漏。（事实上​​，我们想对它们施加更多限制：https://github.com/w3c/FileAPI/issues/153。）

如果您有postMessage()API，则需要扩展它，从而发送 URL 或对象消息。向实例本身发送消息Blob应该可以工作。