H5漏洞如何排查修复

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字符串。

自动化排查工具（快速扫描）

手工排查容易遗漏,建议结合工具：

1. 浏览器开发者工具（F12）：
   • Console： 查看是否有错误、警告,尤其注意跨域和协议问题。
   • Network： 检查所有请求是否都是HTTPS，查看Cookie属性（是否带Secure、HttpOnly）。
   • Sources： 检查JS源码中是否有直接暴露的敏感URL（如内网地址、硬编码的API Key）。
2. 前端安全扫描工具（开源）：
   • Dependency-Check： 检查项目使用的第三方JS库（如jQuery、React）是否有已知CVE漏洞。
   • SonarQube（分析代码质量）： 可以配置规则扫描XSS、SQL注入等模式。
   • ZAP（Zed Attack Proxy）： 安全测试代理,可以爬取你H5页面并自动扫描常见漏洞。
3. 在线工具：
   • Mozilla Observatory： 输入你的网站URL，检查CSP、HTTPS、Headers等配置。

修复后的验收测试（回归）

修复完漏洞后，必须进行验证,确保修复生效且没有引入新问题：

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

总结建议

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

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