javascript - 如何允许网页安全地修改用户的 svg 文件？

Question

我有一个页面 + javascript，它将用户 SVG 文件读取到 HTML < object > 的数据中，然后使用 javascript 修改 SVG 的 DOM。

编辑:用户使用文件类型的输入字段从他们自己的文件系统中选择一个文件。

这一切在 firefox 中运行良好，但 edge 和 chrome 都以单一来源政策为由拒绝(据我所知，chrome 吐出

Blocked a frame with origin "null" from accessing a cross-origin frame.

而边缘只是拒绝读取对象数据)。

如果我足够了解单源政策以及所涉及的风险，edge 和 chrome 拒绝使用已加载的 SVG 是合法的。首先，我错了吗？

其次，我该如何解决这个问题？有办法吗？让用户将 SVG 上传到服务器然后加载它(以便它与我的页面共享原点)是否可行 - 如果是这样，这安全吗？

我正在寻找执行此操作的“正确”方法:对我的网站安全、对用户安全等。

谢谢

---

类似问题:

• Modify object data at runtime in Chrome without SOP - 无人接听
• How to access id's of externally loaded svg file? - 没有有效的答案
• Circumventing Chrome Access-control-allow-origin on the local file system? - 对于在本地主机上提供的页面

如果我应该对这些问题做点什么而不是再问一次，我深表歉意。我希望通过更多最新技术可以找到解决方案。

Answer 1

使用 <svg>直接在 HTML 中将文件放在那里。

因为用户上传自己的文件，应该没有风险。

您仍然应该验证 svg 文件是否确实是没有 onload 的有效 svg 文件，<script>等里面。可以在不执行 svg 的情况下验证它。使用白名单策略并在使用 innerHTML 之前执行此操作. (因为用户可能已经收到来自攻击者的每条消息的恶意 svg 文件)。永远不要相信用户输入。