recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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 ?

P粉616383625P粉616383625322 Il y a quelques jours410

répondre à tous(1)je répondrai

  • P粉323050780

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

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