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