How can I prevent a user using inspect element to enable a disabled element?

问题

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?

回答1:

You can disable the right-click by doing:

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

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

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]'));    
})

回答2:

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();
});

来源：https://stackoverflow.com/questions/46141963/how-can-i-prevent-a-user-using-inspect-element-to-enable-a-disabled-element

标签

javascript

jquery

security