Paparkan Markdown dengan selamat sebagai HTML dalam Vue3

Question

Jadi saya mempunyai satu set rentetan dengan beberapa "penurunan harga tersuai" yang saya buat. Niat saya adalah untuk menjadikan rentetan ini kepada HTML di bahagian hadapan. Katakan saya mempunyai rentetan ini:

This is a string <color>that I need</color> tonrender <caution>safely in the browser</caution>. This is some trailing text

Saya mengharapkan sesuatu seperti ini:

This is a string <span class="primaryColor">that I need</span> to<br>render <div class="caution">safely in the browser</div>. This is some trailing text

Apa yang saya lakukan sekarang ialah menggunakan beberapa ungkapan biasa asas:

toHtml = text
    .replace(/<color>(.*)</color>/gim, "<span class='primaryColor'></span>")
    .replace(/\n/g, "<br>")
    .replace(/<caution>(.*)</caution>/gims, "<div class='caution'></div>")

Ini berfungsi dengan baik dan mengembalikan rentetan yang betul. Kemudian untuk mencetak, dalam templat saya hanya:

<div id="container" v-html="result"></div>

Masalah saya ialah pada satu ketika saya mahu pengguna boleh memasukkan rentetan ini sendiri dan memaparkan ini kepada pengguna lain juga. Jadi pastinya saya terdedah kepada serangan XSS.

Adakah terdapat sebarang alternatif untuk mengelakkan perkara ini? Saya telah melihat https://github.com/Vannsl/vue-3-sanitize dan ini kelihatan seperti yang saya gunakan div、span 和 br 标签的好方法，并设置所有标签的属性仅允许为 class. Adakah ini cukup selamat? Adakah terdapat apa-apa lagi yang perlu saya lakukan?

Dalam kes ini, saya percaya tidak perlu membersihkannya di bahagian belakang, bukan? Iaitu, walaupun rentetan dalam pelayan mengandungi , pelayar web tidak boleh melaksanakan kod berniat jahat, bukan?

Answer 1

Masalah saya ialah pada satu ketika saya mahu pengguna boleh memasukkan rentetan ini sendiri

Jadi, adakah kami mempunyai input borang untuk pengguna memasukkan rentetan yang anda nyatakan dalam siaran anda? Jika ya, cadangan saya ialah anda boleh membersihkan input pengguna terlebih dahulu sebelum menghantarnya ke bahagian belakang. Oleh itu bahagian belakang itu sendiri tidak seharusnya menyimpan kod berniat jahat.

Jadi dengan menggunakan string.replace() 方法。您可以先替换 ex 的恶意标签。从输入字符串中提取 、 dan lain-lain dan kemudian menyimpannya dalam pangkalan data.

Langkah yang boleh anda ikuti:

• Buat pembolehubah blacklist yang mengandungi ungkapan biasa aksara/rentetan yang tidak dibenarkan.
• Ganti semua aksara tersedia yang berlaku dalam rentetan dengan rentetan kosong berdasarkan ungkapan biasa senarai hitam dengan menggunakan string.replace().
• Simpan rentetan yang telah dibersihkan dalam pangkalan data.

Dengan cara ini anda tidak perlu risau tentang rentetan yang datang dari bahagian belakang dan boleh mengikatnya melalui v-html tanpa menyebabkan sebarang bahaya.