Html-react-parser: html-react-parser 会去除 XSS 吗？

好问题@dave-stevens-net！

不幸的是它没有。 原因是我选择让这个库变得灵活而不是严格。

虽然有替换选项，但检查所有可能的攻击可能太多了。 我建议，而不是使用XSS消毒与dangerouslySetInnerHTML 。

很高兴知道。 感谢您及时的回复。

不客气。 如果这回答了您的问题@dave-stevens-net，问题可以解决吗？

@dave-stevens-net 我之前可能误解了这个库不是 XSS 安全的。

我最初认为这个库不是 XSS 安全的，因为这里依赖dangerouslySetInnerHTML 。

但是，我似乎无法重现任何 XSS 漏洞。 请参阅我的小提琴，它基于此示例。

如果您有幸重现 XSS 攻击，请告诉我。

我设法重现了一个简单的 XSS 攻击。 可能还有更多。

检查我的小提琴。

我在这里找到它https://www.in-secure.org/misc/xss/xss.html

我最终使用sanitize-html包依赖项编写了一个 Sanitize 组件。

import React from 'react'
import sanitizeHtml from 'sanitize-html'

const Sanitize = ({ html }) => {
    const clean = sanitizeHtml(html, {
        allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'span']),
        allowedAttributes: {
           ...
        },
    })
    return (
        <span
            className="sanitized-html"
            dangerouslySetInnerHTML={{ __html: clean }}
        />
    )
}
export default Sanitize

用法示例：

<Sanitize html={data.wordpressPage.title} />

@harveydf很棒的发现！ 感谢您创建和分享小提琴。

我将更新README.md以注意该库不是 XSS 安全的。

我不想使用 sanitize-html，因为它很大。 我改用了 dompurify，它小了 10 倍，并且不会删除 CSS。

import parse, { domToReact } from 'html-react-parser'
import DOMPurify from 'dompurify'
import React from 'react'

// export function replaceNode() {}

export default function html(html, opts = {}) {
  return parse(DOMPurify.sanitize(html), {
    ...{
      replace: replaceNode,
    },
    ...opts,
  })
}

html('<iframe src=javascript:alert("xss")></iframe>')

感谢您使用dompurify @k1sul1 分享您的方法！

我根据您的示例创建了一个Repl.it演示。