react-native下安卓和iOS跳过https的ssl证书

作者: 以德扶人 | 来源:发表于2018-05-07 10:54 被阅读2135次

跳过fetch访问ssl限制

1 . iOS的解决办法:

RCTNetwork.xcodeproj - RCTHTTPRequestHandler.m
找到这句话#pragma mark - NSURLSession delegate
在这句话之后加入后面的方法:

(void)URLSession:(NSURLSession *)session didReceiveChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *credential))completionHandler
{
completionHandler(NSURLSessionAuthChallengeUseCredential, [NSURLCredential credentialForTrust:challenge.protectionSpace.serverTrust]);
}

2 . android方法:

android比较麻烦.
首先要配置Android源代码的全部编译,这一步我被坑了好多天

官方的编译环境要求如下，值得注意的是这里的NDK版本最好是r10e，亲测过其他两个版本的NDK并没有成功，因此这里最好是下载r10e版本的NDK。

Android SDK version 23 (编译SDK版本号在build.gradle中可以找到)
SDK build tools version 23.0.1(编译工具版本号在build.gradle中可以找到)
Android Support Repository >= 17
Android NDK r10e下载地址

将Gradle指向你的安卓SDK: 设置$ANDROID_SDK和$ANDORID_NDK为对应的目录，或者按照以下内容在react-native根目录下创建local.properties文件（注意：windows下需要使用反双斜杠）。

sdk.dir=指向android sdk目录的绝对路径  
ndk.dir=指向android ndk目录的绝对路径

例如：

ndk.dir=D\:\\android-ndk-r10e
sdk.dir=C\:\\Users\\AppData\\Local\\Android\\Sdk

当我们 react-native init [ProjectName] 的时候，工程node-modules/react-native/ReactAndroid的目录就包含了源码，因此我们可以直接让我们的应用工程引用这一个源码工程，因此这里我们直接运行一下命令初始化一个react native工程testapp

react-native init testapp

添加gradle依赖

(1) 在生成的React Native工程中，将android/build.gradle文件中添加gradle-download-task依赖。

