Vue.js模板语法中防止XSS攻击的HTML内容转义安全策略-Vue.js-PHP中文网

Vue 默认对{{ }}插值自动HTML转义防XSS，但v-html会跳过转义，仅限可信内容使用；需配合DOMPurify前端净化或后端过滤+Content-Security-Policy确保安全。

vue.js模板语法中防止xss攻击的html内容转义安全策略

Vue.js 默认会对插值表达式（{{ }}）中的内容进行 HTML 转义，防止 XSS 攻击，但遇到 v-html 等直接渲染 HTML 的场景时，必须手动防御。

默认插值自动转义，无需额外操作

Vue 在双大括号插值中会将变量值作为纯文本处理，所有 HTML 标签字符（如 、>、&）都会被转换为对应实体（、>、&），因此即使数据含恶意脚本也不会执行。

例如：{{ '<script>alert(1)</script>' }} 渲染结果是可见的字符串，而非弹窗。

慎用 v-html，只渲染可信来源内容

v-html 会跳过转义，直接插入原始 HTML，是 XSS 高风险点。仅在以下情况使用：

内容完全由开发者静态定义（如组件内写死的说明文案）
数据来自受信后端 API，且后端已做过严格过滤（如使用 DOMPurify 处理）
用户输入内容经过前端白名单净化（不推荐，应优先由后端处理）

禁止将未处理的用户评论、富文本编辑器输出、URL 参数等直接传给 v-html。

vue-composition-api-best-practices

Vue 3 组合式 API 与最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

需要动态渲染 HTML 时，用 DOMPurify 做前端净化

若必须渲染用户提交的富文本，建议引入 DOMPurify 库，在绑定前清洗 HTML：

示例：

import DOMPurify from 'dompurify';

export default {
  methods: {
    safeHtml(html) {
      return DOMPurify.sanitize(html, {
        ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'p', 'br', 'ul', 'ol', 'li'],
        ALLOWED_ATTR: ['class']
      });
    }
  }
}

模板中使用：v-html="safeHtml(userContent)"。