cari

Rumah  >  Soal Jawab  >  teks badan

Paparkan Markdown dengan selamat sebagai HTML dalam Vue3

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 divspanbr 标签的好方法,并设置所有标签的属性仅允许为 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?

P粉616383625P粉616383625322 hari yang lalu408

membalas semua(1)saya akan balas

  • P粉323050780

    P粉3230507802024-01-11 11:39:21

    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 的恶意标签。从输入字符串中提取