dependencies { // gradle可以不替换，还是原来的版本 classpath 'com.android.tools.build:gradle:1.3.1' classpath 'de.undercouch:gradle-download-task:3.1.2' //新增加的内容 // 注意：不要把你的应用的依赖放在这里； // 它们应该放在各自模块的build.gradle文件中 }

(2) 添加:ReactAndroid项目，在android/settings.gradle中添加:ReactAndroid项目。

//包含ReactAndroid工程 include ':ReactAndroid' //指出ReactAndroid工程的地址 project(':ReactAndroid').projectDir = new File(rootProject.projectDir, '../node_modules/react-native/ReactAndroid')

(3) 修改你的android/app/build.gradle文件，使用:ReactAndroid替换预编译库。例如用compile project(':ReactAndroid'):替换compile 'com.facebook.react:react-native:+'

dependencies { compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:23.0.1" compile project(':ReactAndroid') //添加React-native项目 //compile "com.facebook.react:react-native:+" //注释掉原来的react-native引用 }

(4) 让第三方模块使用你的分支

如果你使用第三方的React Native模块，你需要重写它们的依赖以避免它们仍然打包官方的预编译库。否则当你编译时会报错-Error: more than one library with package name 'com.facebook.react'.（错误：有几个重名的'com.facebook.react'的包）

修改你的android/app/build.gradle文件，添加如下内容：

configurations.all {
    exclude group: 'com.facebook.react', module: 'react-native'
}

编译运行

在Android Studio欢迎页中选择Import project，随后选择应用所在的文件夹。
然后开始Run，这个过程需要下载200多M的文件然后才开始编译，编译快的可能几分钟，有时候甚至不一定成功。
在我编译的时候查看Gradle Console的时候发现一直卡在downloadBoost这个task上，

:ReactAndroid:createNativeDepsDirectories UP-TO-DATE
:ReactAndroid:downloadBoost
Download http://mirror.nienbo.com/boost/boost_1_57_0.zip

查看ReactAndroid/build.gradle里面的内容可以看到这个任务（如下）下载的是C++的boost库，文件大小接近105M，因此我们把 https://downloads.sourceforge.net/project/boost/boost/1.57.0/boost_1_57_0.zip 替换成 http://mirror.nienbo.com/boost/boost_1_57_0.zip 就会快很多。或者直接从官网地址下载并复制到ReactAndroid工程的build/downloads目录下，这样就会直接跳过downloadBoost这个task，编译速度就会快很多。
还有一种方法,就是直接下载
用gradle即使翻墙也很难访问github，所以建议直接把task内的地址放在浏览器里下载，这样的task有4个，分别是downloadBoost，downloadDoubleConversion，downloadFolly，downloadGlog。注意最后一个downloadJSCHeaders不能通过这种方式下载，正常用gradle下载也能成功

task downloadBoost(dependsOn: createNativeDepsDirectories, type: Download) { src 'https://downloads.sourceforge.net/project/boost/boost/1.57.0/boost_1_57_0.zip' onlyIfNewer true overwrite false dest new File(downloadsDir, 'boost_1_57_0.zip') }

clean与build 问题

当我们成功编译运行后，clean的时候会将我们之前下载的文件包括boost库文件删除掉，因此为了clean之后再次下载编译so库的问题，我们需要执行以下三个步骤。

1.将ReactAndroid/build/react-ndk 文件夹移动到ReactAndroid项目下也就是ReactAndroid/react-ndk目录下，这一个目录是编译生成的so文件。

2.将ReactAndroid/build.gradle里面的SourceSets.main里面的jniLibs.srcDir的目录从"$buildDir/react-ndk/exported"改为"react-ndk/exported"，这样就编译的时候就会去寻找ReactAndroid/react-ndk目录的so文件。

 sourceSets.main { jni.srcDirs = [] jniLibs.srcDir "react-ndk/exported" //so库目录 res.srcDirs = ['src/main/res/devsupport', 'src/main/res/shell', 'src/main/res/views/modal'] java { srcDirs = ['src/main/java', 'src/main/libraries/soloader/java', 'src/main/jni/first-party/fb/jni/java'] exclude 'com/facebook/react/processing' exclude 'com/facebook/react/module/processing' } }

3.将ReactAndroid/build.gradle里面编译so文件的task注释掉，并将clean依赖于cleanReactNdkLib的task也注视掉，这样clean的时候才不会出错。

//注释掉下面两个任务 /* tasks.withType(JavaCompile) { compileTask -> compileTask.dependsOn packageReactNdkLibs //开始编译前先进行ndk编译 } clean.dependsOn cleanReactNdkLib*/

这样clean之后再次build就不会重新进行ndk编译so文件，缩短编译的时间。

好了,下面进行源代码更改来访问https.
在node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java这个文件里做代码修改。就我目前知道的,react-native 0.46.0-0.54都行。不同版本的也许文件的位置会稍有不同。

所有的import的包都在这里

import android.net.Uri;
import android.util.Base64;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.GuardedAsyncTask;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.common.StandardCharsets;
import com.facebook.react.common.network.OkHttpCallUtil;
import com.facebook.react.module.annotations.ReactModule;
import com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter;
import java.io.IOException;
import java.io.InputStream;
import java.nio.charset.Charset;
import java.security.KeyManagementException;
import java.security.NoSuchAlgorithmException;
import java.security.SecureRandom;
import java.security.cert.CertificateException;
import java.security.cert.X509Certificate;
import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
import java.util.concurrent.TimeUnit;
import javax.annotation.Nullable;
import javax.net.ssl.HostnameVerifier;
import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLSession;
import javax.net.ssl.TrustManager;
import javax.net.ssl.X509TrustManager;
import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.CookieJar;
import okhttp3.Headers;
import okhttp3.Interceptor;
import okhttp3.JavaNetCookieJar;
import okhttp3.MediaType;
import okhttp3.MultipartBody;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;
import okhttp3.Response;
import okhttp3.ResponseBody;
import okio.ByteString;

添加一个获取SSLContext的方法：

private SSLContext getSSLContext() {
    X509TrustManager xtm = new X509TrustManager() {
      @Override
      public void checkClientTrusted(java.security.cert.X509Certificate[] chain, String authType)
          throws CertificateException {

      }

      @Override
      public void checkServerTrusted(java.security.cert.X509Certificate[] chain, String authType)
          throws CertificateException {

      }

      @Override
      public X509Certificate[] getAcceptedIssuers() {
        X509Certificate[] x509Certificates = new X509Certificate[0];
        return x509Certificates;
      }
    };

    SSLContext sslContext = null;
    try {
      sslContext = SSLContext.getInstance("SSL");

      sslContext.init(null, new TrustManager[]{xtm}, new SecureRandom());

    } catch (NoSuchAlgorithmException e) {
      e.printStackTrace();
    } catch (KeyManagementException e) {
      e.printStackTrace();
    }

    return sslContext;
  }

之后在包含了OkHttpClient的构造函数里添加一些代码：

/* package */ NetworkingModule(
      ReactApplicationContext reactContext,
      @Nullable String defaultUserAgent,
      OkHttpClient client,
      @Nullable List<NetworkInterceptorCreator> networkInterceptorCreators) {
    super(reactContext);

    if (networkInterceptorCreators != null) {
      // 略
      client = clientBuilder.build();
    }

    // 这是要添加的代码
    client = client.newBuilder().hostnameVerifier(new HostnameVerifier() {
      @Override
      public boolean verify(String hostname, SSLSession session) {
        return true;
      }
    }).sslSocketFactory(getSSLContext().getSocketFactory()).build();

    mClient = client;
    mCookieHandler = new ForwardingCookieHandler(reactContext);
    // 略
  }

如上,android的方法全部介绍完毕.

跳过webview访问ssl限制

iOS:
通过在AppDelegate.m中加上对NSURLRequest进行扩展加上忽略证书验证。

@implementation NSURLRequest (AllowAnyHTTPSCertificate)

+ (BOOL)allowsAnyHTTPSCertificateForHost:(NSString *)host
{
  return YES;
}

@end

Android:
路径:ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java

import android.net.http.SslError;
import android.webkit.SslErrorHandler;

@Override
    public boolean canOverrideExistingModule() {
      return true;
    }
    //设置webview绕过ssl
    @Override
    public void onReceivedSslError(WebView webView, SslErrorHandler handler, SslError error) {

      handler.proceed();
      super.onReceivedSslError(webView, handler, error);
    }

参考文章:
https://blog.csdn.net/meyin/article/details/73776548
https://blog.csdn.net/qq_16086969/article/details/53522980
https://www.cnblogs.com/air-liyan/p/6407011.html
https://stackoverflow.com/questions/40240321/how-can-i-implement-ssl-certificate-pinning-while-using-react-native/40334166#40334166
https://stackoverflow.com/questions/32892161/ignore-errors-for-self-signed-ssl-certs-using-the-fetch-api-in-a-reactnative-app
https://stackoverflow.com/questions/40240321/how-can-i-implement-ssl-certificate-pinning-while-using-react-native/40334166#40334166
https://blog.csdn.net/lmj623565791/article/details/48129405
https://blog.csdn.net/vv_bug/article/details/77100113
https://zhuanlan.zhihu.com/p/33033496
https://www.jianshu.com/p/5195666d1e30
https://zhuanlan.zhihu.com/p/34691507
https://blog.csdn.net/u014484863/article/details/51580557

react-native下安卓和iOS跳过https的ssl证书

1 . iOS的解决办法:

2 . android方法:

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React Native