使 HTML 表单数据不可更改，但仍然可以发布

Question

我有一个计算总数量和价格的 HTML 表单。我可以将此总数放入要提交的输入字段中。但是，我不希望用户能够更改它。如果我把它放在一个 div 中并显示它，它不会与表单一起提交。

如何在不让用户更改的情况下显示总数并提交它？

我可能在这里遗漏了一些基本的东西。任何帮助表示赞赏。

Answer 1

如果您不想要安全性（通过防篡改），请使用readonly属性：

HTML5

<input type="text" value="MY_DATE" readonly>

HTML4

<input type="text" value="MY_DATE" readonly="readonly" />

该type="text"可以省略，但我个人认为它有助于开发新的看什么类型的输入乍看。

您最好的选择（为了适当的安全性）是加密或签署数据并将其作为隐藏的表单元素发送。然后，一旦它返回到服务器，您可以对其进行解密（以继续使用它）或检查签名以确保它没有被篡改。

然后从前端的角度来看，您可以使数据不是输入（或只读），然后您应该是金。当它在隐藏元素中提供 id 并对其进行签名以确保不被篡改时，该技术被诸如 CakePHP 之类的 Web 框架大量使用。

服务器

signed = sha(date, salt);

前端

input[type="hidden"].value = signed;
input[type="text"][readonly].value = date;

服务器（提交时）

if(signed === sha(POST[date], salt) {
    //date has not changed
} else {
    // date has changed
}

对于 a11y（可访问性），在显示与发送内容相关的数据时仍应使用表单元素，因此建议在 div 上使用文本输入。使用readonly比disabled禁用会更好地从请求中删除所有输入，导致您的服务器无法接收它。见这里。

这是如何在 PHP 中执行此操作的快速片段。

服务器

$salt = '...'; //This should be stored securely in your application.
$date = ... //However you are storing your date.
$signed_date = hash('sha512', $salt . $date);

前端

<input type="hidden" value="<?php echo $signed_date; ?>" name="signed_date" />
<input type="text" value="<?php echo $date; ?>" readonly name="date" />

服务器（提交时）

$salt = '...';
$date = &$_POST['date'];
$signed_date = &$_POST['signed_date'];

if(hash('sha512', $salt . $date) === $signed_date) {
    echo "wooo!";
} else {
    echo "ohhh";
}