如何防止用户使用检查元素启用禁用元素?

问题描述:

我有一个按钮如下:

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

我仅在满足某些参数时才启用此按钮.为了测试它是否安全,我按 F12(或右键单击 -> Inspect Element)并编辑了文本 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?

我在此页面中使用 php 和 jquery,并使用后者来启用或禁用按钮.我检查了 jquery 单击功能,它不仅执行,而且将按钮显示为 not 禁用.下面的警报显示 Disabled: false

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?

您可以通过以下方式禁用右键单击:

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