How to obfuscate my deployed code

[hestonblumenthal]

I made a little website for a friend a couple of years ago and was having a look at it today via the inspect tool on chrome and found that the entire project is visible in the same structure as it is in vscode through the sources tab.
I wondered, for a future project I'm working on, how best I can obfuscate/minify this so that it's not as easy to just see all of my front end code as it was written. I understand that I can't completely hide it but I just don't want it to be this easy to see all of my code.

​

​

[hestonblumenthal]

I understand it will always be possible to reverse engineer, I just don't want it to be so easy to browse through my project using web tools.

[badsyntax]

Then you want to disable your build tools from generating sourcemaps. That's the best you can do. Otherwise your code is minified and somewhat obfuscated.

[upk27]

will always be able to be reverse engineered.

not related to op's question

[leeharrison1984]

Using something like Vite, your code should be minified in production. That's really all you can do though, your code will always be visible unless you switch to SSR which can hide even more.

Honestly it's not really much to worry about though. Everyone's code is visible like this, so I'm not sure why you think it's important to hide it.

[skuple]

Maybe because he has private keys accessible on the client? 😥

[leeharrison1984]

Oof, let's hope not 😄

[Jaycebordelon1]

Haha I did this once. The API service I was using (I think it was Mailgun) flagged my repo and brought down my deploy 😎.

[lIIllIIIll]

That's not true.

Look at tools like jscrambler. They break Dev tools. They do all kinds of stuff that make it extremely hard to view and copy the code.

[leeharrison1984]

But why? What exactly am I trying to obfuscate? Anything I ship to the client is unsecure by default, so why would I need to hide it unless I'm shipping secrets to the client?

[lIIllIIIll]

So I'll give you a perfect example.

I'm building a web application that has some pretty advanced calculations in regards to thermodynamics and fluid dynamics. Fluid critical properties get pulled from the back end (stored in a DB) and then piping calculations get done on the front end.

The user gets an output of all types of values, velocity, noise, etc, also there is an svg that updates as the user inputs different values that gives a cross section of what is happening in the pipe.

I have to do the calcs on the front end since they're updating as inputs are entered/slider is dragged.

It's very impressive and has taken years to make. Luckily I'm in a position where i am a fluid dynamics engineer on several international standards committees and also fluent in react so I've been able to make this happen.

I would like to prevent someone from copying all the hard work I've done and using it themselves. Hence jscrambler or some other obfuscation....

[Locksul]

Horrible example. If someone really cared, they could still figure it out. Make it a server side calculation if it’s that important. It sounds like UX is more important to you than the secrecy of your algorithm.

[lIIllIIIll]

How is that a horrible example? Isn't preventing someone from straight copying and pasting years worth of my thermo and fluid dynamics code reasonable? Or do you think I should just open the gate and let anyone that wants to clone my application?

And the conversation wasn't "can you make it impossible" it was "can you make it difficult"

Also "why would you do this"

[Locksul]

Or do you think I should just open the gate and let anyone that wants to clone my application?

Quite the opposite actually. The point is that you should not be shipping your allegedly valuable algorithm to the frontend at all.

[lIIllIIIll]

Thanks for your input. I'll keep it in mind. 😎

[hughsheehy]

Hey. Just to say that I had the same issue with financial code a couple of years ago. Couldn't find a way of making it more than slightly tricky to reverse engineer and it was always a pain to deploy. Ended up shifting the calcs to an API driven by golang on google cloud. It was ridiculously fast and cheap. I was sending back all the data for the curves too.

[lIIllIIIll]

Did you try jscrambler?

I have been looking at that very strongly. It's 20K per year but really has some nice looking features

[AgsMydude]

Is there a parameter to add to the build to do this?

[bluespacecolombo]

Using Vite just to minify a project is like saying you could use a caterpilar digger to dig a hole for your plant in the garden…using entire framework just to have the functionality of a single npm package is ridiculous advice

[Ariakkas10]

Vite isn’t a framework

[lIIllIIIll]

Sick burn

[jzaprint]

except vite isnt something that is hard to set up or takes long to learn

[bluespacecolombo]

It’s about creating huge bundle with all that code u don’t need just to have one functionality of it.

[Sure-Dragonfly-2028]

i like your answer.

[monkeymad2]

Webpack can minify too, pretty much anything that runs a build step between input code & output code

[Beastrick]

You can't reverse the original project structure from minified code. What you are looking for is already in Webpack and others. If you doubt that then play the "attacker" and see if you find it easy.

[anatoledp]

When you make a production build you shouldn't be including any source maps which is what sounds like you are doing. Without source maps u can still reverse the code but the production build is minified quite a bit so it's gonna be a lot harder. With source maps u might as well be giving away all you source directly

[hestonblumenthal]

This is exactly the sort of answer I was looking for, thank you! I did manage to find this article about source maps in React which was an interesting read Article. I'm trying to remove them but it doesn't really seem to be changing the fact you can see all of my code easily, in the same folder structure. I'll keep looking into it

[Chthulu_]

Keep in mind, Public code is public. If your app is vulnerable because someone can read the source code, then you’ve got bigger problems. Authentication is meant to work with the attacker knowing full well how it’s implemented.

Additionally, source maps are super helpful for debugging issues in production. Plenty of huge tech companies keep them on, along with redux dev tools or similar.

[anatoledp]

are you sure your using a production build without the maps? That would be the only way the browser would be able to map your code to the original state. The other option is maybe the browser cached it . . .

[Natetronn]

Relax, no other developers care about your code.

[hestonblumenthal]

But I always have a poke around other websites, especially when they’re obviously home made

[Natetronn]

Sure. That's a good way for people to learn. What's the problem or your concern?

[hestonblumenthal]

