How to obfuscate sensitive config files in React Native

Photo by Max Chen on Unsplash

How to obfuscate sensitive config files in React Native

ยท

1 min read

Even with hermes enabled in release build, there is case where APIs, tokens or keys exposed in index.android.bundle as readable strings, we definitely want to avoid it.

So here is a simple way to obfuscate such files:

1) Add javascript-obfuscator package to the project

yarn add --dev javascript-obfuscator

2) Copy the obfuscator config to the project directory, you can modify it as per your requirement too

3) Modify react-native release build script in package.json

"obfuscate": "cp secretConfig.js secretConfig.js.orig && yarn javascript-obfuscator secretConfig.js --output secretConfig.js --config obfuscator-config.js",
"restore_obf": "mv secretConfig.js.orig secretConfig.js",
"store_release": "yarn obfuscate && cd android && ./gradlew clean && ./gradlew bundleRelease && cd ../ && yarn restore_obf"

What are we doing ?

"obfuscate": "cp secretConfig.js secretConfig.js.orig && yarn javascript-obfuscator secretConfig.js --output secretConfig.js --config obfuscator-config.js",

Added obfuscate script to backup the original config file & obfuscate it using obfuscator config file.

"restore_obf": "mv secretConfig.js.orig secretConfig.js",

Added restore_obf script to restore the original config file (non-obfuscated file), which needs to be executed after building APK/AAB

"store_release": "yarn obfuscate && cd android && ./gradlew clean && ./gradlew bundleRelease && cd ../ && yarn restore_obf"

Modified release build script to include obfuscation

BEFORE image.png

AFTER image.png

Happy Coding ๐Ÿฅ‚

ย