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

Question

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

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

我不禁想到这可能很危险。

任何人有任何想法？

谢谢

Answer 1

他们非常刻意地给dangerouslySetInnerHTML的SetInnerHTML起了一个可怕的名字，以确保人们会非常仔细地考虑他们是否需要使用它/他们是否正确使用它。 看到你问这个问题，显然它做得很好！ 但 Markdown 渲染实际上是一种必要的情况。

基本上，它归结为：只有当您事先没有确保放入其中的内容是安全的时， dangerouslySetInnerHTML才是危险的。 要小心，但不要被它吓跑！

编辑：正如 Waylan 在评论中提到的，我给出的例子非常幼稚，没有考虑到XSS 攻击可以通过 Markdown 实现的其他方式。 您很可能希望通过 sanitizer 而不是/以及输入来运行输出，否则很可能会生成恶意 HTML，而无需执行像嵌入script标签那样简单的操作。 不过，我的回答的要点保持不变； dangerouslySetInnerHTML只和你放入的东西一样危险。 做你的研究，确保输入是安全的，你会没事的。

Answer 2

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

我发现了两个似乎这样做的库：

• 反应降价

  只需确保escapeHtml选项设置为true 。 要进行测试，请在演示页面上将“HTML 模式”设置为“Escape”。

• 了不起

  没有对其进行测试，并且安全性不是“该项目明确规定的目标”。 该信息来自 2014 年，因此可能已更改（自述文件中没有信息）。 天啊。