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

Question

4

我有一个页面+JavaScript，可以将用户的SVG文件读入HTML 的数据中，然后使用JavaScript修改SVG的DOM。

编辑：用户使用类型为“file”的输入字段从其自己的文件系统中选择文件。

这在Firefox中运行良好，但Edge和Chrome都会引用单一来源策略（据我所知，Chrome会输出

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

而Edge则拒绝读取对象数据）。

如果我足够理解单一来源策略和涉及的风险，则Edge和Chrome拒绝与加载的SVG一起玩耍是合法的。首先，我是否错了？

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

我正在寻找“正确”的方法来解决这个问题：对我的网站安全，对用户安全等等。

谢谢

类似的问题：

如果我应该对这些问题做出某些操作而不是再次提问，我很抱歉。我希望通过使用更现代的技术找到解决方案。

- eff

你尝试过直接在HTML中使用<svg>并将文件放在其中吗？ - Walle Cyril

不，这是不安全的，这就是为什么浏览器会试图阻止你这样做的原因。然而，有些人会不惜一切代价来自我毁灭。 - Robert Longson

@Walle Cyril：令人惊讶的是，这个方法可行（或许可以将其作为答案？）。谢谢！可能是因为我采用了一种非常糟糕的方式来实现它：我加载文件的文本，并将此文本添加到一个div的innerHTML中。我并不惊讶这种方式可以规避安全措施！相当可怕。 - eff

@Robert Longson：考虑到JavaScript是客户端的，而且要加载他们的SVG（我假设他们不会试图攻击自己），那么什么是不安全的？感谢您的回答。 - eff

我不清楚这些SVG文件的来源。 - Robert Longson

@RobertLongson：已编辑。用户从自己的文件系统中选择文件。抱歉没有表达清楚。这会影响您的意见吗？ - eff

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Walle Cyril · Accepted Answer

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

由于用户上传自己的文件，因此不应存在风险。

仍然应该验证svg文件是否确实是有效的svg文件，没有onload、<script>等内容。可以在不执行它的情况下验证svg文件。使用白名单策略，在使用innerHTML之前进行验证。(因为用户可能已经从攻击者那里通过消息收到了恶意的svg文件)永远不要信任用户输入。