Html-react-parser: Apakah html-react-parser menghapus XSS?

Pertanyaan bagus @dave-stevens-net!

Sayangnya tidak. Alasannya karena saya memilih untuk membuat perpustakaan ini fleksibel daripada ketat.

Meskipun ada opsi ganti , memeriksa semua kemungkinan serangan mungkin terlalu banyak. Saya sarankan sebagai gantinya menggunakan pembersih XSS dengan HazardlySetInnerHTML .

Senang mendengarnya. Terima kasih atas respon cepatnya.

Anda sangat dipersilakan. Jika ini menjawab pertanyaan Anda @dave-stevens-net, dapatkah masalah ditutup?

@dave-stevens-net Saya mungkin salah bicara sebelumnya tentang perpustakaan ini tidak aman untuk XSS.

Saya awalnya mengira perpustakaan ini tidak aman untuk XSS karena dangerouslySetInnerHTML diandalkan di sini .

Namun, sepertinya saya tidak dapat mereproduksi kerentanan XSS apa pun. Lihat biola saya , yang didasarkan pada contoh ini .

Beri tahu saya jika Anda beruntung dalam mereproduksi serangan XSS.

Saya berhasil mereproduksi serangan XSS sederhana. Mungkin ada lebih banyak.

Periksa biola saya.

Saya menemukannya di sini https://www.in-secure.org/misc/xss/xss.html

Saya akhirnya mengkodekan komponen Sanitize menggunakan dependensi paket sanitize-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

Contoh penggunaan:

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

@harveydf Temuan yang bagus ! Terima kasih telah membuat dan berbagi biola.

Saya akan memperbarui README.md untuk mencatat bahwa perpustakaan ini tidak aman untuk XSS.

Saya tidak ingin menggunakan sanitize-html, karena file . Saya menggunakan dompurify sebagai gantinya, ini 10 kali lebih kecil, dan tidak menghapus 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>')

Terima kasih telah berbagi pendekatan Anda menggunakan dompurify @k1sul1!

Saya membuat demo Repl.it berdasarkan contoh Anda.