security - 为什么 React.js 的 API 会警告不要插入原始 HTML？

Question

来自tutorial

But there's a problem! Our rendered comments look like this in the browser: "<p>This is <em>another</em> comment</p>". We want those tags to actually render as HTML.

That's React protecting you from an XSS attack. There's a way to get around it but the framework warns you not to use it:

...

<span dangerouslySetInnerHTML={{__html: rawMarkup}} />

This is a special API that intentionally makes it difficult to insert raw HTML, but for Showdown we'll take advantage of this backdoor.

Remember: by using this feature you're relying on Showdown to be secure.

所以存在一个用于插入原始 HTML 的 API，但是方法名称和文档都警告不要这样做。使用这个安全吗？例如，我有一个聊天应用程序，它接受 Markdown 评论并将它们转换为 HTML 字符串。 HTML 片段由 Markdown 转换器在服务器上生成。我信任转换器，但我不确定用户是否可以通过精心制作 Markdown 来利用 XSS。我还应该做些什么来确保这是安全的吗？

Answer 1

大多数 Markdown 处理器(我相信 Showdown 也是如此)允许作者使用内联 HTML。例如，用户可能会输入:

This is _markdown_ with a <marquee>ghost from the past</marquee>. Or even **worse**:
<script>
  alert("spam");
</script>

因此，您应该有一个标签白名单，并在从 markdown 转换为 html 后去除所有其他标签。然后才使用恰当命名的 dangerouslySetInnerHTML。

请注意，这也是 Stackoverflow 所做的。上面的 Markdown 呈现如下(你不会收到警告):

This is markdown with a ghost from the past. Or even worse:

alert("spam");