Expo+React Native应用出现.wasm垃圾HTTP请求如何排查防范

• 基于Expo与React Native构建的Web应用运行过程中，可观测到网页触发大量无业务关联的垃圾HTTP请求
• Chrome网络面板显示，异常请求中包含多个.wasm后缀的文件拉取请求
• 本地localhost开发环境下复现同类请求，排除线上环境链路注入的可能
• 项目依赖检测发现多个npm包存在高危安全漏洞
• 核心疑问：该异常是否由npm模块导致？应当如何阻止这类垃圾请求？

异常原因判定 #

这类异常请求90%以上概率是存在风险的npm依赖导致的，判定依据如下：

• 本地开发环境无网关、CDN、反向代理层的代码注入条件，请求只能由前端运行时代码触发
• 若业务代码本身没有主动加载wasm资源的逻辑，触发源只能是项目引入的第三方npm包
• 结合已检测到npm高危漏洞的前提，和供应链投毒包的典型特征完全吻合：这类被投毒的依赖通常会在运行时静默拉取.wasm格式的恶意程序（以网页挖矿、前端侧信息窃取类程序为主），后台执行消耗用户资源，不会在业务代码中留下显式调用痕迹。

排查与阻断方案 #

按以下步骤操作即可彻底清除异常请求：

1. 定位恶意依赖
   • 打开Chrome DevTools网络面板，点击任意一条异常的.wasm请求，切换到「Initiator」标签查看完整调用栈，顺着调用链路向上追溯，排除自身业务代码后，即可定位到触发请求的npm包路径
   • 执行npm audit获取存在高危漏洞的依赖列表，和调用栈定位结果交叉验证，优先排查近1个月内新增安装、周下载量极低、无官方开源维护地址的小众依赖
   • 检查锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）是否存在常用依赖被篡改版本、注入不明后置安装脚本的情况
2. 清理恶意代码
   • 直接卸载定位到的问题依赖：如果是业务非必须包直接移除即可；如果是业务必需依赖，回滚到无投毒记录的官方稳定版本，或替换为同功能的正规维护替代包
   • 删除整个node_modules目录和现有锁文件，重新执行依赖安装命令安装干净版本的依赖，安装完成后重新扫描确认高危漏洞全部修复，本地启动验证异常请求消失
3. 长期防护配置
   • 开启npm的安全审计拦截，安装依赖时不要随意添加--force参数跳过安全校验，阻断存在已知高危漏洞的包进入项目
   • 在Expo/React Native的Web构建配置中，添加wasm资源加载白名单，禁止打包阶段将未明确声明的未知wasm资源打入生产产物
   • 配置页面内容安全策略（CSP），默认禁止加载非业务信任域名下的wasm资源，从浏览器运行时层面拦截未知恶意请求

内容的提问来源于stack exchange，提问作者kulls