当前位置：首页 > news >正文

鸿蒙应用安全编码专题系列之Web组件JavaScriptProxy安全

news 2026/5/23 1:30:48

本原创文章帖发布在华为开发者联盟社区，欢迎开发者前往访问评论交流，更多与该内容相关讨论，请点击原帖查看：
鸿蒙应用安全编码专题文章汇总 | 华为开发者联盟

一、背景介绍

JavaScript Bridge（简称JSBridge）是Hybrid App中WebView（H5页面）与native层（Android/iOS/鸿蒙）进行通信的核心通道，负责实现前端与native代码的交互，是移动应用中典型的高风险攻击面。在鸿蒙系统中，Web组件提供了JavaScriptProxy机制，为前端H5与ArkTS native层的通信提供支持，应用通常会通过注册JavaScriptProxy暴露native接口供前端调用，若未采取规范的安全防护措施，极易被攻击者利用，引发各类安全风险。

二、JSBridge核心安全风险

鸿蒙Web组件的JSBridge通信机制，若实现不当，会面临以下4类核心安全风险，均可能导致敏感数据泄露、权限被滥用等严重后果：

2.1 跨站脚本攻击（XSS）与接口越权调用

攻击者通过注入恶意JavaScript代码到H5页面，利用JSBridge调用鸿蒙native接口。若native接口未做权限校验、参数过滤等安全控制，攻击者可通过该方式执行越权操作，如调用系统敏感接口、篡改应用数据等。

2.2 敏感数据泄露

若JSBridge暴露了获取用户敏感数据或全局认证凭据的接口（如AccessToken、SessionId、用户密码等），一旦被攻击者利用，可直接冒充用户身份，访问云端服务、读取本地敏感数据（如数据库、缓存文件），造成用户信息泄露。

2.3 URL跳转与钓鱼攻击

若应用通过JSBridge为H5提供URL加载接口（如鸿蒙WebviewController的loadUrl方法），且未对跳转URL进行白名单校验，攻击者可构造恶意H5页面，调用该接口将用户重定向至伪造的钓鱼网站（如仿银行、仿社交平台登录页），窃取用户输入的账号、密码等核心凭证。

2.4 UXSS漏洞风险

若JSBridge中提供URL跳转（loadUrl）、JavaScript脚本执行（runJavaScript、runJavaScriptExt）等功能，且未做严格的安全校验，可能引发通用跨站脚本（UXSS）攻击，攻击者可通过构造特殊URL或脚本，绕过同源策略，执行恶意代码。

核心防护前提

上述所有风险的防护核心的是URL白名单管控，目前主流有两种实现方案：

全局URL白名单：对Web组件加载的所有URL进行白名单校验，仅允许白名单内的URL加载和调用JSBridge（前期已有文章针对此方案进行安全风险分析和安全实现方案推荐，可直接参考：鸿蒙应用安全编码专题系列之Web组件URL加载安全 | 华为开发者联盟，本文不重点展开）；
针对JSBridge单独校验白名单：不限制Web组件加载的URL，仅在前端H5调用JSBridge时，对当前页面URL进行白名单校验，仅允许白名单内的URL调用JSBridge（本文重点讨论该方案的不安全实现及防御措施）。

三、JSBridge白名单校验的不安全实现

针对JSBridge单独校验白名单的核心是“获取当前调用JSBridge的H5页面URL，再与白名单比对”，若URL获取方式不当，会导致校验失效，被攻击者通过时序攻击、条件竞争等方式绕过。以下是两种比较常见的不安全实现及问题分析。

3.1 方式一：在onLoadIntercept等回调中获取URL

错误实现逻辑：在Web组件的onLoadIntercept等回调接口中，获取当前页面URL并缓存，后续JSBridge接口调用时，直接使用缓存的URL进行白名单校验。

核心问题：缓存的URL与实际调用JSBridge时的页面URL可能不一致，攻击者可通过延时攻击绕过校验。

错误示例代码

