混淆整个 React Native 应用程序，包括 JavaScript 代码 [英] Obfuscate entire React Native app including JavaScript code

问题描述

如何混淆我的 react-native JS 代码?我在 build.gradle 文件中设置了以下内容:

How to obfuscate my react-native JS code? I have set the following in my build.gradle file:

release {
      minifyEnabled true
      proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
 }

这是我的 proguard-rules.pro 文件(默认):

Here is my proguard-rules.pro file (default):

# Add project specific ProGuard rules here.
# By default, the flags in this file are appended to flags specified
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
# You can edit the include path and order by changing the proguardFiles
# directive in build.gradle.
#
# For more details, see
#   http://developer.android.com/guide/developing/tools/proguard.html

# Add any project specific keep options here:

# If your project uses WebView with JS, uncomment the following
# and specify the fully qualified class name to the JavaScript interface
# class:
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
#   public *;
#}

但是在解压 apk 之后我仍然可以找到我的 JS 组件名称、变量和 url

But still after unzipping the apk I can find my JS components name, variables and url's

推荐答案

由于您的 React Native JavaScript 代码是基于 Android 和 iOS 的本机代码构建的，因此整个混淆过程将考虑所有三个代码库:

As your React Native JavaScript code is built upon native code for Android and iOS, an entire obfuscation process would consider all three codebases:

幸运的是，您的项目已经包含 Proguard 混淆器，可以按如下方式启用:

Fortunately your project already includes the Proguard obfuscator, which can be enabled as following:

1. 更新位于 android/app/ 文件夹中的 build.gradle 文件中的发布配置:

1. Update your release configuration in the build.gradle file located in android/app/ folder:

def enableProguardInReleaseBuilds = true

android {
    // other config omitted for brevity
    buildTypes {
        release {
            debuggable false
            shrinkResources enableProguardInReleaseBuilds
            zipAlignEnabled enableProguardInReleaseBuilds
            minifyEnabled enableProguardInReleaseBuilds
            useProguard enableProguardInReleaseBuilds
            setProguardFiles([getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'])
        }
    }
}

在位于 android/app/ 文件夹中的 proguard-rules.pro 文件中启用 ProGuard 混淆并相应地编辑规则.

Enable ProGuard obfuscation and edit rules accordingly in proguard-rules.pro file located in android/app/ folder.

下面这行代码需要注释掉(在行首添加#):

The following line of code needs to be commented out (add # at beginning of line):

#-dontobfuscate

在此阶段，构建 Android 应用的发布版本应包含经过混淆处理的 Java 代码.通过分析您的 APK 来检查它，您应该在其中找到诸如 a、b 之类的函数调用，而不是它们的实际名称.

At this stage building the release version of your Android app should contain obfuscated Java code. Check it by analysing your APK, where you should find function calls such as a, b instead of the their actual names.

以上代码引用自 Maria Korlotian 的媒体帖子.还要检查 最新的默认 React Native ProGuard 配置来自GitHub 存储库.

Code above referenced from Maria Korlotian's Medium post. Check also latest default React Native ProGuard configuration from GitHub repository.

从 Android 3.3 测试版开始，一个更优化的混淆器叫做 R8 可以使用.

From Android 3.3 beta onwards, a more optimised obfuscator called R8 can be used.

iOS 项目中没有内置库会混淆您的代码，因此必须使用外部包.PPiOS-Rename 和 ObjC-Obfuscator 是这里的两个选项.详细文档可以在他们的 GitHub 存储库中找到.

There is no built-in library in the iOS project that will obfuscate your code, therefore an external package has to be used. PPiOS-Rename and ObjC-Obfuscator are two options here. The detailed documentation can be found in their GitHub repositories.

这将是混淆中最重要的部分，因为我们的实际代码是用 JavaScript 编写的.react-native-obfuscating-transformer npm 包可以在这里使用:

This would be the most important part of the obfuscation as the our actual code is written in JavaScript. The react-native-obfuscating-transformer npm package can be used here:

1. 将包添加到您的项目

1. Add the package to your project

npm install react-native-obfuscating-transformer

在rn-cli.config.js 位于项目的根目录，其中 android 和 ios 文件夹所在.

module.exports = {
 getTransformModulePath() {
   return require.resolve("./transformer")
 },
}

如果该文件尚不存在，则创建该文件.

Create this file if it does not exist yet.

也在根目录创建 transformer.js 文件并指定 配置选项 视情况而定:

Create the transformer.js file also at the root and specify configuration options as appropriate:

const obfuscatingTransformer = require("react-native-obfuscating-transformer");

module.exports = obfuscatingTransformer({
    /* Insert here any required configuration */
});

特别注意混淆过程的范围，默认情况下它仅针对 src/ 文件夹中的文件(默认情况下排除 node_modules).

Pay attention especially to the scope of the obfuscation process, which by default targets only files in src/ folder (node_modules is excluded by default).

<小时>

综上所述，混淆您的应用程序并不会使其具有内在的安全性——尽管安全性和模糊性可能比仅前者更好，但还有许多其他安全增强功能(如果不是要求)可以在 React Native 应用程序中实现.这包括将敏感信息存储在安全存储中(Keystore 在 Android/钥匙串 在 iOS 中)，实现 证书固定(如果适用)和其他.

---

Having all the above stated, obfuscating your app will not make it inherently secured – although security and obscurity can be better than only the former, there are many other security enhancements (if not requirements) that can be implemented in a React Native app. This includes storing sensitive information in secure storage (Keystore in Android / Keychain in iOS), implementing certificate pinning if appropriate, and others.

其他有用的链接:

• React Native 中的安全存储 作者:兰迪·库尔曼

通过证书加强 React Native 中的 TLS固定作者:Skip Hovsmith

Strengthen TLS in React Native through Certificate Pinning by Skip Hovsmith

这篇关于混淆整个 React Native 应用程序，包括 JavaScript 代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！