如何安全地从React组件渲染Markdown？

Question

我想在我的ReactJS应用程序中显示markdown，但重要的是它安全地完成了。我将显示的降价文件是不受信任的公共内容。

我见过各种解决方案，他们都使用危险的SetInnerHTML。

我不禁想到这可能是危险的。

有人有什么想法吗？

感谢

Answer 1

They gave dangerouslySetInnerHTML a scary name very deliberately，以确保人们会仔细考虑非常是否需要使用它/是否正确使用它。看到你正在问这个问题，很明显它完成了这项工作！但Markdown渲染实际上是一个必要的实例。

基本上，它归结为：dangerouslySetInnerHTML只有当你不确定你预先放入的东西是安全的时候才是危险的。小心，但不要被它吓跑！

编辑：正如Waylan在评论中提到的那样，我给出的例子非常幼稚，没有考虑other ways XSS attacks can be achieved through Markdown。您很可能希望通过清理程序而不是/以及输入来运行输出，否则很有可能生成恶意HTML而不会做一些直截了当的事情只需嵌入script标记即可。我的答案的要点仍然是相同的; dangerouslySetInnerHTML只会像你投入的那样危险。做你的研究，确保输入是安全的，你会没事的。

Answer 2

如果输入不受信任（您对此无能为力），则库应在显示输入之前对其进行正确的清理。

我发现了两个似乎可以做到这一点的库：

• react-markdown

  只需确保将escapeHtml选项设置为true。要进行测试，请在demo page上将“ HTML模式”设置为“转义”。

• remarkable

  未经测试，安全性是not“该项目明确规定的目标”。该信息来自2014年，因此可能已更改（自述文件中没有任何信息）。 YMMV。