vue.js 默认转义插值内容防xss，但需结合v-html谨慎使用、动态入口点防护及csp策略构成纵深防御。
Vue.js 编译器在模板层面提供了基础但关键的 XSS 防护能力，核心是默认转义所有插值内容。但这只是起点，不是终点——真正的安全依赖编译机制与开发者实践的双重配合。
模板编译阶段自动转义
Vue 在编译模板时，对 {{ }} 插值和 v-bind 绑定的文本内容自动调用 HTML 转义函数（如 escapeHtml），将 、<code>>、&、"、' 等字符替换为对应 HTML 实体。这意味着：
- 即使
userInput是<script>alert(1)</script>，{{ userInput }}渲染结果也是纯文本，不会执行脚本 - 该机制在源码中体现于
compiler-sfc和server-renderer模块，属于构建时/运行时双重保障 - 静态属性值（如
title="xxx"）和动态属性值（如:title="xxx"）均会触发转义逻辑
v-html 与危险属性需显式规避
v-html 是唯一绕过默认转义的官方指令，它直接将字符串解析为 DOM。同理，某些属性值若含危险协议（如 javascript:、data:、vbscript:），Vue 3 会主动过滤，但 Vue 2 不完全覆盖。
- 避免把用户输入、URL 参数、API 返回字段直接传给
v-html - 必须使用时，先通过
DOMPurify.sanitize()或服务端清洗后再绑定 - 检查第三方组件库是否开启 escape 选项（如
vue-tables-2的escape属性）
动态内容入口点常被低估
攻击者很少硬刚 {{ }}，更多瞄准框架提供的“动态能力”边界：
-
<component :is="userInput"></component>：组件名若来自 URL 或表单，可能注入恶意组件或原型链污染 -
$route.params.xxx或$route.query.xxx：未处理就用于v-html或拼接iframe src会触发 DOM 型 XSS - Markdown 渲染器（如
vue-markdown）：默认不 sanitize，需手动启用renderer.sanitize = true或预处理
配合 CSP 构成纵深防御
编译转义解决的是“渲染时注入”，CSP 解决的是“执行时拦截”。二者叠加才能封堵反射型、存储型、DOM 型 XSS 的多数路径：
- 设置
Content-Security-Policy: script-src 'self'; object-src 'none'; base-uri 'self' - 禁用
'unsafe-inline'和'unsafe-eval'，强制内联脚本和eval失效 - 配合非cesium 的 nonce 或 hash 策略，精准控制可信脚本
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
