如何防止Thymeleaf生成的hidden input值篡改引发数据变更？

我明白你的需求：你用Thymeleaf生成的隐藏输入框原本是用来留存固定的proceso数据，但现在用户可以通过开发者工具修改它的value，导致后端接收的数据被意外变更。下面给你几个实用的解决方案，从前端到后端都有覆盖：

1. 前端层面：增强隐藏输入框的防篡改能力 #

虽然隐藏输入框用户看不到，但开发者工具可以轻松修改它的属性和值。你可以做这几点优化：

• 放弃th:field，手动生成输入框属性并添加readonly：

  <input type="hidden" 
         id="procesos[[${i_pT.index}]].proceso" 
         name="procesos[[${i_pT.index}]].proceso" 
         th:value="*{procesos[__${i_pT.index}__].proceso}"
         readonly>
  

  只读属性会让浏览器阻止常规的修改操作，但注意：通过开发者工具还是能移除readonly属性，所以这只是基础防护。

• 配合JavaScript监听，强制重置值：
  给这些隐藏输入框加上监听，一旦检测到值被修改，就重置为初始值：

  // 选中所有目标隐藏输入框
  const hiddenInputs = document.querySelectorAll('input[name^="procesos["][type="hidden"]');
  hiddenInputs.forEach(input => {
    // 存储初始值
    input.dataset.originalValue = input.value;
    input.addEventListener('input', () => {
      // 强制重置为原始值
      input.value = input.dataset.originalValue;
    });
  });
  

2. 后端层面：数据合法性验证（最核心的方案） #

前端的任何防护都不是绝对安全的，恶意用户完全可以绕过前端限制直接构造请求。所以最可靠的方式是在后端对提交的proceso值进行验证：

比如在Spring Boot的控制器中，你可以预先把原始的procesos数据存在Session或者数据库中，提交时对比验证：

@PostMapping("/your-submit-url")
public String handleFormSubmit(@ModelAttribute YourFormDto formDto, HttpSession session) {
    // 从Session取出预先存储的原始数据
    List<Proceso> originalProcesos = (List<Proceso>) session.getAttribute("originalProcesos");
    
    for (int i = 0; i < formDto.getProcesos().size(); i++) {
        Proceso submittedProceso = formDto.getProcesos().get(i);
        Proceso originalProceso = originalProcesos.get(i);
        
        // 对比提交值和原始值，不一致则拒绝处理
        if (!submittedProceso.getProceso().equals(originalProceso.getProceso())) {
            // 可以抛出异常、返回错误页面或提示
            throw new IllegalStateException("非法的proceso值修改");
        }
    }
    
    // 验证通过，执行后续业务逻辑
    return "success-page";
}

这样不管前端怎么修改，后端都能确保数据的合法性，从根源上解决问题。

3. 替代方案：不通过表单提交留存数据 #

如果你的需求只是留存数据而不需要随表单提交，也可以考虑把proceso数据存在sessionStorage或者后端Session中，完全避免把敏感/固定数据放在前端表单里，这样就从根本上消除了被篡改的可能。

总结一下：前端措施可以作为辅助防护，但后端的合法性验证才是必须的，这是保障数据安全的核心手段。

内容的提问来源于stack exchange，提问作者Legna