稀里糊涂的转义

一、前言

前段时间挖机ERP系统出现一个问题，表单录入客户名称是 L & Q International Trading Limited，然后页面展示变成 L & Q International Trading Limited，即字符 &变成了&amp；。

二、为什么要转义

&amp;是&在HTML中的转义，那为什么要进行转义呢，因为在HTML中有些字符是预留的（注：每种语言都有预留关键字），比如在HTML中不能直接使用小于号（<）、大于号（>）等，因为浏览器会认为它们是HTML标签，如果希望正确显示预留字符，我们必须在HTML代码中使用对应的字符实体。

注：上面这段话不一定对，估计以前浏览器是存在这个问题，现在浏览器可能兼容性做得比较完善，我测试了一下是能够直接用 < 输出的，但空格是不行，你输入多个空格页面显示时会截取掉只留下一个空格。

&其实并不是HTHL标签中的关键字，但&gt;&lt;这些用到它，所以它也必须进行转义。

三、问题排查

1、确认&amp;是在前端还是后端造成的

开始是怀疑前端代码做了处理，直接用postman提交发现在后端接收到的数据也会变成了 &amp；这就排除掉前端的问题，前端Get提交的数据可能会做URLEncode，但要搞清楚URLEncode编码和HTML标签转义是两回事，POST过来JSON数据一般理论上是不会被改变。

结论：后端问题

2、确认后端哪个环节的问题

怀疑后端程序基础框架中有代码进行转义，直接创建一个最简单的SpringBoot项目（与工程版本一致），用postman提交含&的字符串，后端接收到的数据是正常的，这说明与SpringBoot框架不相关。

结论：后端拦截器问题。

3、后端拦截器代码跟踪

发现工程中引入了XssFilter，会对HTML标签转义，对脚本进行删除等。

这样被过转义后，存入数据库的就是  L &amp; Q International Trading Limited。

4、前端展示

Vue页面上使用双花括号 {{ }}、或Element-UI 的 el-table会将HTML（含转义后的实体）转换为纯文本进行输出。所以就造成了这个问题。

5、解决方案

如果明确了后端使用了XssFilter进行了过滤（会删除掉脚本），前端vue可以直接使用 v-html来显示 ，这样就不会有&amp;，但el-table中又该如何处理呢（好像只能和solt去处理了）？其实我看了代码，发现我们业务类中加了以下代码。

req.setName(StringEscapeUtils.unescapeHtml4(req.getName()));

这个是能保证页面上不再出现&amp；但这样做XssFilter的意义在哪里呢？

注：一般ERP这种ToB的项目需要内部账号登录才能使用，其实没有什么必要做XSS安全校验