uni-app中如何防止过滤器被恶意脚本XSS注入

陌敏同学_9254

陌敏同学_9254

2026-09-30

423人浏览

原创

uni-app中不存在vue 2风格的vue.filter机制,因此“过滤器被xss注入”前提不成立;真正风险在于v-html等场景未净化渲染,应统一在响应拦截器中调用dompurify白名单净化。

uni-app中如何防止过滤器被恶意脚本xss注入

uni-app 里根本不存在 Vue 2 风格的 Vue.filter 过滤器机制,所以“过滤器被 XSS 注入”这个前提不成立——它压根不会执行用户输入的 JS,也不会动态编译模板字符串。真正危险的是你误以为用了“过滤器”就安全了,结果在 v-html 或 innerHTML 场景下直接渲染未净化的内容。

uni-app 中没有 Vue.filter,别被术语带偏

很多人搜“uni-app 过滤器 XSS”,其实是混淆了概念:filter 在 uni-app(尤其是 Vue 3 项目)中默认指向 CSS 的 filter 属性(比如 filter: grayscale(1)),和数据处理完全无关。Vue 2 的全局过滤器 API Vue.filter 已被 Vue 3 移除,uni-app 基于 Vue 3 构建,不支持该写法。你在 main.js 里写 Vue.filter('xss', ...) 不会生效,也起不到任何防护作用。

常见错误现象:

  • 在 main.js 中注册了 Vue.filter('safeHtml', DOMPurify.sanitize),但在页面中用 v-html="$options.filters.safeHtml(html)" 却没效果
  • 以为加了“过滤器”就等于防住了 XSS,结果上线后仍被 <img src="https://img.php.cn/?x-oss-process=image/resize,p_40" alt="uni-app中如何防止过滤器被恶意脚本XSS注入"> 攻破

真正该拦截 XSS 的位置:响应拦截器 + v-html 前净化

所有来自后端的富文本、用户评论、后台配置的 HTML 内容,必须在进入视图前做一次白名单净化。不要依赖组件内零散处理,统一收口到请求响应层最可靠。

实操建议:

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • 在 uni.request 的 success 回调或封装的请求工具函数中,对返回字段(如 res.data.content)调用 DOMPurify.sanitize()
  • 若使用 uni-app 的 uniCloud 或 axios 封装,把净化逻辑放在响应拦截器里,例如:response => ({ ...response, data: xssSanitizePayload(response.data) })
  • 避免在模板中写 v-html="rawHtml",改用 v-html="DOMPurify.sanitize(rawHtml)"(需确保已引入并挂载到全局或组件)
  • 禁止将用户输入拼接到 eval、setTimeout、new Function 等动态执行上下文中

DOMPurify 配置必须用白名单,禁用黑名单式过滤

简单正则替换 <script></script> 或 onerror 是无效的——攻击者用大小写混写、空格绕过、Unicode 编码就能轻松击穿。DOMPurify 的价值就在于它基于 HTML 解析器做语义级净化,不是字符串匹配。

关键配置项(必须显式设置):

  • ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'p', 'br', 'img'] —— 只放业务真需要的标签
  • ALLOWED_ATTR: ['src', 'alt', 'title'] —— 图片只允许这几个属性,onerror 自动被剔除
  • ALLOWED_URI_REGEXP: /^https?:\/\// —— 强制外链只能是 http/https,干掉 javascript: 和 data:
  • 务必启用 SAFE_FOR_TEMPLATES: true,避免净化后 HTML 被 Vue 模板引擎二次解析出问题

容易忽略的渲染陷阱:v-html 不是唯一入口

XSS 不只发生在 v-html。以下写法同样高危,且常被忽略:

  • <text>{{ userNickname }}</text> —— 如果昵称含 <span onclick="..."></span>,uni-app 的 {{}} 默认只做文本插值,但某些平台(如 H5)在特定条件下可能触发解析
  • <view :style="'color:' + userColor"></view> —— 动态 style 绑定若未校验,可注入 expression(...)(IE)或 url(javascript:...)
  • 使用 uni.setStorageSync 存储 HTML 字符串,后续再读取渲染 —— 存储本身不触发,但读取后若直接 v-html 就等于绕过所有前置净化

真正难防的从来不是 <script></script>,而是那些看起来“无害”的标签+事件组合。净化必须在数据落地前完成,而不是等它出现在模板里才想起来处理。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

uni-app过滤器 uni-app

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2183

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4663

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5790

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5238

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

743

5

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

2026.09.23

180

15

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

2026.09.23

80

15

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

2026.09.23

80

15

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

2026.09.22

60

12

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习