suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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?

P粉616383625P粉616383625349 Tage vor440

Antworte allen(1)Ich werde antworten

  • P粉323050780

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

    我的问题是，在某些时候我希望用户能够自己输入这些字符串

    那么，我们是否有一个表单输入供用户输入您在帖子中提到的字符串？如果是，我的建议是您可以在传递到后端之前首先清理用户输入。因此后端本身不应存储恶意代码。

    因此，通过使用 string.replace() 方法。您可以先替换 ex 的恶意标签。从输入字符串中提取