如何让网页安全地修改用户的 svg 文件？答案

【问题标题】：How to allow webpage to modify user's svg file, safely?如何让网页安全地修改用户的 svg 文件？
【发布时间】：2018-04-13 02:01:26
【问题描述】：

我有一个页面 + javascript，它将用户 SVG 文件读入 HTML

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

这一切都在 Firefox 中运行良好，但边缘和 chrome 都引用了单源策略（据我了解，chrome 吐出

阻止源为“null”的框架访问跨域框架。

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

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

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

我正在寻找“正确”的方式来做到这一点：对我的网站安全、对用户安全等。

谢谢

类似问题：

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

【问题讨论】：

您是否尝试过在 HTML 中直接使用 <svg> 并将文件放入其中？
不，这不安全，这就是浏览器试图阻止您这样做的原因。不过，有些人会不遗余力地打断自己的脚。
@Walle Cyril：令人惊讶的是，这行得通（也许添加这个作为答案？）。谢谢！这可能是因为我设法做到这一点的可怕的hacky方式：我加载文件的文本并将此文本添加到div的innerHTML。我对这绕过安全措施并不感到惊讶！太可怕了。
@Robert Longson：鉴于 javascript 是客户端，并且要加载的是他们的 svg（我假设他们没有试图破解自己），什么不安全？感谢您的意见。
我不清楚 svg 文件的来源。

【解决方案1】：

直接在 HTML 中使用 <svg> 并将文件放入其中。

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

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

【讨论】：

如上所述，这是功能性的。我还没有接受它作为答案，因为有这两个箍要跳过以使其安全（检查它只是我嵌入的一个 svg，并检查 svg 不包含恶意脚本或调用），两者我可以很容易地把它们塞满！
没有人想出更安全的方法，所以我只能假设这是最好的方法。谢谢！