混淆整个React原生应用程序，包括JavaScript代码

Question

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

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

下面是我的proguard-rules.pro文件（默认）：

# 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

Answer 1

由于您的React原生JavaScript代码构建在Android和iOS的原生代码之上，整个模糊处理过程将考虑所有三个代码库：

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

>

在android/app/文件夹中的build.gradle文件中更新发布配置：

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'])
        }
    }
}

启用ProGuard模糊处理，并相应地在Android/app/文件夹中的proguard-rules.pro文件中编辑规则。

下面的代码行需要注释掉（在行首添加#)：

#-dontobfuscate

在这个阶段，构建Android应用程序的发布版本应该包含模糊的Java代码。通过分析您的APK来检查它，您应该找到函数调用，如A、B，而不是它们的实际名称。

上面的代码引用自玛丽亚·科洛蒂安的媒体帖子。还可以从GitHub存储库中查看最新的默认React原生ProGuard配置。

从Android3.3测试版开始，可以使用一个更优化的模糊处理程序R8。

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

这将是模糊处理中最重要的部分，因为我们的实际代码是用JavaScript编写的。这里可以使用react-native-obfuscating-transformer npm包：

npm install react-native-obfuscating-transformer

在项目根目录的rn-cli.config.js中添加/更新CLI配置，Android和IOS文件夹位于该目录中。

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

如果该文件还不存在，请创建该文件。

在根目录中创建transformer.js文件，并指定适当的配置选项：

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

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

特别要注意模糊处理过程的范围，默认情况下，它只针对src/文件夹中的文件（默认情况下不包括node_modules）。

以上所述，混淆应用程序不会使其具有内在的安全性--尽管安全性和模糊性可能比前者更好，但在React本机应用程序中可以实现许多其他安全增强（如果不是需求的话）。这包括在安全存储中存储敏感信息（Android中的Keystore/iOS中的Keychain)，在适当的情况下实现证书钉扎，以及其他。

其他有用的链接：

通过Skip Hovsmith的证书钉扎在React Native中增强TLS