H5漏洞如何排查修复

wen 网络安全 2026-06-27 28

本文目录导读：

H5漏洞如何排查修复

核心排查方向（由高到低优先级）
自动化排查工具（快速扫描）
修复后的验收测试（回归）
总结建议

H5漏洞”，通常指的是基于HTML5技术开发的移动端网页、Web应用或内嵌在App中的页面存在的安全问题，为了帮你更精准地排查和修复，下面按常见漏洞类型分类,给出具体的排查方法和修复建议。

核心排查方向（由高到低优先级）

XSS（跨站脚本攻击）—— 最常见、危害大

攻击者将恶意脚本注入到页面中，盗取用户Cookie、Token或执行恶意操作。

排查方法：
- 所有用户输入点： 搜索框、评论框、用户名、URL参数、表单提交。
- URL中后面的Hash值： H5页面常用Hash路由，攻击者容易在这里注入<script>
- localStorage / sessionStorage：检查是否存在直接将用户输入或解码后的数据存入Storage,然后未经转义直接渲染到页面的情况。



修复方案：

输出编码（最核心）： 在将数据插入HTML、属性、JavaScript、CSS或URL时，必须进行编码。< 转 &lt;，> 转 &gt;。
使用安全API： 尽量不要使用 innerHTML，改用 textContent 或 innerText。
CSP策略： 设置内容安全策略（Content Security Policy），在服务器HTTP响应头或<meta>标签中限制脚本来源。



具体示例：
<!-- 错误做法 -->
<div id="content">{{ userInput }}</div>
<script>
    document.getElementById('content').innerHTML = userInput;
</script>
<!-- 正确做法（Vue.js自带转义，但v-html要慎用） -->
<div>{{ userInput }}</div> <!-- 自动转义 -->
<!-- 或者手动转义 -->


WebView 配置漏洞（Android/iOS混合开发）
这是H5内嵌到App时特有的高风险点。

排查方法：
JS桥接接口： 检查App端代码中 addJavascriptInterface 是否暴露了危险方法（如文件读写、发送短信等）。
URL拦截： 检查Android的 shouldOverrideUrlLoading 或iOS的 webView:shouldStartLoadWithRequest: 中是否存在协议绕过逻辑。
文件域访问： 检查 WebView.setAllowFileAccess(true) 是否被开启。
远程代码执行： 检查是否使用了过低的WebView内核版本（如Android 4.4以下）。


修复方案：
最小权限原则： 只暴露必要的方法给JS，并且方法内部做严格的参数校验和权限控制（例如仅允许访问App版本号，不允许执行系统命令）。
禁用危险设置：// Android
webView.getSettings().setAllowFileAccess(false);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(false);
// 建议使用HTTPS域名白名单

URL白名单： 拦截所有跳转,只允许跳转到公司授权的域名。



不安全的通信（HTTPS与中间人攻击）
H5页面数据传输被窃听或篡改。

排查方法：
抓包工具（如Charles、Fiddler）检查所有请求，如果发现请求是 http:// 或 ws://（未加密的WebSocket）,即为漏洞。
检查混合内容：HTTPS页面中加载了HTTP资源（图片、JS、CSS）。


修复方案：
全站HTTPS： 将所有HTTP请求替换为HTTPS。
HSTS： 在服务器响应头添加 Strict-Transport-Security,强制浏览器只通过HTTPS访问。
升级WebSocket： 使用 wss:// 代替 ws://。



本地存储泄露（LocalStorage / SessionStorage / Cookie）
敏感信息在客户端明文存储。

排查方法：
打开浏览器开发者工具 -> Application -> Storage，检查 Local Storage、Session Storage 和 Cookies。
查找是否有 token、sessionId、userinfo、phone、idcard 等敏感字段。


修复方案：
敏感信息仅存内存： Token等敏感数据尽量放在JavaScript变量中（闭包或Vuex/Redux）,不持久化到Storage。
必须存储时： 对敏感数据（如用户ID、手机号）进行加密（例如使用AES-256加密后再存入Storage）。
Cookie安全： 设置 HttpOnly（禁止JS读取Cookie）、Secure（仅HTTPS发送）、SameSite（防止跨站请求伪造）。



CSRF（跨站请求伪造）—— 针对API接口
虽然H5前端是展示层，但如果涉及到表单提交或API调用,也需要防范。

排查方法：
检查所有重要操作（修改密码、转账、删除）的API请求头中是否没有自定义Token或Referer验证。


修复方案：
使用Anti-CSRF Token： 服务端在返回页面时生成一个随机Token，提交请求时携带该Token,服务端验证。
SameSite Cookie： 设置Cookie的 SameSite=Lax 或 SameSite=Strict。
二次验证： 关键操作（如支付）要求输入验证码或密码。



不严格的输入校验与注入（SQL、命令、路径）
H5传递到后端的参数未经过滤,导致后端数据库或系统被攻击。

排查方法：
检查所有 GET/POST 参数、URL参数 是否被直接拼接到后端SQL语句或命令中。


修复方案：
前端校验是辅助，后端必须做： 前端可以校验格式（如邮箱格式）,但后端必须做参数化查询或严格的转义。
参数化查询： 永远不要拼接SQL字符串。



 自动化排查工具（快速扫描）
手工排查容易遗漏,建议结合工具：

浏览器开发者工具（F12）：
Console： 查看是否有错误、警告,尤其注意跨域和协议问题。
Network： 检查所有请求是否都是HTTPS，查看Cookie属性（是否带Secure、HttpOnly）。
Sources： 检查JS源码中是否有直接暴露的敏感URL（如内网地址、硬编码的API Key）。


前端安全扫描工具（开源）：
Dependency-Check： 检查项目使用的第三方JS库（如jQuery、React）是否有已知CVE漏洞。
SonarQube（分析代码质量）： 可以配置规则扫描XSS、SQL注入等模式。
ZAP（Zed Attack Proxy）： 安全测试代理,可以爬取你H5页面并自动扫描常见漏洞。


在线工具：
Mozilla Observatory： 输入你的网站URL，检查CSP、HTTPS、Headers等配置。



 修复后的验收测试（回归）
修复完漏洞后，必须进行验证,确保修复生效且没有引入新问题：

功能测试： 修复了XSS后，所有输入框、搜索、评论功能是否正常工作（中文、特殊字符、HTML标签是否正常显示或存储）。
安全测试：
手动输入 <script>alert(1)</script> 或 <img src=x onerror=alert(1)> 到所有输入框,看是否弹窗。
使用Burp Suite或ZAP再次扫描，确认漏洞状态从“高危”变为“已修复”或“未检测到”。


兼容性测试： 修复了WebView配置后，在低版本Android机（如Android 5.0~7.0）上测试功能是否正常。

总结建议

优先修复XSS，这是H5漏洞的“万恶之源”。
建立安全编码规范，所有输出都要转义”、“禁止拼接SQL”、“禁止在localStorage存Token”。
安全策略（CSP），这是防御XSS的“银弹”,配置得当可阻止绝大多数脚本注入。
如果你用的是主流框架（React、Vue、Angular），它们默认已经做了很多防XSS处理，但要注意 v-html、dangerouslySetInnerHTML 等接口要特别谨慎。

如果需要针对某个具体场景（比如某个接口报错，或者你怀疑某个功能有风险）进行深入排查,可以补充更多细节。