如何防止客户端更改 HTML 中的数据属性？答案

【问题标题】：how to prevent client-side change data-attributes in HTML?如何防止客户端更改 HTML 中的数据属性？
【发布时间】：2016-03-27 02:23:16
【问题描述】：

我有列表项：

<li class='pick' data-id='1'>1</li>
<li class='pick' data-id='2'>2</li>
<li class='pick' data-id='3'>3</li>
<li class='pick' data-id='4'>4</li>

<script type="text/javascript">
    $(document).on('click', '.pick', function(){
        item = $(this).attr('data-id');
        //add item to Cookie
    });
</script>

但是如果客户端从浏览器“检查代码”中编辑或添加新元素：

<li class='pick' data-id='1'>1111111</li>
<li class='pick' data-id='9999999'>unknown</li>
...

现在，我的 cookie 乱七八糟了。

有没有办法获取原始数据，或者我必须在添加到 cookie 之前在服务器端进行验证？

我也在寻找其他方法，类似情况的最佳实践。谢谢，

【问题讨论】：

嗨，欢迎来到 SO。请添加有关您存储的数据类型的更多详细信息，以便获得更好的答案。

标签： javascript html validation security client-side

【解决方案1】：

一般来说，所有客户端数据都可以由用户操作。这是多人游戏和其他类型的网络任务中的常见问题。考虑一个定期向主服务器报告其位置的游戏客户端。很容易看出这个客户端是如何被黑的，以便向服务器发送虚假位置，并导致“传送”或“速度黑客”。

由于这些原因，任何对应用程序安全至关重要的数据都应始终在服务器端进行验证。

因此，在游戏示例中，我们不会定期发送位置，而是将游戏设计为发送玩家输入，然后服务器将根据最后已知的位置和输入计算新位置（即。forward），以及一大堆其他技巧。

【讨论】：