vue.js - v-html 替代品

Question

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

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

設置一些東西的 html 是很常見的。 我知道您可以使用 v-html 實現相同的目的，但想知道根據我的以下代碼，這是否是最好/最安全的方法：

組件

<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就完全沒有安全問題。

每當您允許用戶修改任何類型的數據時，您就會面臨潛在的安全問題。 您只需要預測這些問題是什么並解決它們。

---

2021 年 6 月更新

澄清一點，如果您不需要動態 HTML 渲染，而只需要處理渲染某些預定 HTML 模板的條件情況，那么您可以簡單地在 Vue 模板中包含條件渲染。 一個示例可能如下所示：

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

      }
  }
</script>

<article>
    <div v-for="guide in guides">
        <h4>{{ guide.title }}</h4>
        <div v-if="guide.as_list">
            <ul>
                <li>{{guide.description}}</li>
            </ul>
        </div>
        <div v-else>{{guide.description}}</div>
    </div>
</article>

簡而言之，如果您不需要動態HTML 呈現而只需要條件HTML 呈現，則在適用的情況下使用v-if並構建您的數據以允許條件呈現正常運行。 否則使用v-html ，甚至可能使用結構 JSON 數據使用<component :is="component.name">遞歸生成預定義組件（這相當復雜，所以我不會在這個答案中詳細介紹）。