Question

如何混淆我的本机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 Native JavaScript代码是基于Android和iOS的本机代码构建的，因此整个混淆过程将考虑所有三个代码库：

混淆Android的Java代码

幸运的是，您的项目已经包含Proguard混淆器，可以通过以下方式启用它：

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

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-rules.pro文件夹中的android/app/文件中启用ProGuard模糊处理并相应地编辑规则。

以下代码行需要注释掉（在行首添加#）：
```
#-dontobfuscate
```
在此阶段，构建Android应用的发行版应包含混淆的Java代码。通过分析APK进行检查，可以在其中找到a，b之类的函数调用，而不是其实际名称。

上面从Maria Korlotian's Medium post引用的代码。还要从GitHub存储库中检查latest default React Native ProGuard configuration。

从Android 3.3 Beta起，可以使用经过优化的R8混淆器。

混淆iOS的Objective-C代码

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

混淆JavaScript代码

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

将软件包添加到您的项目中

npm install react-native-obfuscating-transformer

在项目rn-cli.config.js的android和ios文件夹所在的根目录中添加/更新CLI配置。
```
module.exports = {
 getTransformModulePath() {
   return require.resolve("./transformer")
 },
}
```
创建此文件（如果尚不存在）。
还在根目录下创建transformer.js文件，并根据需要指定configuration options：
```
const obfuscatingTransformer = require("react-native-obfuscating-transformer");

module.exports = obfuscatingTransformer({
    /* Insert here any required configuration */
});
```
尤其要注意混淆过程的范围，该过程默认情况下仅针对src/文件夹中的文件（默认情况下不包括node_modules）。

具有上述所有内容，对您的应用进行混淆并不能使其获得固有的安全性-尽管安全性和可能比仅前者更好，但是还有许多其他安全性增强功能（如果不是要求的话）可以在React Native应用中实现这包括将敏感信息存储在安全存储中（在Android中为Keystore在iOS中为Keychain），在适当的情况下实现certificate pinning，以及其他。

其他有用的链接：

Secure Storage in React Native，作者Randy Coulman
Strengthen TLS in React Native through Certificate Pinning，由Skip Hovsmith

Answer 2

上述 @Siavas 的答案涵盖了大部分内容，但是Metro插件react-native-obfuscating-transformer似乎并没有使index.android.bundle变得晦涩，您可以尝试{{3 }}似乎工作正常。它也基于javascript-obfuscator。

您需要在metro.config.js

中包含以下配置

const jsoMetroPlugin = require("obfuscator-io-metro-plugin")(
  {
    // these option are obfuscation options from javascript-obfuscator
    compact: false,
    sourceMap: true,
    controlFlowFlattening: true,
    controlFlowFlatteningThreshold: 1,
    numbersToExpressions: true,
    simplify: true,
    shuffleStringArray: true,
    splitStrings: true,
    stringArrayThreshold: 1,
  },
  {
    runInDev: false /* optional */,
    logObfuscatedFiles: true /* optional generated files will be located at ./.jso */,
  }
);
 
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  ...jsoMetroPlugin,
};

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

2 个答案:

混淆Android的Java代码

混淆iOS的Objective-C代码

混淆JavaScript代码