javascript - How can I prevent a user using inspect element to enable a disabled element? - Stack Overflow

admin管理员组

文章数量:1304575

I have a button as follows:

<input type="submit" class="button" value="FooBar" name="FooBar" id="FooBar" disabled="disabled">

I am enabling this button only when certain parameters are met. To test whether it was secure, I pressed F12 (or right click -> Inspect Element) and edited out the text disabled="disabled". Doing this overrides my code and that is scary. How can I prevent someone from changing it in this manner?

I am using php and jquery in this page and using the latter to enable or disable the button. I have checked the jquery click function and it not only executes, but shows the button as not disabled. The alert below reads Disabled: false

$("#FooBar").click(function(){
    alert('Disabled: ' + $(this).is('[disabled=disabled]'));    
})

So how can I prevent a user from changing the button disabled state and thus overriding my logic?

I have a button as follows:

<input type="submit" class="button" value="FooBar" name="FooBar" id="FooBar" disabled="disabled">

I am enabling this button only when certain parameters are met. To test whether it was secure, I pressed F12 (or right click -> Inspect Element) and edited out the text disabled="disabled". Doing this overrides my code and that is scary. How can I prevent someone from changing it in this manner?

I am using php and jquery in this page and using the latter to enable or disable the button. I have checked the jquery click function and it not only executes, but shows the button as not disabled. The alert below reads Disabled: false

$("#FooBar").click(function(){
    alert('Disabled: ' + $(this).is('[disabled=disabled]'));    
})

So how can I prevent a user from changing the button disabled state and thus overriding my logic?

• javascript
• jquery
• security

Share Improve this question Follow asked Sep 10, 2017 at 14:47 ChiwdaChiwda 1,36488 gold badges3434 silver badges6060 bronze badges 8

• 2 you shouldn't rely on your html to handle logic, just use the disabled property to deliver the message to the user "this shall not happen" but don't do the same in your code, find a condition that you can validate to prevent the behavior fo that button. – lacripta Commented Sep 10, 2017 at 14:50
• I am doing that. But that code results in the enabling/disabling, which can be overridden by a user, which is my problem. – Chiwda Commented Sep 10, 2017 at 14:57
• 1 You can disable F12, right click, ctrl button etc. If the information being edited so sensitive that "it is scary" just validate server side. They can use tools like fiddler to make Http Requests that you don't desire. Don't rely on javascript. – adiga Commented Sep 10, 2017 at 14:58
• there is no way to prevent the user to fiddle with your code, after all is in their browser and they are free to do as they please with it. the only way to prevent any issues with users scouring your code is make your program idempotent, this way no matter what they do it wont affect it's behavior – lacripta Commented Sep 10, 2017 at 14:59
• I am evaluating server side but making changes based on user inputs. The only other choice is load another page (from the server) for every answer from the user. – Chiwda Commented Sep 10, 2017 at 15:00

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 2

You can disable the right-click by doing:

document.addEventListener('contextmenu', event => event.preventDefault());

but it is not remended. Why? It achieves nothing other than the annoying user

OR

Alternatively, a better approach is to recheck your validations in submit action and simply returns if it fails, in this case, if user inspects and changed the state of a button, the button stays idle and will not allow to proceed

$("#FooBar").click(function() {
    if (!this.acceptenceCriteria()) {
        return;
    }
    alert('Disabled: ' + $(this).is('[disabled=disabled]'));    
})

You can't stop people from using dev tools.

You can try a couple of tricks to disable right clicking (like the one below) which will stop some number of people but ultimately the solution to your problem is to use html and http properly.

$(document).bind("contextmenu",function(e) {
    e.preventDefault();
});

本文标签： javascriptHow can I prevent a user using inspect element to enable a disabled elementStack Overflow