Is display:none safe?

Question

I know this is a fundamental question and might be too simple but..

I am hiding critical buttons that do critical things based on user data.

If i read a user's data and realized he should not have a certain button (say he did not pay), then i hide it on css :

.hidden{
display:none;
}

This class is added on html. ( is that makes a difference in security?)

Is there anyway for a hacker to catch this button and "click" it ?

Do i need to add another layer of security onClick ?

hiding the button is not safer, since the hacker can know the frontend hidden button easily. so you should prefer to control this from backend — Rishab, Aug 17 '19 at 05:53
`display: none` by itself is definitely insufficient. You need to handle this on the back-end too. — JoshG, Aug 17 '19 at 06:00
thanks all, but just to understand - what could he do ? he can not unhide it right ? he can not manipulate my js and click it right ? so for example what ? — hkrly, Aug 17 '19 at 06:09
you have to handle it in your back-end (code) for better security — Majid Azarniush, Aug 17 '19 at 06:21
@hkrly - yes anyone can unhide something simply by opening the web console in their browser and changing the css. It would be very easy to click. — But those new buttons though.., Aug 17 '19 at 06:34

score 10 · Accepted Answer · answered Aug 17 '19 at 05:58

10

The display: none; will make that element not visible on the browser. However, it is still present in the DOM, if a user goes and inspects the website, the button's HTML code and onClick codes will be there in the DOM.

This CSS property is not suitable to implement security features, its good just to implement the visibility changes a user might expect to see.

The security parts of the business logic must be implemented in the backend code. This way a hacker cannot do invoke the onclicks and do any unwanted API calls.

answered Aug 17 '19 at 05:58

Sylens

1,097
8
31

how can a hacker invoke my click events on js ? (sorry if that is a stupid question) – hkrly Aug 17 '19 at 06:10
1

any JS function can be executed from the developer console. It might take some work to get that piece of code loaded into the callStack. but after the context of the function is loaded, its pretty much just writing the name of the function and pressing enter, to minize these threats, follow this thread https://stackoverflow.com/questions/19235872/how-to-disable-javascript-function-calls-from-the-browser-console – Sylens Aug 17 '19 at 06:16
even if its a https site ? i thought you can see the code but can not change it because encryption – hkrly Aug 17 '19 at 06:43
1

HTTPs offers bi-directional encryption using SSL or TLS, and that is great for MITM attacks. Once the data is delivered to the browser, it is no longer encrypted, the encryption is only there during the data transportation. You might want to take a look at XSS attacks as well. – Sylens Aug 17 '19 at 06:53
Thanks a lot. you helped me. Is there any article about the simple basic attacks and how to protect against them - or what NOT to do ? – hkrly Aug 17 '19 at 07:03
This articles points out the most common issues: https://www.shopify.com/partners/blog/web-security-2018 This site has almost all the types of attacks possible, its good to know at least some of them: https://www.owasp.org/index.php/Category:Attack – Sylens Aug 17 '19 at 07:14

score 2 · Answer 2 · answered Aug 17 '19 at 06:05

No. Anything which exists on the front-end is not secure.

You should implement any feature or validation with a back-end piece of code that is not run on the user's local device that instead validates the code.

For example, hiding a button, performing validation or doing anything with security should be implemented on the back-end, you can always hide these elements on the front-end, but don't rely on people just using your user interface for interacting with your application.

Adding in verification on JavaScript can help users, but won't help with anyone accessing anything they shouldn't (for example, they could just find out the URL you are using and send a request to it directly instead).

Ritesh Khandekar · Answer 3 · 2019-08-17T12:22:53.237

1

The simple answer is No

Everyone can see your <button> from page inspect tools.

So this way you can only hide button from website, not from DOM.

Try to hide it by Server side code like PHP or whatever you are using.

edited Aug 17 '19 at 12:22

answered Aug 17 '19 at 06:17

Ritesh Khandekar

3,885
3
15
30

score 0 · Answer 4 · answered Aug 17 '19 at 06:57

I know there's already an accepted answer to this question. But just to demonstrate how trivial it is for someone to "unhide" a button using display: none, consider the following example:

In the snippet below, I have a text input where you can type arbitrary JavaScript. Think of it like typing JavaScript into the console.
I also have a hidden button that you can't see when you first run the snippet. It is hidden using display: none.
Click "Run Snippet", then in the text input type (or copy/paste) this code: document.getElementById("hiddenButton").style.display = "inline"
The hidden button should now appear next to the "Run Code" button.

$("#submit").on("click", function () {
  eval($("#js").val());
});

#hiddenButton {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Enter some JavaScript:
<input id="js" type="text"/>
<button id="submit">Run Code</button>
<button id="hiddenButton">Hidden Button!</button>

But even more so, a user doesn't even have to "unhide" the button to click it. They could just simulate a click of the button using:

document.getElementById("hiddenButton").click();

So, if they view the document source, and see that the button exists but is hidden, they can still simulate a click event on the button.

The fact that the site is served over SSL doesn't matter. SSL protects data in transit. A button on a page is data at rest. StackOverflow is an HTTPS site, yet you can still execute the code I discuss above.

score 0 · Answer 5 · answered Aug 17 '19 at 07:00

Yes. You can keep hiding your button with plain CSS. You also need a new layer of security in your backend.

You should not handle user action authorization in frontend. You can continue hiding your button with CSS but you need to safeguard the action that such button can perform in the backend so that only those authorized are allowed to perform the action. So even someone can fabricate the button action, the backend would block it the author is not authorized by your system to perform the action.

score 0 · Answer 6 · answered Aug 17 '19 at 07:29

0

You May Use

Width:0; & Opacity:0;

instead of display:none;

answered Aug 17 '19 at 07:29

Furqan Anwar

45
5

score 0 · Answer 7 · answered Aug 17 '19 at 07:30

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

For example:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Replacing [style-tag-value] with display:none results in:

test |   | test

Replacing [style-tag-value] with visibility:hidden results in:

test |                        | test

Is display:none safe?

7 Answers7