Afficher en toute sécurité Markdown au format HTML dans Vue3

Question

J'ai donc un ensemble de chaînes avec des « démarques personnalisées » que j'ai créées. Mon intention est de restituer ces chaînes au format HTML sur le front-end. Disons que j'ai cette chaîne :

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

J'espérais quelque chose comme ça :

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

Ce que je fais maintenant, c'est utiliser quelques expressions régulières de base :

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

Cela fonctionne bien et renvoie la bonne chaîne. Puis pour imprimer, dans le modèle je viens de :

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

Mon problème est qu'à un moment donné, je veux que l'utilisateur puisse saisir lui-même ces chaînes et qu'elles soient également affichées aux autres utilisateurs. Donc, c'est sûr, je suis vulnérable aux attaques XSS.

Existe-t-il des alternatives pour éviter cela ? J'ai regardé https://github.com/Vannsl/vue-3-sanitize et cela semble être ce que j'utilise div、span 和 br 标签的好方法，并设置所有标签的属性仅允许为 class. Est-ce suffisamment sûr ? Y a-t-il autre chose que je devrais faire ?

Dans ce cas, je pense qu'il n'est pas nécessaire de le nettoyer sur le backend, n'est-ce pas ? Autrement dit, même si la chaîne du serveur contient , le navigateur Web ne peut pas exécuter le code malveillant, n'est-ce pas ?

Answer 1

Mon problème est qu'à un moment donné, je veux que l'utilisateur puisse saisir lui-même ces chaînes

Alors, avons-nous un formulaire de saisie permettant à l'utilisateur de saisir la chaîne que vous avez mentionnée dans votre message ? Si oui, ma suggestion est que vous puissiez d'abord nettoyer l'entrée de l'utilisateur avant de la transmettre au backend. Par conséquent, le backend lui-même ne doit pas stocker de code malveillant.

Donc en utilisant string.replace() 方法。您可以先替换 ex 的恶意标签。从输入字符串中提取 、 etc. puis en le stockant dans la base de données.

Étapes que vous pouvez suivre :

• Créez une variable blacklist contenant une expression régulière de caractères/chaînes non autorisés.
• Remplacez tous les caractères disponibles apparaissant dans une chaîne par une chaîne vide basée sur une expression régulière de liste noire en utilisant string.replace().
• Stockez la chaîne nettoyée dans la base de données.

De cette façon, vous n'avez pas à vous soucier de la chaîne provenant du backend et pouvez la lier via v-html sans causer de dommages.