因防火牆而學習的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攻擊的方法，能夠自行網上查閱