javascript - 阻止用户使用其Web浏览器中的“检查”来更改表单的表单值？(Preventing users from changing form values of a form using “inspect” in his web browser?)

Question

I am building an application based on node.js and using handlebars as view engine.

(我正在建立一个基于node.js的应用程序，并使用车把作为视图引擎。)

the problem is I have a form that when submitted it inserts data into the database.

(问题是我有一个表单，提交后会将数据插入数据库中。)

this forms passes some values that the user does not see, like the bookingAmount for example.

(此表单传递了用户看不到的一些值，例如bookingAmount。)

I currently use a hidden input field that contains the value for the booking which is passed to nodeJs through req.body.

(我目前使用一个隐藏的输入字段，其中包含预订的值，该值通过req.body传递给nodeJs。)

the problem is the user can open the "inspect element" in his browser and change this booking Amount before submiting the form !!

(问题是用户可以在提交浏览器之前在浏览器中打开“检查元素”并更改此预订金额！)

how can I prevent such thing from happening ?

(我怎样才能防止这种事情发生？)

code for the handlebars form (inside page bookingDetails.handlebars) :

(把手表格的代码（在页面内部bookingDetails.handlebars） ：)

<form action="/finish" method="POST" style="display: inline;">
    <input type="hidden" name="bookingId" value="{{data.bookingId}}">
    <input type="hidden" name="Id" value="{{data.user.userId}}">
    <input type="hidden" name="bookingAmount" value="{{data.bookingAmount}}">
    <button type="submit"  id="finish">Finish Tour</button>
</form>

the above data.XXXXX is passed on from nodeJs when the page loads by the below code:

(当页面通过以下代码加载时，将上述data.XXXXX从nodeJs传递：)

var bookingDetails=bookings.findOne({where:{bookingId: req.body.bookingId}, include: [{model: locations},{model: user}).then((bookingDetails)=>{
            res.render('tPages/bookingDetails',{data: bookingDetails})
        }) 

The same problem exists for some buttons on the page.

(页面上的某些按钮也存在相同的问题。)

the page contains buttons like edit , cancel and submit.

(该页面包含编辑，取消和提交之类的按钮。)

I want to make those buttons enabled or disabled depending on the booking status.

(我想根据预订状态启用或禁用这些按钮。)

I am using a script in the handlebars page to change the disabled property to true or false depending on the booking status.

(我正在使用车把页面中的脚本，根据预订状态将禁用的属性更改为true或false。)

still the user can change the "disabled" property in his browser and use the button, here is the script I use:

(仍然用户可以在其浏览器中更改“禁用”属性并使用按钮，这是我使用的脚本：)

<script>
    status='{{data.bookingStatus}}'
    if (status=='accepted'){
        document.getElementById("cancel").disabled = true;
    }else if (status=='pending'){
        document.getElementById("finish").disabled = true;
        document.getElementById("noshow").disabled = true;
    }else if (status=='finished' || status =='noshow' || status=='cancelled' || status=='rejected'){
        document.getElementById("cancel").disabled = true;
        document.getElementById("finish").disabled = true;
        document.getElementById("noshow").disabled = true;
    }
</script>

what is the solution for such issues ?

(这些问题的解决方案是什么？)

  ask by Ahmed Hani Kamel translate from so

Answer 1

Do Not Rely on user input(不依赖用户输入)

Even if you try hacks to disable the right click menu etc. these are easily cirumvented (I can just post the form information directly using cURL or similar).

(即使您尝试使用骇客功能来禁用右键单击菜单等，也很容易将其删除（我可以直接使用cURL或类似内容发布表单信息）。)

Validate on the server ALWAYS.

(始终在服务器上验证。)

If some items need to be disabled, make sure the same logic applies on the server and reject information that does not follow your business rules.

(如果需要禁用某些项目，请确保在服务器上应用相同的逻辑，并拒绝不遵循您的业务规则的信息。)

Also don't disable the context menu or try and prevent the browser doing things it is designed to do, this will only lead to other issues, frustrates users and provides you with little / no protection at all.

(另外，请勿禁用上下文菜单或尝试阻止浏览器执行其设计要执行的操作，这只会导致其他问题，使用户感到沮丧，并为您提供很少/根本没有保护。)