DEV Community

How to secure our react website source code?

Gaurav Soni on June 23, 2022

In Developer tools, we all know that we can access any website source code in source tab...

So tell me how to secure that code in my live website.

Collapse
 
timtwiest profile image
Tim

Ultimately you cannot really 'secure' your HTML code in a way that it is impossible to read it with the Developer Tools because the client browser still has to be able to read it. You can try little things to make it more difficult, for example, obfuscation.

The only way to secure sensitive data is with a proper, back-end application that can interact with the sensitive data and deliver them to the front-end in a secure manner.

Collapse
 
hunghvu profile image
Hung Vu

You are not supposed to put or process any sensitive information in the front end. Your website source code is trivial to all users, so there is no way to secure them, thus you are approaching the wrong way.

This question can only be asked for the back end.

Collapse
 
intermundos profile image
intermundos

The only way to "secure" your code is obfuscate it as much as possible to make it unreadable.

Collapse
 
jchouse profile image
Sergii Syrkin

In this way you hide only varibles names, not code.

Collapse
 
intermundos profile image
intermundos

If you use Netlify, there is a plugin for code obfuscation, try to run and see yourself. It obfuscates everything, making it almost impossible to understand what it does.

Thread Thread
 
jchouse profile image
Sergii Syrkin

This is what I said. Code obfuscation does not hide the logic and the implementation is still available. And yes, any production code is obfuscated. This does not make it safe.

Thread Thread
 
intermundos profile image
intermundos

And yet you have no idea what I was writing about. Try it yourself and see.

For sure it does not make the code secure, but you will not be able to understand nor logic neither the implementation.

Thread Thread
 
jchouse profile image
Sergii Syrkin

What do you mean when you say try. I tried and I know exactly what I'm talking about. Are you familiar with reverse engineering? There everything is much more complicated than simple obfuscation. Moreover, JS as a language is much simpler than compiled languages. For example, the standard methods of the browser api and built-in objects are not obfuscated, which greatly simplifies the work.

Collapse
 
nombrekeff profile image
Keff

You can, though I would not recomment it... it would make it quite slow and in the end if the attacker has the motivation it's not difficult to deobfuscate.

Collapse
 
codebytesfl profile image
codebytesfl

You cannot stop people from viewing your frontend website source code. The browser needs to know the code to be able to display to the user. If you're worried about people stealing your html and stealing some idea, you can attempt to obfuscate code by making it difficult to read.

If you are trying to hide user data though, you shouldn't have that in the frontend to begin with. Any and All sensitive data should only be on a secured backend, and the frontend should query that data.

Collapse
 
pengeszikra profile image
Peter Vivo

1 : Use nextjs instead react and your code sensitive part can run on server side.
2 : Make minimalized code build without source maps.

Collapse
 
jeffrey125 profile image
Jeffrey Asilo

Just like the others commented here you can't really do anything about it you can try to obfuscate the code just like @codebytesfl said but are you willing to go that far just to release your website? But if the the personal information and anything that is a sensitive information that you want to secure then secure it on your backend and don't put it in your frontend.

If you want to know more about this you can watch a youtube video regarding on this: youtu.be/hOtZhNb4TKg

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Ultimately, you can't... but why would you want to, or feel the need to?

Collapse
 
liviufromendtest profile image
Liviu Lupei

Uglify it, minify it, obfuscate it.
Security By Obscurity.
But you should never keep sensitive information in the frontend.