vue.js - V-htmlの代替

Question

私はJSXと反応した背景から来るが、そのいくつかのHTMLを設定する

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

のようなものを使用することはかなり一般的です。私はあなたが、V-HTMLを使用して同じことを達成することができます知っているが、それは私の次のコードを与えそうする最良/最も安全な方法だった場合思っていた：

VUEコンポーネント

<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テンプレート

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

Answer 1

vueプロパティからHTMLをレンダリングできるようにするには、v-htmlを使用する必要があります。ユーザーがHTMLの元になるプロパティを変更できるようにしている場合は、XSSの脆弱性に関するセキュリティ上の問題にぶつかります。この場合、データがXMLに戻されたときに入力をサニタイズする必要がありますサーバー（このために評判の良い外部ライブラリを使用することを強くお勧めします）。ユーザーがデータを変更しない場合は、v-htmlを使用する上での安全上の問題はありません。

ユーザーが任意の種類のデータを変更できるようになると、潜在的なセキュリティ問題が発生します。それらの問題が何であるかを予測し、その問題を回避するだけで済みます。