如何理解因防火墻而學習的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的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！