如何在 IOS 的 react-native 中混淆代码 [英] How to obfuscate code in react-native for IOS

问题描述

我一直试图通过使用 react- 来混淆代码一段时间原生混淆转换器.一切看起来都不错，但是当我检查 bundle.js 时.我看不到任何混淆代码.

PS:目前，我只为 IOS 尝试.

这是我的配置文件.

metro.config.js

<预><代码>模块.出口 = {变压器:{babelTransformerPath: require.resolve('./transformer'),getTransformOptions: async() =>({转换: {实验导入支持:假，内联要求:假，},}),},};

transformer.js

const obfuscatingTransformer = require('react-native-obfuscating-transformer');module.exports = obfuscatingTransformer({上游变压器:需要('metro-react-native-babel-transformer')，enableInDevelopment: true,混淆器选项:{紧凑:真实，controlFlowFlattening: 真,controlFlowFlatteningThreshold: 0.75,死代码注入:真，死代码注入阈值:0.4，调试保护:假，调试保护间隔:假，禁用控制台输出:真，identifierNamesGenerator: '十六进制',日志:假，numbersToExpressions: 真,重命名全局:假，旋转字符串数组:真，自卫:真的，shuffleStringArray: 真,简化:真实，splitStrings: 真,splitStringsChunkLength: 10,字符串数组:真，stringArrayEncoding: ['base64'],stringArrayWrappersCount: 2,stringArrayWrappersChainedCalls: 真,stringArrayWrappersType: '变量',字符串数组阈值:0.75，变换对象键:真，unicodeEscapeSequence: 假，},});

解决方案

经过多次测试，我终于知道如何让它工作了.

我的 react 和 react 原生版本:

 "react": "16.9.0",反应原生":0.61.5"，

安装其他需要的依赖:

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

transformer.js

const obfuscatingTransformer = require("react-native-obfuscating-transformer")const 过滤器 = 文件名 =>{返回文件名.startsWith(src");};module.exports = obfuscatingTransformer({//此配置基于 https://github.com/javascript-obfuscator/javascript-obfuscator混淆器选项:{紧凑:真实，controlFlowFlattening: 假,死代码注入:假，调试保护:假，调试保护间隔:假，禁用控制台输出:真，identifierNamesGenerator: '十六进制',日志:假，重命名全局:假，旋转字符串数组:真，自卫:真的，shuffleStringArray: 真,splitStrings: 假，字符串数组:真，stringArrayEncoding: 假，字符串数组阈值:0.75，unicodeEscapeSequence: 假},上游变压器:需要('metro-react-native-babel-transformer')，发射混淆文件:假，enableInDevelopment: true,过滤器:过滤器，跟踪:真实})

metro.config.js

module.exports = {变压器:{getTransformOptions: async() =>({转换: {实验导入支持:假，内联要求:假，},}),babelTransformerPath: require.resolve("./transformer")//在这里添加transformer.js},};

注意:

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

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

I have been trying to obfuscate the code for a while by using react-native-obfuscating-transformer. Everything seems okay but when I check the bundle.js. I can't see any obfuscated code.

PS: Currently, I try only for IOS.

Here are my config files.

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,
    },
});

解决方案

I finally figured out how to make it work after several test.

my react and react native version:

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

install other dependencies needed:

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
  },
};

NOTE:

set emitObfuscatedFiles to true in obfuscatorOptions to emit the obfuscated versions of files alongside their originals, for comparison.

If you're building in release, you can also compare the generated index.android.bundle (located in \android\app\build\generated\assets\react\release) with and without using the react-native-obfuscating-transformer using online diff tool to see the difference

这篇关于如何在 IOS 的 react-native 中混淆代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！