Thymeleaf表单错误回显时如何编码用户输入防范XSS？

好问题！这确实是Thymeleaf处理表单回显时的常见痛点——既要让用户看到自己输入的原始内容（包括#$%&'()*!"+,-./:;?@[]^_{|}~`这些特殊字符），又要严格防范XSS攻击。结合你的场景，我来梳理几个可行的解决方案：

理解问题根源 #

你提到th:utext能正确显示服务器端HTML编码的内容，但th:field会错误显示编码后的值，核心原因在于：

• th:utext会解析HTML实体（把#还原成#），所以能展示原始字符；
• th:field默认会对绑定的值做XML转义，如果后端已经提前对内容做了HTML编码，就会导致双重编码（比如#先被转成#，th:field再把&转成&，最终显示#），让用户看到的是编码后的乱码。

最优解决方案：让Thymeleaf处理转义，后端不提前编码 #

这是最符合Thymeleaf设计理念的做法，既能保证安全，又能让用户看到原始输入：

1. 后端调整：不要提前对用户输入的内容做HTML编码，直接把原始字符串存入BankAccountBean的对应属性中；
2. 前端模板保留th:field：Thymeleaf的th:field会自动对绑定的值进行XML转义，把特殊字符转换成对应的HTML实体（比如&→&，<→<）；
3. 浏览器自动解析：浏览器会把这些HTML实体还原成原始字符显示在输入框中，用户看到的就是自己输入的内容，同时XSS脚本会被转义成纯文本，无法执行。

调整后的模板代码不用改，还是原来的：

<input type="text" th:field="*{paymentAccountName}" th:max="40" />

比如用户输入#<script>alert('xss')</script>，Thymeleaf会转成：

<input type="text" name="paymentAccountName" id="paymentAccountName" value="&#35;&lt;script&gt;alert(&#39;xss&#39;)&lt;/script&gt;" />

浏览器会显示#<script>alert('xss')</script>的文本，不会执行脚本，完美满足需求。

如果后端已经提前编码，如何修正？ #

如果因为业务限制，后端已经对内容做了HTML编码，你可以用Thymeleaf的#strings.unescapeXml()方法先还原原始内容，再绑定到输入框：

<input type="text" 
       th:value="${#strings.unescapeXml(*{paymentAccountName})}" 
       th:name="*{#ids.next('paymentAccountName')}" 
       th:id="*{#ids.next('paymentAccountName')}" />

• #strings.unescapeXml()：把后端编码后的HTML实体还原成原始字符；
• th:name和th:id用#ids.next()来生成和th:field一致的命名，保证表单提交和验证逻辑正常。

为什么不推荐th:utext用于输入框？ #

th:utext是用于渲染HTML内容的，不能直接用于input的value属性——因为value属性本身是纯文本，用th:utext会导致XSS风险（比如用户输入的<script>会被直接渲染成脚本）。

关键安全提醒 #

一定要遵循业务规则：绝对不能把未转义的用户输入直接输出到HTML中。Thymeleaf的默认转义行为是安全的，不要手动关闭转义（比如用th:utext处理输入框值），否则会引入XSS漏洞。

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