vue模板默认转义插值内容防xss，{{}}渲染纯文本；v-html需净化不可信html；v-bind自动转义属性值；禁用动态模板编译以防rce。
Vue 模板默认对插值内容自动转义，这是防范 XSS 的第一道防线。只要不主动绕过它，绝大多数用户输入都能被安全渲染为纯文本。
双大括号插值天然防 XSS
使用 {{ }} 插值时，Vue 会把变量值当作纯文本处理，内部调用浏览器原生的 textContent 设置 DOM 内容。即使变量是 '<script>alert(1)</script>'，最终也只显示为一串可见字符，不会执行脚本。
- 适用于所有普通文本展示场景，比如用户名、评论、标题等
- 不支持 HTML 解析，也不需要额外配置，开箱即用
- 性能好、语义清晰，应作为文本渲染的首选方式
v-html 是唯一需谨慎使用的“出口”
v-html 直接设置元素的 innerHTML，完全跳过 Vue 的转义机制。它本身没有错，但一旦绑定不可信内容，XSS 就几乎必然发生。
- 绝对不要绑定原始用户输入，如表单提交的富文本字段
- 如确需渲染 HTML（例如后台编辑器输出），必须先净化：前端可用 DOMPurify 限定标签和属性，后端更应按白名单过滤（如 Python 的 bleach）
- 配合 CSP 响应头（如
script-src 'self'）可进一步限制内联脚本执行
动态 attribute 绑定同样受保护
用 v-bind:title="userInput" 或简写 :title="userInput" 时，Vue 会调用 setAttribute 设置属性值，自动对引号、等号等特殊字符做转义。
- 即使
userInput是" onclick=alert(1)，最终生成的是安全的属性值，无法触发事件 - 该机制覆盖所有标准 HTML 属性，包括
class、style、data-*等 - 注意：
:style推荐用对象语法（如{ color: userColor }），避免字符串拼接带来的注入风险
真正危险的是动态模板编译
Vue 允许运行时用 compile() 或 new Function() 动态生成模板，若模板字符串来自用户输入，等于直接在客户端执行任意 JavaScript。
- 服务端渲染（SSR）中尤其致命，可能造成远程代码执行（RCE）
- 所有模板内容必须由开发者完全控制，禁止拼接用户数据进模板字符串
- 国际化文案、配置化页面等场景，应通过数据驱动而非字符串模板实现
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
