【Android】跨端(JSBridge)安全小计

_HWHXY

已于 2024-01-27 16:36:06 修改

阅读量1.2k

点赞数

分类专栏： Android_JAVA层_安全文章标签： android 跨端 jsbridge webview 漏洞逆向

于 2023-06-28 00:46:07 首次发布

本文链接：https://blog.csdn.net/xiru9972/article/details/131427321

版权

Android_JAVA层_安全专栏收录该内容

14 篇文章 4 订阅

订阅专栏

背景

移动端漏洞有个比较大的攻击面是：Webview容器安全。

而Webview容器中一个比较重要的攻击面就是：跨端方法，通过Js可以直接调用客户端Native代码。

本文详细介绍android前端到客户端跨端通信的基础知识以及相关漏洞挖掘思路。

基础知识

当我们要了解跨端（这里指前端和客户端跨端）的时候，通常需要掌握一些基础知识，如下：

1、跨端

在移动端前端和客户端的跨端开发，通常是指使用一种技术或框架，同时在移动应用的前端和客户端开发中进行应用。这种跨端技术通常使用 Web 技术（如 HTML、CSS 和 JavaScript）来开发应用程序，然后通过 WebView 或类似的技术来集成到原生应用中。

在这种跨端开发中，前端开发者可以使用熟悉的 Web 技术来开发应用程序，而不需要学习和使用原生开发语言和工具。同时，客户端开发者可以使用原生开发语言和工具来集成前端开发的应用程序。

2、原理介绍

步骤一：

Native代码封装JSBridge对象：定义接口方法，代表这些Navtive方法可以被JS调用。

步骤二：

通过Webview容器提供的接口方法：evaluateJavascript，将步骤一封装的JSBridge方法注入到Webview容器中。

步骤三：

当步骤二的Webview容器加载时，进程中就包含了JSBridge对象（object），通过JavaScript就可以直接调用jsb对象中的接口方法，实现跨端方法调用。

3.、常见的移动端前端和客户端的跨端技术

1. React Native：React Native 可以使用 Web 技术来开发应用程序，并通过 JavaScript Bridge 技术来与原生应用进行交互，从而实现跨端开发。

2. Flutter：Flutter 可以使用 Web 技术来开发应用程序，并通过 Flutter Engine 技术来与原生应用进行交互，从而实现跨端开发。

3. WebView：WebView 是一种原生控件，可以在原生应用中嵌入 Web 应用程序。前端开发者可以使用 Web 技术来开发应用程序，然后通过 WebView 技术来集成到原生应用中。

4. Hybrid：Hybrid 是一种结合了原生和 Web 技术的跨端开发模式，可以使用 Web 技术来开发应用程序，并使用原生技术来实现底层功能。

3.1 React Native - ReactContextBaseJavaModule

攻击者视角，我更关心前端如何调用客户端。

在 React Native 中，Native Modules 用于将原生功能封装成 JavaScript 可以调用的函数或方法。

在原生代码中，创建一个 Native Module，通过该模块可以调用客户端代码。例如，在 Android 平台上可以创建一个 Java 类，实现 ReactContextBaseJavaModule 接口，并在该类中定义一个可以被 JavaScript 调用的函数。示例代码如下

public class MyNativeModule extends ReactContextBaseJavaModule {
    private Context mContext;

    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }

    @Override
    public String getName() {
        return "MyNativeModule";
    }

    @ReactMethod
    public void showSessionID() {
        Toast.makeText(mContext, getCookie(), Toast.LENGTH_SHORT).show();
    }
}

3.2 React Native - ReactApplication

继承ReactApplication并重写getPackages函数就可以将我们3.1新建的module注册进来。

import com.example.MyNativeModule;

...

public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.asList(
                new MainReactPackage(),
                new MyNativeModule()
            );
        }
    };
}

3.3 React Native - 前端调用

前端就能直接通过事件触发nativemodule的showSessionID方法了。

import React from 'react';
import { TouchableOpacity, Text, NativeModules } from 'react-native';

const MyButton = () => {
  const onPress = () => {
    NativeModules.MyNativeModule.showSessionID();
  };

  return (
    <TouchableOpacity onPress={onPress}>
      <Text>Click me</Text>
    </TouchableOpacity>
  );
};

export default MyButton;

