Also what is the best way to hide the elements from the DOM so that the attacker won't be able to change the css property or html attribute in order to access the element. I know we can use React or Angular to develop website and it is easier to hide or display elements. But I want to know in pure HTML & JS what is the best way?
-
Are you asking how to stop someone going to their browser dev tools and fiddling about with the CSS and inspecting the HTML? You can't.– A HaworthSep 29, 2021 at 6:47
-
Yes, I was asking the same but if I use display: none in CSS to hide but someone can make display: block in chrome dev tools right? So, in order to avoid these flaw what is the best way to hide elements?– Vivek SSep 29, 2021 at 6:49
-
3Yes, and they can inspect the HTML. You can't hide stuff from the user if it's there they can inspect it. Only way is to not put it into the document in the first place. The frontend cannot be used for security or to hide code.– A HaworthSep 29, 2021 at 6:51
-
You cannot prevent anyone from using dev tools and inspect your site as well as edit your frontend (HTML, CSS and JavaScript) elements. For any security you should try to use backend because no one can see or edit your backend code.– Swapnil PrakashSep 29, 2021 at 9:04
-
OK thanks, I understood that front end cannot handle much of the security, that's why we use JWT for handling sessions or any other API calls.– Vivek SSep 29, 2021 at 10:15
2 Answers
Anyone can just use the browser console and find all elements with for example:
document.querySelectorAll('*');
It does not matter if elements are hidden with CSS.
Even if you encrypt your HTML you will have to decrypt it to show it to the browser. Then the above code still finds all the elements.
Any code you have can be deactivated by setting a breakpoint and rewriting it in-browser using the developer tools.
Even if you replace document.querySelectorAll
and all like them with an empty function, developers can still just add jQuery or any DOM querying engine and find your elements that way.
Any code you can use to hide or show elements can just be executed using the browser console if someone spends the time understanding your code.
How else would you debug or test it?
Angular, Vue etc. does remove elements from the DOM but you should never expect this to be a security feature! A hacker can easily set a breakpoint anywhere in your code, inspect API results from the Network panel, go into the components' code to find out what HTML they would be rendering and much more I haven't started to mention.
To implement security you want to only have in the browser what the user needs to see.
There is no way around it.
DOM, stylings, scripts, assets, etc. can always be accessed using developer tools.
As for the question in your question title:
style
attribute styles have a higher specificity than CSS from file (or style tags)- CSS from file (or style tags) with
!important
has higher specificity than styles from thestyle
attribute style
attribute styles with!important
have the highest specificty
So !important
just overrides specificity if you want to look at it that way. Other than that you should read about CSS Specificity.
Both are same. If you store your value from html hidden or css hide. Anyone can find out them.
So if you are using html , js & css and want to pass value as hidden than disable developer tool and shortkey to open it by this way you can protect your data or else use any encryption method for that.
-
1You cannot hide developer tools from a hacker. You can have a browser plugin which prevents JavaScript execution. Then set a breakpoint at the first line of JavaScript and remove the code which deactivates developer tools keyboard-shortcuts or right-clicking elements. In-Browser encryption does not work because HTML has to be decrypted to work in the browser. You can always right-click and inspect element to see the current DOM. Sep 29, 2021 at 11:44