如何在我的 html 表单中隐藏 id？答案

【问题标题】：How to hide id in my html form?如何在我的 html 表单中隐藏 id？
【发布时间】：2017-10-07 11:02:44
【问题描述】：

我正在使用带有百里香叶的弹簧靴，我想通过表单传递一些值。我要传递的值之一是“id”（在我的数据库中查找对象并更新一些值）。但是我意识到，当我检查 html 页面的来源时，我可以更改“id”并将值保存到其他 id 号。我怎样才能隐藏我的身份证？（我需要它来调用控制器中的方法）。我的代码如下所示：

<form th:action="@{/set-value}" method="post" th:object="${carDto}">
    <input type="hidden" th:field="*{id}" th:value="*{id}" />
    <input type="text" th:field="*{value}" />
    <button type="submit" class="btn btn-default">Submit</button>
</form>

【问题讨论】：

“但是我意识到，当我检查 html 页面的来源时，我可以更改“id”并将值保存到 else id 编号” - 为什么这是个问题？
因为我不想改变那个“id”。我只需要它将“id”传递给我在控制器中的方法。但是我可以在浏览器中打开 html 页面，打开源代码并自己输入 id。
仅仅因为你“不想要它”，并不意味着它实际上是一个真正的问题。不，您当然不能“隐藏”对请求至关重要的信息；您只能将其替换为不同的信息，例如令牌或会话 ID，以便您在服务器上查找相应的 ID。
感谢您的回答

标签： javascript jquery html spring-boot thymeleaf

【解决方案1】：

您可以尝试以服务器端加密 cookie 的形式保存该信息。这样，用户将无法将其更改为有效的其他加密 ID（除非他们知道您的应用程序的密钥等）。用户仍然可以操作它，这可能意味着他们可能会在您的服务器解密 cookie 时遇到错误，但该问题仅针对他们，并且仅因为他们试图操作数据并且他们将无法访问任何他们不应该的数据。

【讨论】：

【解决方案2】：

您真的应该选择 PHP/后端的东西来处理敏感的表单数据。但是我尝试使用 javaScript/jquery 隐藏 id，但它并没有真正隐藏 id；任何有权访问我的 javascript 文件的人都可以轻松查看代码。

var btn = document.getElementById("myButton");
btn.addEventListener("click",myFun);

function myFun(){
    $("form input").attr("id","hello");
    console.log($("#hello").val());
    $("form input").removeAttr("id");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<form>
	<input type="text">
	<button id="myButton" type="button">Click</button>
</form>


<script src="script.js"></script>
</body>
</html>

点击按钮时检查开发者工具。

【讨论】：