Markdown sicher als HTML in Vue3 anzeigen

Question

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?

Answer 1

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

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

因此，通过使用 string.replace() 方法。您可以先替换 ex 的恶意标签。从输入字符串中提取 、 等，然后将其存储在数据库中。

您可以遵循的步骤：

• 创建一个 blacklist 变量，其中包含不允许的字符/字符串的正则表达式。
• 通过使用 string.replace()，根据黑名单正则表达式将字符串中出现的所有可用字符替换为空字符串。
• 将清理后的字符串存储在数据库中。

这样，您就不必担心来自后端的字符串，并且可以通过 v-html 绑定该字符串，而不会造成任何损害。