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.
For further actions, you may consider blocking this person and/or reporting abuse
Read next
Is React-query out of date? This new favorite makes cross-component requests a breeze!
Eddie Kimpel -
Using Guard Clauses Instead of Try-Catch in Async/Await: A Clean Coding Technique for Readable and Maintainable Code 🦄🚀
muthu raja -
How to Use the Sui TypeScript SDK
Ukeje Chukwuemeriwo Goodness -
Build collapsible sidebars using just CSS
Yash Jain -
Top comments (14)
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.
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.
The only way to "secure" your code is obfuscate it as much as possible to make it unreadable.
In this way you hide only varibles names, not code.
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.
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.
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.
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.
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.
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.
1 : Use nextjs instead react and your code sensitive part can run on server side.
2 : Make minimalized code build without source maps.
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
Ultimately, you can't... but why would you want to, or feel the need to?
Uglify it, minify it, obfuscate it.
Security By Obscurity.
But you should never keep sensitive information in the frontend.