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 ?

Answer 1

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.