react-native-obfuscating-transformer icon indicating copy to clipboard operation
react-native-obfuscating-transformer copied to clipboard

Can't make it work

Open ramsestom opened this issue 6 years ago • 22 comments

Hi I am trying to use this module. I created the rn-cli.config.js and transformer.js file in my project root folder and kept the default obfuscatingTransformer options (So module.exports = obfuscatingTransformer({})). But this doesn't seem to work. The index.android.bundle file in the generated app-release.apk still remains unobfuscated (I performed a gradlew assembleRelease like usual to create the bundle before react-native run-android --variant=release) What am I doing wrong?

ramsestom avatar Mar 06 '18 00:03 ramsestom

Hi @ramsestom !

By default, this transformer only obfuscates files in your src directory, but leaves node_modules untouched. If you inspect the bundle, it may look unobfuscated for the most part, since such a large portion of it will come from node_modules. If your project-specific files are indeed also unobfuscated, I'm happy to offer more help.

ds300 avatar Mar 06 '18 14:03 ds300

I checked and my project-specific code is also unobfuscated in the bundle. Actually I am not sure that the rn-cli.config.js file is correctly checked by the packager because there seems to be issues with it: https://github.com/facebook/react-native/issues/12133 . Is there a simple way to check that the obfuscator is actually called? I am using RN version 0.53.3 (will try to update to 0.54). What version do you use?

ramsestom avatar Mar 06 '18 18:03 ramsestom

I have tested this with "react-native": "^0.55.2" and it seems to work okay.

Note that I didn't use gradlew assembleRelease but instead react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

tombailey avatar Apr 12 '18 11:04 tombailey

not work for me either, React-Native 0.55.4, no script obfuscated.

zenz avatar Jun 19 '18 10:06 zenz

No obfuscation as far as I can tell here.

Nantris avatar Mar 06 '19 18:03 Nantris

Same as us, no obfuscation on our specific code.

wangghon avatar Mar 07 '19 06:03 wangghon

same here

imelos avatar Mar 22 '19 15:03 imelos

same here :(

"react": "16.6.0-alpha.8af6728",
"react-native": "0.57.4",

did anyone of you found at least a workaround?

marcorm avatar Mar 25 '19 19:03 marcorm

same here...

These are my setting below.

    "react": "^16.5.0",
    "react-native": "0.57.8",
// transformer.js
const obfuscatingTransformer = require("react-native-obfuscating-transformer");
const typescriptTransformer = require("react-native-typescript-transformer");

module.exports = obfuscatingTransformer({
  upstreamTransformer: typescriptTransformer,
});
// rn-cli.config.js
module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  transformer: {
    babelTransformerPath: require.resolve("./transformer")
  },
};

i execute this command, but no diff are shown before no obfuscation.

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

horsewin avatar Apr 11 '19 04:04 horsewin

I have tested this with "react-native": "^0.55.2" and it seems to work okay.

Note that I didn't use gradlew assembleRelease but instead react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Can you please provide the steps you followed.

varunjithtk22 avatar Jun 06 '19 09:06 varunjithtk22

The same on 0.59.10. Tried the above method as well.

lorenc-tomasz avatar Jul 29 '19 15:07 lorenc-tomasz

The same on 0.59.10. Tried the above method as well.

With react-native hermes engine, I think you don't need obfuscator any more. it's compiled to bytecode.

zenz avatar Jul 29 '19 15:07 zenz

hermes engine just work in android,but what ios can do

lanjinglingxx avatar Aug 30 '19 06:08 lanjinglingxx

Hey guys I would suggest to use https://github.com/javascript-obfuscator/javascript-obfuscator directly on your bundle. It will make obfuscation more efficient in sense that it will obfuscate code so much more... But probably at cost - your app will be more slow.

Also note that for ios you will be able to get it work, but for android with hermes enabled I am not sure how to done it at the moment. Also note that with hermes it is true that result bundle is some kind of bytecode but big portion of strings are not "obfuscated" by hermes in our case...

ghost avatar Jan 14 '20 03:01 ghost

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

AustinZuniga avatar Mar 06 '20 03:03 AustinZuniga

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

I am getting this error: error ObfuscatorFolder/ConstantData.js: The number of constructor arguments in the derived class t must be >= than the number of constructor arguments of its base class. Run CLI with --verbose flag for more details.

getTargets (/Users/apple/Desktop/DemoObfuscateDemo/node_modules/react-native-obfuscating-transformer/node_modules/inversify/lib/planning/reflection_utils.js:32:15) at Object.getDependencies (/Users/apple/Desktop/DemoObfuscateDemo/node_modules/react-native-obfuscating-transformer/node_modules/inversify/lib/planning/reflection_utils.js:10:19) at /Users/apple/Desktop/DemoObfuscateDemo/node_modules/react-native-obfuscating-transformer/node_modules/inversify/lib/planning/planner.js:106:51 at Array.forEach ()

rohitmodi12 avatar May 19 '20 07:05 rohitmodi12

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

I am getting this error: error ObfuscatorFolder/ConstantData.js: The number of constructor arguments in the derived class t must be >= than the number of constructor arguments of its base class. Run CLI with --verbose flag for more details.

getTargets (/Users/apple/Desktop/DemoObfuscateDemo/node_modules/react-native-obfuscating-transformer/node_modules/inversify/lib/planning/reflection_utils.js:32:15) at Object.getDependencies (/Users/apple/Desktop/DemoObfuscateDemo/node_modules/react-native-obfuscating-transformer/node_modules/inversify/lib/planning/reflection_utils.js:10:19) at /Users/apple/Desktop/DemoObfuscateDemo/node_modules/react-native-obfuscating-transformer/node_modules/inversify/lib/planning/planner.js:106:51 at Array.forEach ()

any solution for this ?

fesoares avatar Jun 25 '20 13:06 fesoares

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

I am getting this error: error ObfuscatorFolder/ConstantData.js: The number of constructor arguments in the derived class t must be >= than the number of constructor arguments of its base class. Run CLI with --verbose flag for more details. getTargets (/Users/apple/Desktop/DemoObfuscateDemo/node_modules/react-native-obfuscating-transformer/node_modules/inversify/lib/planning/reflection_utils.js:32:15) at Object.getDependencies (/Users/apple/Desktop/DemoObfuscateDemo/node_modules/react-native-obfuscating-transformer/node_modules/inversify/lib/planning/reflection_utils.js:10:19) at /Users/apple/Desktop/DemoObfuscateDemo/node_modules/react-native-obfuscating-transformer/node_modules/inversify/lib/planning/planner.js:106:51 at Array.forEach ()

any solution for this ?

same issue here, it seems to work on 99% of my source files, but throws on (at least) one of my components.

quantjamespecutus avatar Aug 26 '20 02:08 quantjamespecutus

@fesoares you need to use javascript-obfuscator version 1.1.0 or upper if you use yarn just add "resolutions": { "javascript-obfuscator": "^1.1.0" }, to your package.json or you can make a patch for this outdated package

MouhcineFD avatar Sep 01 '20 13:09 MouhcineFD

not work for me either, React-Native 0.59.5, no script obfuscated. follow the tutorial exactly

2linziyi2 avatar Nov 02 '20 03:11 2linziyi2

this plugin just dont work.

adamalexander avatar Nov 05 '20 18:11 adamalexander

try this https://www.npmjs.com/package/obfuscator-io-metro-plugin

whoami-shubham avatar Nov 23 '20 03:11 whoami-shubham