Vue 默认对{{ }}插值自动HTML转义防XSS，但v-html会跳过转义，仅限可信内容使用；需配合DOMPurify前端净化或后端过滤+Content-Security-Policy确保安全。
Vue.js 默认会对插值表达式（{{ }}）中的内容进行 HTML 转义，防止 XSS 攻击，但遇到 v-html 等直接渲染 HTML 的场景时，必须手动防御。
默认插值自动转义，无需额外操作
Vue 在双大括号插值中会将变量值作为纯文本处理，所有 HTML 标签字符（如 、<code>>、&）都会被转换为对应实体（、<code>>、&），因此即使数据含恶意脚本也不会执行。
例如：{{ '<script>alert(1)</script>' }} 渲染结果是可见的字符串，而非弹窗。
慎用 v-html，只渲染可信来源内容
v-html 会跳过转义，直接插入原始 HTML，是 XSS 高风险点。仅在以下情况使用：
立即学习“前端免费学习笔记（深入）”；
- 内容完全由开发者静态定义（如组件内写死的说明文案）
- 数据来自受信后端 API，且后端已做过严格过滤（如使用 DOMPurify 处理）
- 用户输入内容经过前端白名单净化（不推荐，应优先由后端处理）
禁止将未处理的用户评论、富文本编辑器输出、URL 参数等直接传给 v-html。
需要动态渲染 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)"。
服务端配合更可靠：统一过滤 + 内容安全策略（CSP）
前端净化只是辅助手段。真正安全需依赖后端：
- 接收富文本时，用服务端库（如 Python 的
bleach、Node.js 的sanitize-html）按白名单过滤 - 设置 HTTP 响应头
Content-Security-Policy，禁用内联脚本和eval，例如：script-src 'self' - 对用户可编辑字段，考虑存储 Markdown 而非 HTML，渲染时再转义生成安全 HTML
