如何防止客户端更改关键的 HTML 输入？ [复制]

Question

您可能知道，您可以在 Chrome 中使用 Inspect element 来修改您正在查看的网页，并且可能会弄乱您不打算更改的 radio 值（或类似值），@987654323 @ 输入等等。

例如：

<input type='radio' name='example' id='abcd' value='abcd'>
<input type='radio' name='example' id='efgh' value='efgh'>
<input type='text' name='username' id='username' required>

可以改成

<input type='radio' name='example' id='OTHER_ID' value='OTHER_VALUE'>
<input type='radio' name='example' id='OTHER_ID2' value='OTHER_VALUE2'>
<input type='text' name='username' id='username'>

如何防止这种情况发生？

Answer 1

您无法阻止用户使用Inspect element 对您的html 进行更改。

如果用户这样做并且由于该更改而导致您的网站无法正常运行，我认为这不是您的问题。

您应该做的是服务器端检查，因为在服务器上只有您可以访问，所以没有其他人会在那里弄乱您的代码。

对于此示例，您需要检查服务器是否收到username。如果不返回错误并且不要在数据库中保存任何内容。 或者检查您收到的收音机值是否被您接受，并检查您是否收到了所有您想要的密钥。与其他字段相同，请确保您也在服务器端进行所有检查，而不仅仅是客户端。

一些代码：

<?php

//Check if you receive a username
if(empty($_POST['username'])) {
  echo 'Username is empty'; exit;
}

//Check that the radio values are accepted.
if(!in_array($_POST['example'], ['abcd', 'efgh'])){
   echo 'Example radio has some bad values'; exit;
}

您需要调整代码取决于哪些是强制性的，哪些不是用户添加的，以及他们可以在哪里输入任何内容或某些特定类型。