webview-jsbridge-demo

1. 实验目标

用最小 Android WebView 验证 H5 ↔ Native 的 JSBridge 双向通信（对应 docs/05-bridge-hybrid/02）：

• JS → Native：@JavascriptInterface 暴露 getDeviceInfo() / getAuthToken() 给 H5 调用
• Native → JS：evaluateJavascript 调用 H5 侧 window.h5Bridge 回调
• 安全红线：敏感接口 getAuthToken() 调用前做域名白名单校验，非白名单 host 一律拒绝

2. 工程要点

• 本地 H5 演示页：app/src/main/assets/jsbridge_demo.html（纯静态，无需网络权限）
• addJavascriptInterface(bridge, "NativeBridge")：把 Kotlin 对象暴露为 JS 全局对象
• 白名单 allowHosts = setOf("localhost", "example.com")：webView.url 解析 host 后校验
• 双向通信都在 UI 线程回调，直接更新页面/日志

3. 运行方式

cd labs/android/host
./gradlew installDebug

在设备/模拟器中打开 Android Host，进入 打开 WebView / JSBridge 实验室。

4. 预期现象

• H5 页显示三个按钮，点击 JS 调用 Native: getDeviceInfo → JS 日志区打印设备信息
• 点击 JS 调用 Native: getAuthToken → Native 日志区出现"host 不在白名单，拒绝"（file:// 协议下 host 为空），演示敏感接口拦截
• Native 日志区同步记录每次 bridge 调用

5. 常见误区

误区	实际情况
只要 H5 能调通就算完成	敏感接口必须校验来源域名，否则第三方页面可盗取 Token
addJavascriptInterface 是默认安全的	API 17 前存在反射 RCE 漏洞；现在仍要控制暴露面
大文件/二进制走 JSBridge	JSBridge 适合轻量结构化数据，大文件走原生通道

6. 对应知识库文档

• 理论主文档：WebView H5 JSBridge 交互与安全防护
• H5 登录态同步：H5 登录态与 Cookie 强注入 SSO 机制

7. 关键源码

• WebViewJsBridgeActivity.kt
• jsbridge_demo.html