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">递归生成预定义组件（这相当复杂，所以我不会在这个答案中详细介绍）。