React Native自定義Android的SSL證書(shū)鏈校驗(yàn)
前言
雖然這次分享的內(nèi)容解決了本人的實(shí)際開(kāi)發(fā)需求,但由于不是專職的Android開(kāi)發(fā)工程師,涉及到的Android相關(guān)內(nèi)容可能會(huì)存在錯(cuò)誤或者寫(xiě)法不合理,僅供參考,請(qǐng)多多指教。
本文示例基于:
React Native - 0.67.3
Android - 10+
不包括iOS
由于業(yè)務(wù)原因,需要在生產(chǎn)環(huán)境里面使用自簽發(fā)證書(shū),那自然這個(gè)證書(shū)是無(wú)法通過(guò)Android證書(shū)鏈驗(yàn)證的,為此需要自定義校驗(yàn)規(guī)則。
本文分為兩部分,介紹了對(duì)HTTPS請(qǐng)求和WebSocket的處理,為方便展示,示例里面所采取的是不進(jìn)行任何判斷,直接返回true,相當(dāng)于直接繞過(guò)檢驗(yàn) ,請(qǐng)各位根據(jù)項(xiàng)目自身需求,自定義相關(guān)的校驗(yàn)規(guī)則。
關(guān)于本文中頻繁提到的源碼編譯,這里也有不少心得,目前正在整理中,將在不久之后更新。
HTTPS請(qǐng)求
在搜索引擎上,有一些解決方案是修改React Native源碼里面的/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java,然后進(jìn)行源碼編譯。
實(shí)際上其實(shí)是不需要進(jìn)行源碼編譯這么麻煩的,在NetworkingModule.java同目錄的OkHttpClientProvider.java中,能看到React Native本身是支持傳入自定義的OkHttpClientFactory去創(chuàng)建NetworkingModule中的Client。

所以只需要以下幾步:
- 在
當(dāng)前React Native項(xiàng)目中實(shí)現(xiàn)一個(gè)的OkHttpClientFactory,用來(lái)自定義證書(shū)鏈校驗(yàn)規(guī)則,文件可以放在MainActivity.java同級(jí)的目錄里面。
// android/app/src/main/java/xxx(具體項(xiàng)目)/IgnoreSSLFactory.java
package xxx; //具體項(xiàng)目
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); //這里添加自定義相關(guān)的校驗(yàn)規(guī)則
return builder.build();
} catch (Exception e) {
Log.e(TAG, e.getMessage());
throw new RuntimeException(e);
}
}
}
...
- 在
當(dāng)前React Native項(xiàng)目中MainActivity.java里面import上文中提到的OkHttpClientProvider, 在項(xiàng)目onCreate的時(shí)候,通過(guò)OkHttpClientProvider.setOkHttpClientFactory方法傳入上一步中定義的OkHttpClientFactory
// android/app/src/main/java/xxx(具體項(xiàng)目)/MainActivity.java
import com.facebook.react.modules.network.OkHttpClientProvider;
...
public class MainActivity extends ReactActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
...
OkHttpClientProvider.setOkHttpClientFactory(new IgnoreSSLFactory()); //增加這行代碼
...
}
...
}
以上就能達(dá)到在React Naitve中自定義HTTPS請(qǐng)求證書(shū)鏈校驗(yàn)的目的。
WebSocket
由于沒(méi)有在相關(guān)代碼中找到類(lèi)似OkHttpClientProvider.java中的 setOkHttpClientFactory方法,所以我選擇了通過(guò)源碼編譯去實(shí)現(xiàn)。 思路和上文中提到的處理HTTPS請(qǐng)求類(lèi)似:
- 修改
React Native源碼里面的/ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.java,定義一個(gè)自定義證書(shū)鏈校驗(yàn)規(guī)則的OkHttpClient.Builder用來(lái)替換原本代碼中的OkHttpClient.Builder,
將原本代碼里面的

替換成
// ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.java`
...
//定義一個(gè)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);//這里添加自定義相關(guān)的校驗(yàn)規(guī)則
} 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,其余代碼無(wú)需修改
...
}
...
- 進(jìn)行源碼編譯,生成相關(guān)的aar文件。
以上就能達(dá)到在React Naitve中自定義WSS證書(shū)鏈校驗(yàn)的目的。
源碼編譯真的很麻煩,如果各位有類(lèi)似處理HTTPS請(qǐng)求那樣,能直接傳入自定義Factory的方法,倘若方便,請(qǐng)?jiān)谠u(píng)論區(qū)告知一下,不勝感激。
參考資料
React Native - How to Build from Source(源碼編譯)
以上就是React Native自定義Android的SSL證書(shū)鏈校驗(yàn)的詳細(xì)內(nèi)容,更多關(guān)于React Native自定義Android SSL的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Next.js搭建Monorepo組件庫(kù)文檔實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Next.js搭建Monorepo組件庫(kù)文檔,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
用React Native制作一個(gè)簡(jiǎn)單的游戲引擎
今天給大家分享的是使用React Native制作一個(gè)簡(jiǎn)單的游戲,這個(gè)游戲可以跨平臺(tái)操作,本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),對(duì)React Native游戲相關(guān)知識(shí)感興趣的朋友一起看看吧2021-05-05
React的組件協(xié)同使用實(shí)現(xiàn)方式
這篇文章主要介紹了React的組件協(xié)同使用,文中給大家提到在React開(kāi)發(fā)中,有哪些場(chǎng)景的組件協(xié)同?又如何去實(shí)現(xiàn)組件的協(xié)同使用呢?本文都給大家提到,感興趣的朋友跟隨小編一起看看吧2021-09-09
React鉤子函數(shù)之useDeferredValue的基本使用示例詳解
useDeferredValue是React 18中非常有用的一個(gè)鉤子函數(shù),它可以幫助我們優(yōu)化渲染性能,并讓UI更加流暢,如果你還沒(méi)有嘗試過(guò)它,不妨在你的下一個(gè)React項(xiàng)目中試一試,這篇文章主要介紹了React鉤子函數(shù)之useDeferredValue的基本使用,需要的朋友可以參考下2023-08-08
react拖拽react-beautiful-dnd一維數(shù)組二維數(shù)組拖拽功能
二維數(shù)組可以拖拽,但是不可以編輯+拖拽,如果想要實(shí)現(xiàn)編輯+拖拽,還是需要轉(zhuǎn)換成一維數(shù)組,本文給大家介紹react拖拽react-beautiful-dnd的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧2024-03-03
React創(chuàng)建組件的三種方式及其區(qū)別是什么
在React中,創(chuàng)建組件的三種主要方式是函數(shù)式組件、類(lèi)組件和使用React Hooks的函數(shù)式組件,本文就詳細(xì)的介紹一下如何使用,感興趣的可以了解一下2023-08-08
React組件化的一些額外知識(shí)點(diǎn)補(bǔ)充
React是一個(gè)用于構(gòu)建用戶界面的JavaScript庫(kù),下面這篇文章主要給大家介紹了關(guān)于React組件化的一些額外知識(shí)點(diǎn),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10