//1、定义JavaScriptProxy对象 class TestObj1 { private _url: string = ''; public setUrl(value: string) { this._url = value; } public getUrl(): string { return this._url; } constructor() { } getToken(): string { console.log('get token : ' + this._url); //2、域名白名单校验 if (isUrlInWhitelist(this._url)) { return 'real token'; } return 'fake token'; } } //域名白名单校验方法 function isUrlInWhitelist(url: string) { let whitelist = ['baidu.com', 'b.example.com']; try { const urlObj = new uri.URI(url); if (whitelist.includes(urlObj.host) && 'https' === urlObj.scheme) { return true; } } catch (e) { return false; } return false; } //3、onControllerAttached回调中注册getToken方法 this.controller.registerJavaScriptProxy(this.testObjtest1, "objName1", ["getToken"]); //4、onLoadIntercept回调中设置url，用于校验 .onLoadIntercept((event) => { if (event) { console.info('onLoadIntercept url:' + event.data.getRequestUrl()) this.testObjtest1.setUrl(event.data.getRequestUrl()); } return false; })

攻击示例（PoC）

<button onclick="gettoken">click me</button> <script type="text/javascript"> function gettoken(){ // 频繁跳转至白名单URL，让缓存的URL为白名单地址 setInterval(gotowhite, 5); // 延时执行JSBridge调用，此时页面已被替换为恶意地址，但缓存URL仍为白名单 setTimeout(getUserInfo, 500); function gotowhite() { top.location.href = "https://baidu.com"; // 白名单内URL } function getUserInfo() { if (window.objName1) { var token = window.objName1.getToken(); // 调用JSBridge获取敏感令牌 console.log('get token : ' + token); document.write('get token result : ' + token); } else { console.error("no window objName1"); document.write('get token fail : no window objName1'); } } } </script>

攻击结果

攻击者的恶意页面（如xxx.github.io）通过延时跳转，使JSBridge校验时使用的缓存URL为白名单地址（https://baidu.com），但实际调用JSBridge的页面为恶意地址，最终成功绕过校验，获取到真实敏感令牌（如下图）。

3.2 方式二：通过WebviewController.getUrl()获取URL

错误示例代码

错误实现逻辑：在JSBridge接口（如getToken）中，通过鸿蒙WebviewController的getUrl()方法获取当前页面URL，再进行白名单校验。

// 1、定义JavaScriptProxy对象 class TestObj2 { webviewcontroller: webview.WebviewController; constructor(webviewcontroller: webview.WebviewController) { this.webviewcontroller = webviewcontroller; } getToken(): string { // 2、通过getUrl()获取URL（核心错误点） let url = this.webviewcontroller.getUrl(); console.log('get token : ' + url); // 3、白名单校验 if (isUrlInWhitelist(url)) { return 'real token'; // 校验通过，返回真实令牌 } return 'fake token'; // 校验失败，返回虚假令牌 } } // 白名单校验函数 function isUrlInWhitelist(url: string) { let whitelist = ['baidu.com', 'b.example.com']; try { const urlObj = new uri.URI(url); // 校验协议为https且域名在白名单内 if (whitelist.includes(urlObj.host) && 'https' === urlObj.scheme) { return true; } } catch (e) { return false; } return false; } // 4、初始化WebviewController和JavaScriptProxy controller: webview.WebviewController = new webview.WebviewController(); testObjtest2: TestObj2 = new TestObj2(this.controller); // 5、注册JavaScriptProxy this.controller.registerJavaScriptProxy(this.testObjtest2, "objName2", ["getToken"]);

核心问题

getUrl()方法本身并非线程安全，读取的是URL的瞬时状态，无法保证与“JSBridge调用时的真实URL”一致。攻击者可通过文件替换、多进程并发读写等方式制造时序差，使getUrl()获取到白名单URL，而实际调用JSBridge的是恶意URL，从而绕过校验。

四、安全实现方案

针对上述不安全实现，鸿蒙系统提供了两种可靠的防御方案，优先推荐使用系统自带的权限配置机制，无需自行实现复杂的校验逻辑，安全性更高、可维护性更强。

4.1 方案一：使用getLastJavascriptProxyCallingFrameUrl()获取真实URL

鸿蒙WebviewController提供了getLastJavascriptProxyCallingFrameUrl()接口（详情参考：Class (WebviewController)-@ohos.web.webview (Webview)-ArkTS API-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者），该接口可获取“最后一次调用注入JavaScript对象的frame的真实URL”，不受时序攻击、条件竞争影响，是替代getUrl()的安全方案。

getLastJavascriptProxyCallingFrameUrl

getLastJavascriptProxyCallingFrameUrl(): string

通过registerJavaScriptProxy或者javaScriptProxy注入JavaScript对象到window对象中。该接口可以获取最后一次调用注入的对象的frame的url。

系统能力：SystemCapability.Web.Webview.Core

返回值：

类型	说明
string	最后一次调用注入的对象的frame的url。

正确实现代码

正确示例代码如下，只需将getUrl替换成getLastJavascriptProxyCallingFrameUrl即可。

// 1、定义JavaScriptProxy对象 class TestObj2 { webviewcontroller: webview.WebviewController; constructor(webviewcontroller: webview.WebviewController) { this.webviewcontroller = webviewcontroller; } getToken(): string { // 2、使用安全接口获取真实调用URL（核心修改点） let url = this.webviewcontroller.getLastJavascriptProxyCallingFrameUrl(); console.log('get token : ' + url); // 3、白名单校验（逻辑不变） if (isUrlInWhitelist(url)) { return 'real token'; } return 'fake token'; } } // 白名单校验函数（与错误示例一致） function isUrlInWhitelist(url: string) { let whitelist = ['baidu.com', 'b.example.com']; try { const urlObj = new uri.URI(url); if (whitelist.includes(urlObj.host) && 'https' === urlObj.scheme) { return true; } } catch (e) { return false; } return false; } // 4、初始化与注册（逻辑不变） controller: webview.WebviewController = new webview.WebviewController(); testObjtest2: TestObj2 = new TestObj2(this.controller); this.controller.registerJavaScriptProxy(this.testObjtest2, "objName2", ["getToken"]);

4.2 方案二：注册JavaScriptProxy时配置permission（优先推荐）

鸿蒙WebviewController的registerJavaScriptProxy接口支持通过permission参数配置JSBridge的URL白名单，由系统自动完成校验，无需自行实现URL获取和比对逻辑，从源头避免校验漏洞，是比较安全、简洁的方案。

具体API如下，参考：Class (WebviewController)-@ohos.web.webview (Webview)-ArkTS API-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者和属性-Web-ArkTS 组件-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者

registerJavaScriptProxy

registerJavaScriptProxy(jsObject: object, name: string, methodList: Array<string>, asyncMethodList?: Array<string>, permission?: string): void

registerJavaScriptProxy提供了应用与Web组件加载的网页之间强大的交互能力。注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。

其中permission就是白名单，通过该字符串配置JSBridge的权限管控，可以定义object和method级别的URL白名单。

1. scheme（协议）和host（域名）参数不可为空，且host不支持通配符，只能填写完整的host。

2. 可以仅配置object级别的白名单，该白名单对所有JSBridge方法生效。

3. 若JSBridge方法A设置了method级别的白名单，那么方法A最终的白名单是object级别白名单与method级别白名单的交集。

javaScriptProxy

javaScriptProxy(javaScriptProxy: JavaScriptProxy)

将javaScriptProxy中的ArkTS对象注册到Web组件中，该对象将使用JavaScriptProxy中指定的名称注册到网页的所有框架中，包括所有iframe，这使得JavaScript可以调用javaScriptProxy中ArkTS对象的方法。当属性没有显式调用时，默认不将javaScriptProxy中的ArkTS对象注册到Web组件中。

正确实现代码

正确示例代码如下，可以看到，相比于上面的方案，实现简单且安全

// 1、定义JavaScriptProxy对象（无需自行实现URL校验） class TestObj3 { constructor() { } // 敏感接口：获取用户令牌 getToken(): string { return 'real token'; } } // 2、配置白名单（permission参数） // 仅允许https协议、baidu.com域名的页面调用该JSBridge let permission: string = '{"javascriptProxyPermission":{"urlPermissionList":[{"scheme":"https","host":"baidu.com"}]}}' // 3、初始化WebviewController和JavaScriptProxy controller: webview.WebviewController = new webview.WebviewController(); testObjtest3: TestObj3 = new TestObj3(); // 4、注册时配置permission，系统自动校验URL this.controller.registerJavaScriptProxy(this.testObjtest3, "objName3", ["getToken"], [], permission);