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就不会有任何安全问题。

每当您允许用户修改任何类型的数据时，您都会遇到潜在的安全问题。您只需要预测这些问题是什么，并解决它们。

vue.js - v-html替代

1 个答案: