Vue模板语法默认对{{}}插值内容自动HTML转义以防范XSS，但v-html指令会绕过该机制，需配合DOMPurify等净化手段及CSP策略构建纵深防御。
Vue 模板语法默认对插值内容做 HTML 实体转义，这是防 XSS 的第一道防线；但它不覆盖所有场景，需结合使用方式、上下文和额外防护措施才能真正守住安全边界。
双花括号 {{ }} 自动转义机制
Vue 在编译模板时，对 {{ }} 中的表达式结果自动调用转义函数，把 <、>、&、"、' 等字符替换成对应 HTML 实体。例如：
-
{{ '<script>alert(1)</script>' }}渲染为纯文本<script>alert(1)</script>，不会执行脚本 - 静态文本（如
{{ 'Hello <b>World</b>' }}）和动态表达式（如{{ user.input }}）都受此保护 - 该逻辑在编译阶段注入，也作用于服务端渲染（SSR）环境
v-html 是唯一绕过转义的官方指令
v-html 直接将字符串解析为 DOM，完全跳过 Vue 的转义流程，因此风险极高：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 禁止将 URL 参数、表单输入、API 返回的富文本字段直接传给
v-html - 必须使用时，优先用
DOMPurify.sanitize()做预处理，例如：computed: { safeHtml() { return DOMPurify.sanitize(this.raw) } } - 检查第三方组件（如 markdown 渲染器）是否启用
sanitize选项，默认往往关闭
属性绑定中的隐性风险点
v-bind 对普通属性（如 :title、:class）会转义，但对某些协议型属性无效：
立即学习“前端免费学习笔记（深入）”；
-
:href="userUrl"若值为javascript:alert(1)，Vue 3 会主动过滤，Vue 2 则可能放行 -
:src绑定 iframe 或图片时，若来自$route.query.src，未校验就直接使用，易触发 DOM 型 XSS -
:is动态组件名（如<component :is="userInput"></component>）可能被用于原型链污染或加载恶意组件
配合 CSP 构成纵深防御
仅靠模板转义无法拦截已注入的脚本执行，必须叠加浏览器级策略：
- 服务端设置响应头：
Content-Security-Policy: script-src 'self'; object-src 'none'; base-uri 'self' - 禁用
'unsafe-inline'和'unsafe-eval'，防止内联事件和eval执行 - 对可信脚本使用
nonce或hash白名单，而非宽泛允许
