Html-react-parser: html-react-parserはXSSを取り除きますか？

素晴らしい質問@ dave-stevens-net！

残念ながらそうではありません。 その理由は、このライブラリを厳密ではなく柔軟にすることを選択したためです。

置換オプションはありますが、考えられるすべての攻撃をチェックするのは多すぎる可能性があります。 私の代わりにとXSSの消毒剤使用することをお勧めしますdangerouslySetInnerHTMLを。

知っておくと良い。 迅速な返答に感謝致します。

いいえ、どいたしまして。 これがあなたの質問@ dave-stevens-netに答える場合、問題を解決できますか？

@ dave-stevens-netこのライブラリがXSSセーフではないことについて、以前に誤解した可能性があります。

ここではdangerouslySetInnerHTMLが信頼されていました。

ただし、XSSの脆弱性を再現できないようです。 この例に基づいた私のフィドルを参照してください。

XSS攻撃を再現するのに運が良ければ、私に知らせてください。

簡単なXSS攻撃を再現することができました。 もっとあるかもしれません。

私のフィドルを確認してください。

私はここでそれを見つけましたhttps://www.in-secure.org/misc/xss/xss.html

最終的に、

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分の1で、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デモを作成しました。