vue.js - v-html Alternative

Question

ich von einem reagieren Hintergrund kommen mit JSX, so etwas mit wie

var test = <div>i am a div</div>

die html einige Dinge zu setzen, ist sehr verbreitet. Ich weiß, Sie können die gleiche Sache mit v-html erreichen, aber frage mich, ob es die beste/sicherste Weg war so gegeben werden meine folgenden Code:

vue Komponente

<template src="./templates/General.html"></template> 

<script> 
    export default { 
     name: 'guide-general', 
     data: function() { 
      return { 
       guides: [ 
        { 
         title: "first", 
         description: "First description" 
        }, 
        { 
         title: "second", 
         description: "second description" 
        }, 
        { 
         title: "third", 
         description: `<ul> 
         <li> 
          test 
         </li> 
         </ul>` 
        } 
       ] 
      } 
     }, 
     methods: { 

     } 
    } 
</script> 

<style scoped> 
</style> 

html template

<article> 
    <div v-for="guide in guides"> 
     <h4>{{ guide.title }}</h4> 
     <div v-html="guide.description"> 
     </div> 
    </div> 
</article> 

Answer 1

Wenn Sie möchten, dass HTML aus einer Vue-Eigenschaft gerendert werden kann, müssen Sie v-html verwenden. Wenn Sie zulassen, dass Benutzer die Eigenschaft ändern, aus der der HTML-Code stammen könnte, werden Sie auf Sicherheitsbedenken mit XSS-Sicherheitslücken stoßen. In diesem Fall müssen Sie Ihre Eingaben bereinigen, wenn die Daten zurück an den Server gesendet werden Server (Ich empfehle Ihnen, eine seriöse externe Bibliothek dafür zu verwenden). Wenn Benutzer Ihre Daten nicht ändern, sollten keine Sicherheitsbedenken bei der Verwendung von v-html bestehen.

Wenn Sie Benutzern erlauben, Daten jeglicher Art zu ändern, öffnen Sie sich für mögliche Sicherheitsprobleme. Sie müssen nur vorhersehen, was diese Probleme sind und umgehen.