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(...)
}

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(...)
}

• javascript
• reactjs
• security
• webpack

• Hello @docHoliday, maybe check here stackoverflow./questions/49123885/… – halilcakar Commented May 20, 2021 at 9:23
• I saw it, but it doesn't answer my question. I guess there isn't such a lib and I wonder why – docHoliday Commented May 20, 2021 at 10:05
• production code is usually already minified which is a nightmare to read anyhow – nathan hayfield Commented Jun 23, 2021 at 16:09
• CRA default deployment will obfuscate the code – Mordechai Commented Jun 24, 2021 at 20:32
• Maybe use webpack to do this. Can you check: stackoverflow./a/59162268/8660527 – Fiodorov Andrei Commented Jun 29, 2021 at 9:58

6 Answers 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!

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.

Is this library what you are looking for?

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

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/

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 ponent.

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.)

react-obfuscate

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

Basic steps are written in the repo documentation itself.

Jscrambler

Another tool that I find interesting is Jscrambler.

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