Vue 模板语法怎么在富文本展示时防止脚本注入攻击

老敏君_4241

老敏君_4241

2026-10-18

121人浏览

原创

vue模板语法默认转义确保安全,v-html需配合dompurify净化、服务端双重过滤及csp策略防御xss。

vue 模板语法怎么在富文本展示时防止脚本注入攻击

Vue 模板语法本身不支持直接执行脚本,但富文本展示常绕过默认防护——关键在于避免把未经净化的 HTML 交给 v-html。双花括号 {{ }} 和 v-text 会自动转义,安全但无法渲染格式;而 v-html 虽能展示加粗、链接等效果,却会原样插入 DOM,一旦内容含 <script></script>、onerror、javascript: 等,就可能触发 XSS。

优先用 {{ }} 或 v-text 渲染纯文本内容

如果业务允许只显示文字(比如评论摘要、通知简述),就别碰 v-html。Vue 的插值语法默认对 、<code>>、& 做 HTML 实体转义,攻击者输入 <img src="x" onerror="alert(1)"> 也会被当作文本显示,不会执行。

必须用 v-html 时,强制走 DOMPurify 净化

不要自己写正则过滤,容易漏掉变种 payload。推荐使用 DOMPurify,它基于白名单机制,只保留你明确允许的标签和属性:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.1万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习