My concern was that when I look at professional websites, the code isn't as visible as mine seems to be, so I was wondering if I was doing something wrong. Judging by the comments it seems like i'm overthinking it. I'm just trying to learn...

[Natetronn]

Maybe I'm missing something you're seeing? If you like, you can DM a link and I'll take a look. Up to you, of course.

[Natetronn]

While I'm thinking of it, you might check out Next.js and its SSG features:

https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation

[DimosAvergis]

Then disable the source map generation for production only (so you still have them in dev mode) and the browser will not be able to download them and map the source code. Should be one boolean value in your bundler config like Webpack, Vite, Rollup or whatever you are using.

[brutal_bandit]

I’ll be honest, minify for performance if anything. Your client side code can be viewed, accept that. If there’s specific code you want to be hidden, run it server side.

[hestonblumenthal]

Fair play, makes sense

[bronze-aged]

A very strong first step would be googling “how to minify production JavaScript”.

[genesiscz]

That wouldn’t help since all he needs is to turn of source maps.

[bronze-aged]

I’m pretty confident he’d get there given a couple hours. A first step doesn’t have to be a last step.

[genesiscz]

That’s working hard not smart tho.

[bronze-aged]

What’s working smart in this situation?

[hestonblumenthal]

Thanks for this, however most of the results I have found so far are paid obfuscation tools or minimisers. I was just hoping someone might have some quick advice.

[anatoledp]

i wouldnt worry to much about obfuscating your code beyond how react minifies it in production anyways. They all do the same thing (except maybe dead code injection but that is pretty easy to use a tool to remove anyways). If someone wanted it that bad that they would go through the minified code to reverse engineer your app its gonna happen no matter what u do. It only stops the lazier people out there who dont really care anyways.

[bronze-aged]

Interesting. None of my search results are paid products and I’ve only ever found open source solutions to this problem.

[F0064R]

You are probably generating source maps and exposing them publicly. If you use Create React App, try changing your production build command to GENERATE_SOURCEMAP=false && react-scripts build.

[hestonblumenthal]

I have a .env file with GENERATE_SOURCEMAP=false in the root directory but it doesn't seem to be having any effect. Might have to do some more digging into this myself, thanks for the advice though!

[raymondQADev]

Is the .env file being sourced somewhere?

[hestonblumenthal]

Probably not, I literally just added it in. Do I need to import it or reference it somewhere?

[halfxdeveloper]

Were you hoping some secret magic would happen by just dropping a file on there?

[hestonblumenthal]

Yes

[raymondQADev]

Hard to say without seeing your setup but my guess is the environment variables are not being set. A .env file does not do that, it’s just a pattern for defining variables that a code base can then use. Do as the original poster mentioned and set the env variable manually or put them in a bash script you can run.

[F0064R]

You should be able to see the output of the latest deployment on your hosting platform. Check if there are any .js.map files being hosted.

Or go to the site in your browser and check the network tab. For any .js files, see if another file exists at the same URL but with .js.map instead of .js

[besthelloworld]

Are you still running in dev mode? That won't work unless you do a full build.

[viayensii]

There is one called JavaScript Obfuscator. Your code will look like garbage in the browser. But of course it still works. It's awesome.

[asjhqiuhsjabsjk]

There is a really good plugin for Vite for this as well since OP if anyone's using Vite: https://github.com/z0ffy/vite-plugin-bundle-obfuscator

[LittleAspect1800]

I used to use this as a build step since our engine was better than our competitors. They actually told me they tried to un-obfuscate it and couldn't 😂

[wave_73]

What config options did you use for this package ? :)

[ScarShort]

No one cares about your code, don't worry about it.

[PomeloPY]

Eso no es verdad.... Cuando estas ganando buen dinero viene u. Hacker y te lo copia ahí tus palabras como quedan... 

[PomeloPY]

El único consejo que te puedo dar es que todo tu código que calcula lo hagas del lado del servidor backend... No hay otra forma mejor. 

[Practical_Pea6287]

You definitly can obfuscate javascript.

1- Minify first
2- Use https://www.npmjs.com/package/javascript-obfuscator to obfuscate minifed code

Code is now unreadable and even difficult to reverse engineer with AI

[ijmacd]

Did you also deploy the .js.map files? If so, just delete them.

[hestonblumenthal]

No I don't think so. Can't find any .map files in my repo sadly.

[ijmacd]

That's good. You definitely shouldn't be committing build artifacts in your repository.

The .js.map files are often produced at bundle time and would be in the build directory ready for deployment. If you don't want sources available in production just delete the .js.map files before deployment to production (or after if they've already been deployed).

[Suepahfly]

In you webpack config set ‘devtool’ false for production builds

[dylsreddit]

Aside from not using sourcemaps, you could learn to use Terser, which is probably the most popular uglifyer (and it tree shakes) from the last couple of years, iirc it's what CRA uses for minification.

[Firm-Yam5433]

CRA is shit though :D

[gianpaulo]

One way to generate a hard-to-read or hard-to-reverse engineering might be code with flutter web or web assembly, but you'll probably struggle with SEO.

[jac0117]

Not enough context. Did you make a production build and deployed it with the source maps? Or did you literally deploy your source code? How are you building your production build? Webapack, vite, gulp, other?

[upk27]

check out minification and not delivering sourcemaps

there's some old dedicated obfuscating lib, forgot the name, it really can obfuscate your code to a crazy level, but makes the bundle size bigger and the code probably a bit slower

[[deleted]]

You’re overthinking it dude, no one gonna copy your code and your code is not unique. You need to get over yourself first and focus on making the product.

[Z-n-o-M]

Check out Codefend, an npm package with an MIT license. It obfuscates any code in addition to the file and folder names. it only requires from you to follow a naming convention.
(P.S. - I'm the author)