how to prevent client-side change data-attributes in HTML?

Question

I have list item:

<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>

But if client-side edit or add new element from browser 'inspect code':

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

Now, my cookie is mess.

Are there any way to get original data, Or I must validate in server-side before add to cookie ?

I'm also looking for any another way, best practice for similar cases. Thanks,

Answer 1

In general, all client-side data can be manipulated by the user. This is a common problem in multiplayer gaming and other sort of networked tasks. Consider a gaming client which periodically reports its position to the master server. It's easy to see how this client could be hacked , in order to send false positions to the server, and result in "teleporting" or "speed hacks".

For these reasons, any data which is critical to the security of your application, should always be validated on the server-side.

So in the game example, instead of sending the position periodically, we would design the game to instead send the players input, and the server would calculate the new position, based on the last known position and the input (ie. forward ), plus a whole slew of other tricks.