vue安全核心是守住两条底线：不执行不可信模板、不绕过默认防护；严禁拼接用户输入为template，避免v-html滥用，动态attribute需过滤特殊字符，props和路由参数须校验。
编写安全的 Vue 组件逻辑，核心不是堆砌防御手段，而是守住两条底线：不执行不可信模板、不绕过默认防护机制。Vue 本身已做了大量基础防护，真正风险往往来自开发者主动“破防”的操作。
绝不拼接不可信内容作为 template
这是 Vue 安全的第一铁律。模板字符串一旦混入用户输入，就等于把 JS 执行权直接交给对方。
- 错误写法：
template: `<div>` + userContent + `</div>`—— 服务端渲染时可能直接执行恶意代码，导致 RCE（远程代码执行） - 正确做法：所有模板内容必须是静态声明或由你完全控制的常量/配置项；动态部分只通过 {{ }} 插值或 v-bind 绑定传入
- 补充提醒：即使使用
defineComponent或组合式 API，也不能在template选项中做字符串拼接
谨慎使用 v-html 和 innerHTML 操作
Vue 对 {{ }} 内容自动 HTML 转义，但 v-html 会跳过这层保护，直接渲染为 DOM。
- 除非业务强依赖富文本展示（如后台编辑器预览），否则一律避免使用
v-html - 若必须使用，务必前置清洗：用 DOMPurify.sanitize() 处理原始 HTML，仅允许白名单标签（如
p、strong、ul）和属性（如class） - 禁止将
v-html绑定到未处理的response.data、localStorage值或 URL 参数上
绑定 attribute 也要防注入
动态绑定 class、style、title、data-* 等属性时，Vue 会自动转义，但仍有边界情况需注意。
- 危险示例：
:title="`Hello ${userInput}`"中若userInput为"\" onclick=alert(1)"，可能触发事件 - 安全做法：对用于 attribute 的变量做最小化处理，例如用
String(userInput).replace(/["'`]/g, '')过滤特殊字符 - 更推荐方式：用计算属性封装校验逻辑，或改用
data-属性配合 CSS 自定义属性替代内联样式绑定
组件通信与状态管理中的敏感点
父子通信、全局状态、路由参数都可能成为攻击入口。
-
props 接收外部数据时，必须设
type、required或default，并添加validator校验格式（如邮箱正则、ID 长度） - 从
$route.query或$route.params获取的值，视同用户输入，不可直接拼进模板或 eval 类逻辑 - Vuex/Pinia 中避免存敏感字段（如 token、密码明文）；若需缓存登录态，优先用
httpOnly cookie，前端仅存必要标识
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
