How to obfuscate code in react-native for IOS

Question

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

Hideous

Answer 1

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: ['base64'],
    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

Outnumber

Thanks for the very clear explanation. Code obfuscation looks like working well but app crashes. I got exaclty same error with this guy github.com/javascript-obfuscator/… – Acariasis

@HalilİbrahimÖzdoğan can you tell me your nodejs version and react-native-obfuscating-transformer version? – Outnumber

@HalilİbrahimÖzdoğan can you try to remove package-lock.json and completely reinstall all your node_modules and check? – Outnumber

I am grateful to you for being helpful. Removing package-lock.json and node_modules didn't fix the problem. But I changed forked the project and changed the version of javascript-obfuscator dependency. Right now, it's working well. Since your solution helped me, indeed. I am going to mark this answer. – Acariasis

Obfuscating src\screens\helloWorld.js error src\screens\helloWorld.js: function (prevType) { this.state.exprAllowed = false; if (prevType === types._let || prevType === types._c...<omitted>... } could not be cloned. Error: function (prevType) { this.state.exprAllowed = false; if (prevType === types._let || prevType === types._c...<omitted>... } could not be cloned. andy idea how to solve it ? – Downturn

@JayThummar I am also facing same error, have you got the solution ? – Monopetalous

@MuhammadNuman which offline diff tool can I use to compare the 2 index.android.bundle files please? – Dylan

@Dylan you can use beyondcompare tool for two file – Outnumber

Answer 2

I was not able to get my js code obfuscated with this method, but I think I managed to do it with this package. I am interested in hearing your opinions. https://www.npmjs.com/package/obfuscator-io-metro-plugin

Epanaphora

Basically everything @Muhammad Numan did. I think it might have not choosen the right folder to obfuscate (even though I filtered the folder), but I really am nor sure. The metro plugin works perfectly though :) – Epanaphora

Agree bro, this plugin is better check npmtrends.com/@heroai/… it has been updated last two months ago – Austrasia