Markdown sicher als HTML in Vue3 anzeigen
Ich habe also eine Reihe von Zeichenfolgen mit einigen „benutzerdefinierten Abschriften“ erstellt. Meine Absicht ist es, diese Zeichenfolgen im Frontend in HTML zu rendern. Nehmen wir an, ich habe diese Zeichenfolge:
This is a string <color>that I need</color> tonrender <caution>safely in the browser</caution>. This is some trailing text
Ich hatte auf so etwas gehofft:
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
Was ich jetzt mache, ist, einige grundlegende reguläre Ausdrücke zu verwenden:
toHtml = text
.replace(/<color>(.*)</color>/gim, "<span class='primaryColor'></span>")
.replace(/\n/g, "<br>")
.replace(/<caution>(.*)</caution>/gims, "<div class='caution'></div>")
Das funktioniert einwandfrei und gibt die richtige Zeichenfolge zurück. Dann zum Ausdrucken habe ich in der Vorlage einfach:
<div id="container" v-html="result"></div>
Mein Problem ist, dass ich irgendwann möchte, dass der Benutzer diese Zeichenfolgen selbst eingeben kann und dass dies auch anderen Benutzern angezeigt wird. Ich bin also mit Sicherheit anfällig für XSS-Angriffe.
Gibt es Alternativen, um dies zu vermeiden? Ich habe mir https://github.com/Vannsl/vue-3-sanitize angesehen und das scheint das zu sein, was ich verwende div、span 和 br 标签的好方法，并设置所有标签的属性仅允许为 class. Ist das sicher genug? Gibt es noch etwas, was ich tun sollte?
In diesem Fall besteht meiner Meinung nach keine Notwendigkeit, das Backend zu bereinigen, oder? Das heißt, selbst wenn die Zeichenfolge auf dem Server enthält, kann der Webbrowser den Schadcode nicht ausführen, oder?
