如何理解因防火墙而学习的Content-Type

如何理解因防火墙而学习的Content-Type，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

背景

项目在B学校上线的时候，同一个功能在A学校是没问题，B学校前端点击后，后端一直收不到请求

初步分析

1.确认一下代码都是同一份

2.确认是否访问了正确的服务器

3.确认应用服务器是否收到了请求

4.确认反向代理服务器是否收到了请求

5.抓包看请求是否发出（其实不用怀疑这一点）

以上四步做完之后的结论是：代码是同一份，服务器是对的，反向代理服务器和应用服务器都没有收到请求

初步诊断结果

怀疑是B学校的防火墙拦截了请求，因此可能有两个解决方案：
1.找学校开防火墙，设置白名单

2.想办法绕开防火墙规则

但是有人得问了，为什么防火墙会拦截喃，因为在我们异步提交的数据当中含有<p>等富文本标签，这应该是防火墙防止XSS攻击的而设置的策略，进而拦截了请求

因为当时事情紧急，且学校放假没人配合，只有先试着用第2点。

解决过程

之前没怎么接触过XSS攻击，对防火墙的拦截策略没什么多少认识，接下来试着在POSTMAN中使用mutipart/formdata提交测试，居然是成功的。

找到了突破口，然后就让前端更改默认提交请求头中的Content-Type=mutipart/formdata，然后在VUE中使用FormData构造表单提交

至此绕过了防火墙，上线OK

总结

不同学校的防火墙策略不一样，因此开发人员需要补充WEB安全相关的知识点，最好是公司的CTO在学习整理之后，公司针对特定行业现状弄出一套最佳实践出来

通过本次实践，顺便了解了一下Content-Type分别为multipart/formdata和x-www-form-urlencode的请求信息

x-www-form-urlencode

默认情况下，html的form表单的enctype=application/x-www-form-urlencoded。一些框架比如Jquery Vue的Ajax提交默认也是这种类型

application/x-www-form-urlencoded是指表单的提交，并且将提交的数据进行urlencode。默认情况下，我们所有的表单提交都是通过这种默认的方式实现的，如图：

可以看到中文被编码了,但是它并不会把特殊字符进行编码,比如< &等。这样可能会导致XSS-存储型攻击或者SQL注入攻击。因此防火墙拦截它是正确的。因此写前端代码的时候，输入都需要做校验，比如电子邮箱，生日、年龄、文本使用地方的XSS FILTER做过滤等，同时后端也要做校验，因为前端是很容易就绕过的。关于XSS-攻击可以去看阿里-首席安全架构师-吴翰清的《白帽子讲WEB安全》一书

multipart/form-data

我们如果要在表单中上传文件，一般会将form的enctype参数设置为multipart/form-data，一些框架比如Jquery Vue的Ajax提交也可以设置Content-Type，这种方式只支持POST的请求方式

Contype-Type=multipart/form-data情况的时候，都会通过一个特殊的字符串来将原始POST数据进行分割。

我们可以看到下面的请求中Content-type的类型

分隔符开始为：----WebKitFormBoundaryM2jFeC5L7hYjAqxZ

分隔符结束为：-----WebKitFormBoundaryM2jFeC5L7hYjAqxZ--

相比较多了“--”

通过这种方式我们把富文本提交到了后端，写入了数据库。但是为了避免XSS攻击，前端和后端代码都可以使用第三方的插件扫描一下文件内容或者VALUE值

application/json

是我们将json字符串通过请求体(http body)向后端提交数据，springmvc后端直接使用@requestBody进行接收，这也是经常使用一种方式，并没有什么特别的点。同样需要对参数内容进行过滤，防止XSS攻击。

VUE防XSS攻击

vue前端框架提供了防XSS攻击的方法，可以自行网上查阅

看完上述内容，你们掌握如何理解因防火墙而学习的Content-Type的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！