React Native自定義Android的SSL證書鏈校驗
前言
雖然這次分享的內(nèi)容解決了本人的實際開發(fā)需求,但由于不是專職的Android開發(fā)工程師,涉及到的Android相關(guān)
內(nèi)容可能會存在錯誤
或者寫法不合理
,僅供參考,請多多指教。
本文示例基于:
React Native - 0.67.3
Android - 10+
不包括iOS
由于業(yè)務(wù)原因,需要在生產(chǎn)環(huán)境里面使用自簽發(fā)證書,那自然這個證書是無法通過Android證書鏈驗證的,為此需要自定義校驗規(guī)則。
本文分為兩部分,介紹了對HTTPS請求
和WebSocket
的處理,為方便展示,示例里面所采取的是不進(jìn)行任何判斷,直接返回true,相當(dāng)于直接繞過檢驗 ,請各位根據(jù)項目自身需求,自定義相關(guān)的校驗規(guī)則。
關(guān)于本文中頻繁提到的源碼編譯,這里也有不少心得,目前正在整理中,將在不久之后更新。
HTTPS請求
在搜索引擎上,有一些解決方案是修改React Native源碼里面的/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java
,然后進(jìn)行源碼編譯。
實際上其實是不需要進(jìn)行源碼編譯這么麻煩的,在NetworkingModule.java
同目錄的OkHttpClientProvider.java
中,能看到React Native本身是支持傳入自定義的OkHttpClientFactory
去創(chuàng)建NetworkingModule中的Client。
所以只需要以下幾步:
- 在
當(dāng)前React Native項目
中實現(xiàn)一個的OkHttpClientFactory
,用來自定義證書鏈校驗規(guī)則,文件可以放在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); //這里添加自定義相關(guān)的校驗規(guī)則 return builder.build(); } catch (Exception e) { Log.e(TAG, e.getMessage()); throw new RuntimeException(e); } } } ...
- 在
當(dāng)前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()); //增加這行代碼 ... } ... }
以上就能達(dá)到在React Naitve中自定義HTTPS請求證書鏈校驗的目的。
WebSocket
由于沒有在相關(guān)代碼中找到類似OkHttpClientProvider.java
中的 setOkHttpClientFactory
方法,所以我選擇了通過源碼編譯去實現(xiàn)。 思路和上文中提到的處理HTTPS請求類似:
- 修改
React Native源碼
里面的/ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.java
,定義一個自定義證書鏈校驗規(guī)則的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);//這里添加自定義相關(guā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,其余代碼無需修改 ... } ...
- 進(jìn)行源碼編譯,生成相關(guān)的aar文件。
以上就能達(dá)到在React Naitve中自定義WSS證書鏈校驗的目的。
源碼編譯真的很麻煩,如果各位有類似處理HTTPS請求那樣,能直接傳入自定義Factory的方法,倘若方便,請在評論區(qū)告知一下,不勝感激。
參考資料
React Native - How to Build from Source(源碼編譯)
以上就是React Native自定義Android的SSL證書鏈校驗的詳細(xì)內(nèi)容,更多關(guān)于React Native自定義Android SSL的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React服務(wù)端渲染和同構(gòu)的實現(xiàn)
本文主要介紹了React服務(wù)端渲染和同構(gòu)的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04react16.8.0以上MobX在hook中的使用方法詳解
這篇文章主要為大家介紹了react16.8.0以上MobX在hook中的使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程詳細(xì)講解
最近在寫 React Native 項目,調(diào)試應(yīng)用時發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢指示條區(qū)域不是透明的,看起來很難受。研究了一下這個問題,現(xiàn)在總結(jié)一下解決方案,這篇文章主要介紹了React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程2023-01-01