React Native自定义Android的SSL证书链校验

目录
  • 前言
  • HTTPS请求
  • WebSocket

前言

虽然这次分享的内容解决了本人的实际开发需求,但由于不是专职的Android开发工程师,涉及到的Android相关内容可能会存在错误或者写法不合理,仅供参考,请多多指教。

本文示例基于:

React Native - 0.67.3

Android - 10+

不包括iOS

由于业务原因,需要在生产环境里面使用自签发证书,那自然这个证书是无法通过Android证书链验证的,为此需要自定义校验规则。

本文分为两部分,介绍了对HTTPS请求WebSocket的处理,为方便展示,示例里面所采取的是不进行任何判断,直接返回true,相当于直接绕过检验 ,请各位根据项目自身需求,自定义相关的校验规则。

关于本文中频繁提到的源码编译,这里也有不少心得,目前正在整理中,将在不久之后更新。

HTTPS请求

在搜索引擎上,有一些解决方案是修改React Native源码里面的/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java,然后进行源码编译

实际上其实是不需要进行源码编译这么麻烦的,在NetworkingModule.java同目录的OkHttpClientProvider.java中,能看到React Native本身是支持传入自定义的OkHttpClientFactory去创建NetworkingModule中的Client。

所以只需要以下几步:

  • 当前React Native项目中实现一个的OkHttpClientFactory,用来自定义证书链校验规则,文件可以放在MainActivity.java同级的目录里面。
// android/app/src/main/java/xxx(具体项目)/IgnoreSSLFactory.java
package xxx; //具体项目
import com.facebook.react.modules.network.OkHttpClientFactory;
import com.facebook.react.modules.network.OkHttpClientProvider;
import com.facebook.react.modules.network.ReactCookieJarContainer;
...
public class IgnoreSSLFactory implements OkHttpClientFactory {
    private static final String TAG = "IgnoreSSLFactory";
    @Override
    public OkHttpClient createNewNetworkModuleClient() {
        try {
            @SuppressLint("CustomX509TrustManager") final TrustManager[] trustAllCerts = new TrustManager[]{
                new X509TrustManager() {
                    @SuppressLint("TrustAllX509TrustManager")
                    @Override
                    public void checkClientTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {}
                    @SuppressLint("TrustAllX509TrustManager")
                    @Override
                    public void checkServerTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {}
                    @Override
                    public java.security.cert.X509Certificate[] getAcceptedIssuers() {
                        return new java.security.cert.X509Certificate[0];
                    }
                }
            };
            final SSLContext sslContext = SSLContext.getInstance("SSL");
            sslContext.init(null, trustAllCerts, new java.security.SecureRandom());
            final SSLSocketFactory sslSocketFactory = sslContext.getSocketFactory();
            OkHttpClient.Builder builder = new OkHttpClient.Builder()
                        .connectTimeout(0, TimeUnit.MILLISECONDS).readTimeout(0, TimeUnit.MILLISECONDS)
                        .writeTimeout(0, TimeUnit.MILLISECONDS).cookieJar(new ReactCookieJarContainer());
            builder.sslSocketFactory(sslSocketFactory, (X509TrustManager) trustAllCerts[0]);
            builder.hostnameVerifier((hostname, session) -> true); //这里添加自定义相关的校验规则
            return builder.build();
        } catch (Exception e) {
            Log.e(TAG, e.getMessage());
            throw new RuntimeException(e);
        }
    }
}
...
  • 当前React Native项目MainActivity.java里面import上文中提到的OkHttpClientProvider, 在项目onCreate的时候,通过OkHttpClientProvider.setOkHttpClientFactory方法传入上一步中定义的OkHttpClientFactory
// android/app/src/main/java/xxx(具体项目)/MainActivity.java
import com.facebook.react.modules.network.OkHttpClientProvider;
...
public class MainActivity extends ReactActivity {
...
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    ...
    OkHttpClientProvider.setOkHttpClientFactory(new IgnoreSSLFactory()); //增加这行代码
    ...
  }
...
}

以上就能达到在React Naitve中自定义HTTPS请求证书链校验的目的。

WebSocket

由于没有在相关代码中找到类似OkHttpClientProvider.java中的 setOkHttpClientFactory方法,所以我选择了通过源码编译去实现。 思路和上文中提到的处理HTTPS请求类似:

  • 修改React Native源码里面的/ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.java,定义一个自定义证书链校验规则的OkHttpClient.Builder用来替换原本代码中的OkHttpClient.Builder

将原本代码里面的

替换成

// ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.java`
...
//定义一个OkHttpClient
  private OkHttpClient IgnoreSSL() {
    OkHttpClient.Builder builder = null;
    try {
      @SuppressLint("CustomX509TrustManager") final TrustManager[] trustAllCerts = new TrustManager[]{
        new X509TrustManager() {
          @SuppressLint("TrustAllX509TrustManager")
          @Override
          public void checkClientTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {
          }
          @SuppressLint("TrustAllX509TrustManager")
          @Override
          public void checkServerTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {
          }
          @Override
          public java.security.cert.X509Certificate[] getAcceptedIssuers() {
            return new java.security.cert.X509Certificate[0];
          }
        }
      };
      final SSLContext sslContext = SSLContext.getInstance("SSL");
      sslContext.init(null, trustAllCerts, new java.security.SecureRandom());
      final SSLSocketFactory sslSocketFactory = sslContext.getSocketFactory();
      builder = new OkHttpClient.Builder()
        .connectTimeout(10, TimeUnit.SECONDS)
        .writeTimeout(10, TimeUnit.SECONDS)
        .readTimeout(0, TimeUnit.MINUTES); // Disable timeouts for read
      builder.sslSocketFactory(sslSocketFactory, (X509TrustManager) trustAllCerts[0]);
      builder.hostnameVerifier((hostname, session) -> true);//这里添加自定义相关的校验规则
    } catch (Exception e) {
      Log.e(TAG, e.getMessage());
      throw new RuntimeException(e);
    }
    return builder.build();
  }
  @Override
  public void connect(
...
//    OkHttpClient client =
//      new OkHttpClient.Builder()
//        .connectTimeout(10, TimeUnit.SECONDS)
//        .writeTimeout(10, TimeUnit.SECONDS)
//        .readTimeout(0, TimeUnit.MINUTES) // Disable timeouts for read
//        .build();
    OkHttpClient client = IgnoreSSL(); //client替换成上面自定义的OkHttpClient,其余代码无需修改
...
}
...
  • 进行源码编译,生成相关的aar文件。

以上就能达到在React Naitve中自定义WSS证书链校验的目的。

源码编译真的很麻烦,如果各位有类似处理HTTPS请求那样,能直接传入自定义Factory的方法,倘若方便,请在评论区告知一下,不胜感激。

参考资料

React Native - How to Build from Source(源码编译)

React Native - Releases

以上就是React Native自定义Android的SSL证书链校验的详细内容,更多关于React Native自定义Android SSL的资料请关注我们其它相关文章!

(0)