所以如果存在远程动态加载一些前端代码，或者存储类或者其他安全问题能够控制前端代码，那我们就能进一步调用注册进来的客户端代码，例如上述的sessionid。

4.1 webview - @JavascriptInterface

新建一个javascript接口

class MyNativeInterface {
    @JavascriptInterface
    public void showCookie() {
        Toast.makeText(mContext, getcookie(), Toast.LENGTH_SHORT).show();
    }
}

4.2 webview - addJavascriptInterface

把接口注册进webview容器

import android.webkit.WebView;
import android.webkit.WebViewClient;

...

public class MainActivity extends AppCompatActivity {
    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = findViewById(R.id.webView);
        mWebView.setWebViewClient(new MyWebViewClient());
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.addJavascriptInterface(new MyNativeInterface(), "MyNativeInterface");
    }
}

4.3 webview - 前端调用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebView Example</title>
</head>
<body>
  <button onclick="window.MyNativeInterface.showcookie()">Click me</button>
</body>
</html>

webview的攻击比较丝滑，因为只要打开一个webview容器就可以有机会攻击注册进来的跨端接口。扫一扫、Deeplink、IM、搜索等等。

5. Hybrid

Hybrid 应用程序比普通的 WebView 应用程序更加复杂，需要在客户端代码中实现一些原生功能，例如调用系统 API、访问本地数据库等，一种开发模式，它结合了 Web 技术和原生技术，用于开发跨平台应用程序。但是实现原理就是webview。所以参考4.1~4.3即可。

6. Flutter

实现原理和React Native类似，继承MethodCallHandler定义channel并写入跨端方法->setMethodCallHandler注册channel到Flutter->前端调用跨端方法。

public class MyChannel implements MethodCallHandler {
    private static final String CHANNEL_NAME = "com.example.my_channel";

    private Context mContext;

    private MyChannel(Context context) {
        mContext = context;
    }

    public static void registerWith(Registrar registrar) {
        final MethodChannel channel = new MethodChannel(registrar.messenger(), CHANNEL_NAME);
        channel.setMethodCallHandler(new MyChannel(registrar.context()));
    }

    @Override
    public void onMethodCall(MethodCall call, MethodChannel.Result result) {
        if (call.method.equals("showToast")) {
            String message = call.argument("message");
            Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show();
            result.success(true);
        } else {
            result.notImplemented();
        }
    }
}


--------

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.GeneratedPluginRegistrant;
import io.flutter.plugin.common.MethodChannel;

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL_NAME = "com.example.my_channel";

    @Override
    public void configureFlutterEngine(FlutterEngine flutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine);
        new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL_NAME)
                .setMethodCallHandler(new MyChannel(this));
    }
}


-----------
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  static const platform = const MethodChannel('com.example.my_channel');

  void _showToast() async {
    try {
      await platform.invokeMethod('showToast', {'message': 'Hello, world!'});
    } on PlatformException catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Click me'),
            onPressed: _showToast,
          ),
        ),
      ),
    );
  }
}

如何挖掘?实战演练

步骤（一）：

逆向APK -> 得到Android源代码 -> 全局搜索@JavascriptInterface -> 搜索webview容器的JSBridge对象，以及实现的接口方法。

步骤（二）：

找到具体外部可控的业务场景触发注入了JSB的Webview容器：常见的场景有

扫一扫、IM、Deeplink、文章、签名等。

步骤（三）：

研读步骤一得到的JSBridge对象，以及实现的接口方法，依据参数以及参数类型和条件判断，在前端通过JavaScript进行调用。

如下模拟调用举例：

<script>window.xxxx.yyyy(aaa,bbb);

后话

不同的应用厂商在跨端上面可能都会选择不同的解决方案，或者自己开发一些跨端框架，这时候可能需要逆向看代码逻辑才能往下走。另外跨端的调用往往也不是一帆风顺，开发者会增加各种限制，例如权限限制，访问域名限制等等，这个也需要进一步的绕过思路，这个还要慢慢发散思路和学习。

_HWHXY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Android】跨端(JSBridge)安全小计

在挖移动端的时候，通常会关注跨端方向的问题，因为我们能直接从webview容器去访问native的代码，从客户端角度，从前端能直接深入到客户端，所以跨端这块比较有研究意义。本文详细介绍android前端到客户端跨端通信的基础知识以及相关漏洞挖掘思路。
复制链接

扫一扫