Confirgurando — Charles Proxy no React Native (android)

No artigo anterior falamos um pouco sobre o que é o Charles Proxy

Nesse artigo vamos mostrar como fazer a configuração do Charlinho no React Native

Conhecendo um pouco das configurações de rede do React Native

As configurações de rede no React são utilizadas como base o sistema operacional onde ele será compilado

Iniciando com o sistema Android, hoje temos como base de qualquer trabalho de rede o OkHttp3 com HttpClient, que é muito utilizado com Retrofit e também KTor, ambas fazem chamadas para api. (saiba mais)

Agora temos como base a classe OkHttp3 para operações de rede.

Quando a gente precisa criar algum tipo de configuração customizada ou de segurança, nós precisamos criar uma construção personalizada através do OkHttpClient.Builder, que fornece muitos tipos de configurações, como adicionar um novo Header, adicionar interceptors e até mesmo trabalhar na camada de segurança, fornecendo certificado TLS e aplicando TLS Pinning

Bom vamos lá. Para configurar o Charles Proxy precisamos adicionar um certificado no celular, esse certificado vai autorizar o Proxy a fazer o listener das chamadas (mas só acontece se habilitar no computador também)

Quando instalamos esse certificado no celular, ele vai ser configurado como certificado de usuário, onde indica que é um certificado fornecido pela própria pessoa e não pelo sistema.

Feito a instalação do certificado, precisamos autorizar o certificado no nosso aplicativo, existem várias formas de fazer isso.

A mais comum é configurar através do XML Security Config, porém essa forma não é aplicada pelo React Native, somente para a aplicação Nativa.

Para usarmos no React Native, precisamos usar um TrustManager, que vai autorizar o nosso certificado, nele podemos várias configurações, mas não é o caso.

Vamos configurar um gerente de autorização e aplica-lo na construção do OkHttp3

Vamos autorizar qualquer certificado de usuário instalado no celular e também não vamos verificar um host específico, para isso segue o código abaixo

private fun okHttpClientBuilder(): OkHttpClient.Builder {
    try {
        val trustAllCerts = arrayOf<TrustManager>(object : X509TrustManager {
            @Throws(CertificateException::class)
            override fun checkClientTrusted(chain: Array<java.security.cert.X509Certificate>, authType: String) {
            }

            @Throws(CertificateException::class)
            override fun checkServerTrusted(chain: Array<java.security.cert.X509Certificate>, authType: String) {
            }

            override fun getAcceptedIssuers(): Array<java.security.cert.X509Certificate> {
                return arrayOf()
            }
        })

        val sslContext = SSLContext.getInstance("SSL")
        sslContext.init(null, trustAllCerts, java.security.SecureRandom())
        val sslSocketFactory = sslContext.socketFactory

        val builder = OkHttpClient.Builder()
        builder.sslSocketFactory(sslSocketFactory, trustAllCerts[0] as X509TrustManager)
        builder.hostnameVerifier { _, _ -> true }

        return builder
    } catch (e: Exception) {
        throw RuntimeException(e)
    }
}

Nesse ponto, precisamos criar uma configuração OkHttp3 aceita pelo React Native, o próprio facebook fornece uma classe com.facebook.react.modules.network.OkHttpClientFactory

Precisamos configurar também o ReactCookieJarContainer que contém configurações utilizadas pelo React

fun clientFactory(): OkHttpClientFactory {
    return OkHttpClientFactory {
        okHttpClientBuilder()//builder of trust manager
            .cookieJar(ReactCookieJarContainer())
            .build()
    }
}

Quase pronto, agora precisamos aplica-lo na inicialização da nossa aplicação

Na nossa classe de aplicação, onde inicializamos o SoLoader, vamos adicionar uma nova linha, condicionando nosso método a ser chamado apenas em modo debug, para não ter falha de segurança liberando em produção

class Foo : Application(), ReactApplication {
...
override fun onCreate() {
    super.onCreate()
    SoLoader.init(this,  false)

    if(BuildConfig.DEBUG){
        OkHttpClientProvider.setOkHttpClientFactory(clientFactory())
    }
}
...
}

Nesse ponto, liberamos nossa aplicação em modo debug a aceitar o Charles Proxy

Agora vamos interceptar

Primeiro precisamos ir em configuração de rede do nosso celular e colocar o ip do proxy, que no caso é onde o charlinho vai estar instalado, que é o seu computador, e também adicionar a porta 8888

Pronto agora você consegue interceptar todas as chamadas que acontecem no seu celular

Show me the code: https://gist.github.com/charleston10/f943b3ed8274dae19beff9de52ba4976