如何防止用户使用检查元素来启用禁用的元素？答案

【问题标题】：How can I prevent a user using inspect element to enable a disabled element?如何防止用户使用检查元素来启用禁用的元素？
【发布时间】：2018-02-18 21:13:39
【问题描述】：

我有一个按钮如下：

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

我仅在满足某些参数时才启用此按钮。为了测试它是否安全，我按下 F12（或右键单击 -> Inspect Element）并编辑掉文本 disabled="disabled"。这样做会覆盖我的代码，这很可怕。如何防止有人以这种方式更改它？

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

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

那么如何防止用户更改按钮禁用状态从而覆盖我的逻辑？

【问题讨论】：

您不应该依赖您的 html 来处理逻辑，只需使用 disabled 属性将消息传递给用户“这不会发生”，但不要在您的代码中做同样的事情，找到您可以验证以防止该按钮的行为的条件。
我正在这样做。但是该代码会导致启用/禁用，这可以被用户覆盖，这是我的问题。
您可以禁用 F12、右键单击、ctrl 按钮等。如果正在编辑的信息非常敏感，“这很可怕” 只需验证服务器端。他们可以使用 fiddler 之类的工具来发出您不想要的 Http 请求。不要依赖 javascript。
没有办法阻止用户摆弄你的代码，毕竟在他们的浏览器中，他们可以随意使用它。防止用户搜索您的代码出现任何问题的唯一方法是使您的程序具有幂等性，这样无论他们做什么都不会影响其行为
我正在评估服务器端，但会根据用户输入进行更改。唯一的其他选择是为用户的每个答案加载另一个页面（从服务器）。

标签： javascript jquery security

【解决方案1】：

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

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

但不推荐。为什么？除了烦人的用户，它什么也没有实现

或

另外，更好的方法是在提交操作中重新检查您的验证，如果失败则简单地返回，在这种情况下，如果用户检查并更改按钮的状态，按钮将保持空闲状态并且不允许继续

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

【讨论】：

如果用户也编辑[disabled=disabled] 部分怎么办？
人们仍然可以使用 ctrl shift 我对吗？

【解决方案2】：

您无法阻止人们使用开发工具。

您可以尝试一些技巧来禁用右键单击（如下所示），这会阻止一些人，但最终解决问题的方法是正确使用 html 和 http。

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

【讨论】：

请解释一下这种情况下“正确使用html和http”？