Vue的安全性：防范XSS攻击与安全最佳实践

<template>
  <div v-html="safeHtml"></div>
</template>
 
<script>
export default {
  data() {
    return {
      userContent: '这是用户输入的内容: <script>dangerousCode()</script>'
    };
  },
  computed: {
    safeHtml() {
      return this.sanitize(this.userContent);
    }
  },
  methods: {
    sanitize(html) {
      // 使用DOMParse和serializeFeature实现一个简单的清理函数
      const doc = new DOMParser().parseFromString(html, 'text/html');
      return new XMLSerializer().serializeToString(doc.body);
    }
  }
};
</script>

这个例子中，我们使用了一个计算属性safeHtml来对用户输入的内容进行了清理，防止XSS攻击。这里的sanitize方法通过DOMParse和XMLSerializer来序列化和反序列化DOM，从而移除任何潜在的危险脚本。这是一个简化的例子，实际应用中可能需要更复杂的过滤逻辑来确保安全性。