相关推荐

  • 使用react-native-doc-viewer实现文档预览

    目录 react-native-doc-viewer文档预览 具体步骤如下 react-native初体验的总结 一.前提知识点 二.开发前后相关的一些配置 三.开发项目中用到的知识 四.ui库 五.项目搭建 六.根据需要安装对应依赖 七.开发和调试 react-native-doc-viewer文档预览 react-native项目要求实现word,excel,pdf,mp4,png等格式附件图片的在线预览,最终选用react-native-doc-viewer实现, 具体步骤如下 1.安装r

  • React Native系列之Recyclerlistview使用详解

    目录 recyclerlistview的介绍与使用 1.安装 2.概述和功能 3. RecyclerListView的使用 1.dataProvider 2.LayoutProvider 3.rowRenderer 4.onEndReached 5.onEndReachedThreshold 6.extendedState 7.scrollViewProps RecyclerListView所有属性 recyclerlistview的介绍与使用 1.安装 npm install --save r

  • 新建的React Native就遇到vscode报警解除方法

    目录 新建的RN项目有警告 直接删除vscode报警的部分 禁掉vscode内置的TypeScript插件 引入Flow Language Support解除报警 新建的RN项目有警告 我相信AwesomeProject是很多人的第一个RN项目,包括我在内. npx react-native init AwesomeProject 但是当利用RN的脚手架搭建起来后,在vscode里打开项目,直接就会遇到如下这个vscode的警告: 'import type' declarations can o

  • 详解React Native中如何使用自定义的引用路径

    目录 RN的相对路径地狱 RN的自定义路径需要的依赖 解决自定义引用路径导致的eslint报错问题 RN的相对路径地狱 我刚接触RN时,就发现所有的demo中给出来的路径都是相对路径,我自己的练习项目中想改成自定义的绝对路径,但是发现并没有我做前端时熟悉的webpack.config.js,所以也就不知道该怎么改了.伴随着RN的学习和开发练习,我的代码也变得越来越多,越来越复杂,我逐渐发现RN的相对路径越来越麻烦,比如我把某个文件移动到另一个不同深度的文件夹中,那么就需要把所有引用这个文件的地方

  • 详解React Native项目中启用Hermes引擎

    目录 引言 一.启用 Hermes 引擎 1.1 Android 1.2 iOS 二.Hermes 引擎使用 2.1 检查 Hermes 引擎是否启用 2.2 绑定Hermes 2.3 使用DevTools在Hermes上调试JS 引言 目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎.而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用. 一.启

  • react-native 实现渐变色背景过程

    目录 react-native 渐变色背景 react-native学习记录 滚动条 轮播图示例 渐变色 ScrollableTabView默认页面 ScrollableTabView背景颜色 ScrollableTabView选中颜色 ScrollableTabView未选中颜色 react-native 渐变色背景 使用react-native-linear-gradient插件 1.安装 npm react-native-linear-gradient 2.链接 react-native

  • React Native自定义Android的SSL证书链校验

    目录 前言 HTTPS请求 WebSocket 前言 虽然这次分享的内容解决了本人的实际开发需求,但由于不是专职的Android开发工程师,涉及到的Android相关内容可能会存在错误或者写法不合理,仅供参考,请多多指教. 本文示例基于: React Native - 0.67.3 Android - 10+ 不包括iOS 由于业务原因,需要在生产环境里面使用自签发证书,那自然这个证书是无法通过Android证书链验证的,为此需要自定义校验规则. 本文分为两部分,介绍了对HTTPS请求和WebS

  • React Native自定义路由管理的深入理解

    目录 1.自定义路由 2.Tab导航 3.数据回传 总结 1.自定义路由 众所周知,不管是在原生Android还是iOS,它们都有一个默认的路由路由栈管理类.由于React Native官方没有提供路由管理的组件,所以我们需要使用react-navigation插件提供的Stack.Navigator组件来管理路由. Stack.Navigator使用的命名路由,所谓命名路由,指的是路由需要先声明然后才能使用.为了方便管理路由页面,我们会将路由放到一个统一的位置,比如screens包下,如下所示

  • React Native中Android物理back键按两次返回键即退出应用

    前言 本文主要给大家介绍了关于React Native中Android物理back键按两次返回键就会退出应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 话不多说,直接上图: 测试代码 第16~22行 设置事件监听以及移除事件监听. componentWillMount(){ BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid); } componentWillUnmount()

  • React Native自定义标题栏组件的实现方法

    大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率. 标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要.今天先讲一个不带返回按钮的标题栏.废话少说,直接上代码: /** * 封装公共的标题头,没有返回按钮 */ 'use strict'; import React, { Component } from 'react'; import { Text, Vi

  • React Native与Android 原生通信的方法

    我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互,这篇文章就是分享原生模块与JS传递数据的几种方式. 总的步骤可以分为如下几点: 在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法. 定义Package类,继承ReactPackage,将Module实例添加到集合. 在android继承的ReactApplication,回调实现getPackages方法,将Package实

  • Windows下React Native的Android环境部署及布局示例

    搭建基础环境 JDK(必须,不解释) SDK(建议使用Android Studio,集成SDK以及模拟器) genymotion(如果是使用真机或者Android Studio自带的模拟器,可以选择不装) NVM(node版本控制器,需要node4.0以上版本) 以上配置不是必须,可自行选择适合自己的环境,部分安装过程可能会涉及到翻墙,需要配置代理 配置踩坑记录 genymotion 这里选择genymotion模拟器来讲解,也会提一下Android Studio自带的模拟器的一些注意点,使用真

  • React Native 自定义下拉刷新上拉加载的列表的示例

    在移动端开发中列表页是非常常见的页面,在React Native中我们一般使用FlatList或SectionList组件实现这些列表视图.通常列表页都会有大量的数据需要加载显示,这时候就用到了分页加载,因此对于列表组件来说,实现下拉刷新和上拉加载在很多情况下是必不可少的. 本篇文章基于FlatList封装一个支持下拉刷新和上拉加载的RefreshListView,对原始的FlatList进行封装之后,再调用上拉和下拉刷新就十分方便了. 下拉刷新的实现十分简单,这里我们沿用FlatList本身的

  • React Native自定义组件与输出方法详解

    简介 如果你看的这一篇,需要你对ReactNative的开发有一定的了解,此文讲的是在ReactNative提供的组件不能满足需求,或者native用于较成熟的组件想要输出,那么就需要用到自定义组件了. 通过该文,我们也可以对native和JS交互方式进行初步了解,关于输出方法内部实现,我们下一篇再剖. Native module native module就是实现了RCTBridgeModule协议的OC类.RCT就是ReaCT的缩写. 具体步骤如下 引入#import <React/RCTB

  • 如何在原有Android项目中快速集成React Native详解

    前言 RN经过一段时间发展,已经有充分数量的人尝试过了,就我身边就有几批,褒贬也不一: ① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快速开发App ④ iOS&Android大部分代码通用 ⑤ code-push能做热更新,但是用不好依旧坑 ...... 在得到一些信息后,可以看出,要用RN高效率的做出比较不错的App是有可能的,单看投入度与最初设计是否合理,而且现在关于React Native的各种文档是相当丰富的,所以这个阶段想切入RN可能是一个不错的选择.

  • Android原生项目集成React Native的方法

    开发环境准备 首先按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件(比如npm). 在应用中添加JS代码 在项目的根目录中运行: $ npm init $ npm install --save react react-native $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig npm init创建了一个空的node模块

随机推荐