vue实现xss

Vue 中实现 XSS 防护的方法

Vue 默认会对动态绑定的内容进行 HTML 转义，防止 XSS 攻击。但在某些场景下仍需注意潜在风险。

内置防护机制 Vue 的模板语法（{{ }}）和 v-bind 会自动转义 HTML，将 <、> 等字符转换为实体字符。这是第一道防线。

危险场景处理 当需要动态渲染 HTML 时，使用 v-html 指令会绕过转义。此时必须确保内容来源绝对可信：

<div v-html="userProvidedHtml"></div>

服务端配合 后端应验证和过滤用户输入，返回给前端的数据建议进行 HTML 编码。Vue 与后端协同能更有效防御存储型 XSS。

CSP 增强防护 通过 Content Security Policy 限制外部资源加载，可大幅降低 XSS 影响：

Content-Security-Policy: default-src 'self'

第三方库处理 使用 DOMPurify 等库对 v-html 内容进行净化：

import DOMPurify from 'dompurify'
export default {
  data() {
    return {
      dirtyHtml: '<script>alert(1)</script>'
    }
  },
  computed: {
    cleanHtml() {
      return DOMPurify.sanitize(this.dirtyHtml)
    }
  }
}

URL 校验 对动态绑定的 URL 使用 v-bind:href 时，应验证协议是否合法，避免 javascript: 伪协议：

methods: {
  sanitizeURL(url) {
    if (!url.startsWith('http')) return 'about:blank'
    return url
  }
}

避免拼接模板 不要手动拼接 HTML 字符串或使用 innerHTML，始终优先使用 Vue 的数据绑定机制。