Obscurify react code in production by automatically changing all the function and variable names

Question

Are there any libs that help obscurify a react build for production?

Something like:

const MyComp = () = > {
 const {propa, propb} = useMyfunc()
 return(...)
}

to

const xyz = () = > {
 const {yxz, zyx} = zzz()
 return(...)
}

Answer 1

The right choice would be Terser. it is availble along with webpack too (terser-webpack-plugin) for ES6+.

uglify-es is no longer maintained and uglify-js does not support ES6+.

You can refer to benchmarks for different packages from this article.

Answer 2

Is this library what you are looking for?

Answer 3

UglifyJS has options to mangle (obscurify) names:

Sample input:

const MyComp = function() {
const {propa, propb} = useMyfunc()
    return(1)
}

Sample output:

const n=function(){const{propa:n,propb:o}=useMyfunc();return 1};

Try it yourself: https://www.uglifyjs.net/

useMyfunc cannot be mangled unless the function definition is included (otherwise the function call would fail.) Similarly, mangling top-level globals like MyComp may break anything that uses that component.

If you bundle all your React code into a single file before mangling, it should work because all the references will be mangled to correctly matching names.

React already uses a minifier like UglifyJS, so you may be able to just modify some configuration files. Note source maps will undermine any mangling, so they should be disabled. (I think React is more interested in the smaller JS files than obscuring code.)

Answer 4

Have you ever try this package? this is a very professional package for obfuscate js codes which convert your code:

const MyComp = () = > {
const {propa, propb} = useMyfunc()
return(...)
}

to this:

const MyComp=()=>{const {propa:_0xa95d6e,propb:_0xfaabf6}=useMyfunc();return _0xa95d6e+_0xfaabf6;};

Answer 5

react-obfuscate

There is one npm repository that takes care of react code obfuscation. Below is the link for the same - https://www.npmjs.com/package/react-obfuscate

Basic steps are written in the repo documentation itself.

Jscrambler

Another tool that I find interesting is Jscrambler.

https://blog.jscrambler.com/protecting-your-react-js-source-code-with-jscrambler/

Answer 6

Complementing Ashwin R's response...

As pointed out, Terser is a good choice for doing it.

React uses some form of UglifyJS to minify your code on build, but in order to obfuscate variables and function names I did the following:

Instructions:

1° - Install Terser

npm install terser

2° - Modify package.json:

    "terser": "terser ./build/static/js/*.js -c -m --mangle-props regex=/_$/",
    "build": "react-scripts build && npm run terser"

That seems to have worked for me; hopefully it does for you as well!