搜索

APP

起点课堂会员权益

职业体系课特权

线下行业大会特权

个人IP打造特权

30+门专项技能课

1300+专题课程

12场职场软技能直播

12场求职辅导直播

12场专业技能直播

会员专属社群

荣耀标识

发布

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

华为开发者联盟

2026-05-22

0 评论 315 浏览 0 收藏

20 分钟

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

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

一、背景介绍

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()的安全方案。

getLastJavascriptProxyCallingFrameUrlgetLastJavascriptProxyCallingFrameUrl(): 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开发者

registerJavaScriptProxyregisterJavaScriptProxy(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级别白名单的交集。

javaScriptProxyjavaScriptProxy(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);