Can firebug or developer tools use to hack a web site? [closed]

Question

I was facing to an interesting issue when implementing some role specific feature in a web site.

It's something like, if the logged in user has Admin role privileges then a button (called Transfer) will be enabled and otherwise for other user it should be disabled (So then they can't click hence can't perform the transaction / or invoke the relevant logic to that)

At a glance it seems fairly straight forward UI validating kinda stuff. We just has to enable the button if the logged in user has the Admin privileges.

So after implementing that approach (working fine) , I was debugging the code using Chrome developer tools. I noticed that though the button is now disabled we can actually enable it by removing the disabled part using the tool.

Just try it with this simple fiddle

And then I can click on it and the functions get invoked. So basically it was not good approach. But fortunately there are service side validations also. But if not this can be a huge security vulnerability.

So basically doing an server / service / back-end validation will prevent something dangerous from happening. But since the person can actually click on it and at least he can try to invoke the methods it seems not nice :(

So , I would really like to know , How can we prevent these kind of situations.

okay here is my question in simple :

Is it good to have Disabled components at all?

Answer 1

"Don't" use disabled components in your View.
That's part of your business logic and should not appear in the DOM...

"But hey :)..."

Now, even it the element does not exists, nothing can stop a user to manually embed such element into your website.
You should always perform server-side checks to see it such user has the actual privileges to perform a specific action.

Sometimes disabled elements are used inside the UI to show the user:
"Hey, see this button? It's not for you unless you pay or blah blah",
but usually as a second-step/optional action element.

Sometimes entire forms are "visible" on websites but dimed-out / disabled.
Such use cases are i.e: Payment forms with steps, where the designer wants to make wisible to the user that he needs to fill in a previous form in order to "Activate" the second one and proceed with the payment etc... Cases are endless, but if a form exists on the website it's pure UI (View) and the Model should never accept values from the controller unless (as I've said) specified by the Business Logic.

---

Remember that Front-end Javascript is used just to inform and help the user trough intuitive interface systems. JS events should just be there to reflect what a user can and cannot.

Since JS can be bypassed by any tech-savvy user, On the back-end side, you need to rebuild a similar and stronger security logic, once again.

(!) Validate user inputs on front-end, but most importantly - in back-end.

---

Can firebug or developer tools use to hack a web site?

Directly?

• Yes
  • If the website back-end logic can be exploited by manipulating the View (source).
  • If you keep in the code that gets to the browser (in comments etc) sensitive informations.
• No
  • If a website does not allow XSS, has a strong back-end security.

Indirectly?

A malicious user could eventually ask a user to open console (tricking the user that Console is an actual website feature) and to send him (copy/paste) private information that are present in there, such as session keys, cookies, etc...