如何在 IOS 的 react-native 中混淆代码

Question

一段时间以来，我一直在尝试使用react-native-obfuscating-transformer 来混淆代码。一切似乎都很好，但是当我检查 bundle.js 时。我看不到任何混淆代码。

PS：目前我只尝试IOS。

这是我的配置文件。

metro.config.js

module.exports = {
    transformer: {
        babelTransformerPath: require.resolve('./transformer'),
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false,
            },
        }),
    },
};

transformer.js

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

module.exports = obfuscatingTransformer({
    upstreamTransformer: require('metro-react-native-babel-transformer'),
    enableInDevelopment: true,
    obfuscatorOptions: {
        compact: true,
        controlFlowFlattening: true,
        controlFlowFlatteningThreshold: 0.75,
        deadCodeInjection: true,
        deadCodeInjectionThreshold: 0.4,
        debugProtection: false,
        debugProtectionInterval: false,
        disableConsoleOutput: true,
        identifierNamesGenerator: 'hexadecimal',
        log: false,
        numbersToExpressions: true,
        renameGlobals: false,
        rotateStringArray: true,
        selfDefending: true,
        shuffleStringArray: true,
        simplify: true,
        splitStrings: true,
        splitStringsChunkLength: 10,
        stringArray: true,
        stringArrayEncoding: ['base64'],
        stringArrayWrappersCount: 2,
        stringArrayWrappersChainedCalls: true,
        stringArrayWrappersType: 'variable',
        stringArrayThreshold: 0.75,
        transformObjectKeys: true,
        unicodeEscapeSequence: false,
    },
});

Answer 1

经过多次测试，我终于想出了如何让它工作。

我的 react 和 react 原生版本：

 "react": "16.9.0",
 "react-native": "0.61.5",

安装所需的其他依赖项：

npm install babylon --save
npm install --save babel-traverse

transformer.js

const obfuscatingTransformer = require("react-native-obfuscating-transformer")
const filter = filename => { 
  return filename.startsWith("src");
};

module.exports = obfuscatingTransformer({
// this configuration is based on https://github.com/javascript-obfuscator/javascript-obfuscator
  obfuscatorOptions:{
    compact: true,
    controlFlowFlattening: false,
    deadCodeInjection: false,
    debugProtection: false,
    debugProtectionInterval: false,
    disableConsoleOutput: true,
    identifierNamesGenerator: 'hexadecimal',
    log: false,
    renameGlobals: false,
    rotateStringArray: true,
    selfDefending: true,
    shuffleStringArray: true,
    splitStrings: false,
    stringArray: true,
    stringArrayEncoding: false,
    stringArrayThreshold: 0.75,
    unicodeEscapeSequence: false
  },
  upstreamTransformer: require('metro-react-native-babel-transformer'),
  emitObfuscatedFiles: false,
  enableInDevelopment: true,
  filter: filter,
  trace: true
})

metro.config.js

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
    babelTransformerPath: require.resolve("./transformer")   // add here the transformer.js
  },
};

注意：

在 obfuscatorOptions 中将 emitObfuscatedFiles 设置为 true 以将文件的混淆版本与原始文件一起发出，以进行比较。

如果您在发布版本中构建，您还可以比较生成的 index.android.bundle（位于 \android\app\build\generated\assets\react\release）有和没有使用 react-native-obfuscating-transformer 使用在线 diff 工具查看差异

Answer 2

我无法用这种方法混淆我的 js 代码，但我想我设法用这个包做到了。我有兴趣听听你的意见。 https://www.npmjs.com/package/obfuscator-io-metro-plugin