vue.js - V-HTML替代

Question

我來自一個反應背景JSX，所以使用類似

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

設置一些事情的HTML是很常見的。我知道你可以使用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漏洞相關的安全問題，在這種情況下，您需要在數據發送回服務器（我強烈建議你爲此使用一個有信譽的外部庫）。如果用戶不會修改您的數據，那麼根本就不應該使用v-html。

無論何時您允許用戶修改任何類型的數據，您都會自行解決潛在的安全問題。你只需要預測這些問題是什麼並且解決它們。