如何理解因防火墻而學(xué)習(xí)的Content-Type，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)阿合奇,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

背景

項(xiàng)目在B學(xué)校上線的時(shí)候，同一個(gè)功能在A學(xué)校是沒問題，B學(xué)校前端點(diǎn)擊后，后端一直收不到請(qǐng)求

初步分析

1.確認(rèn)一下代碼都是同一份

2.確認(rèn)是否訪問了正確的服務(wù)器

3.確認(rèn)應(yīng)用服務(wù)器是否收到了請(qǐng)求

4.確認(rèn)反向代理服務(wù)器是否收到了請(qǐng)求

5.抓包看請(qǐng)求是否發(fā)出（其實(shí)不用懷疑這一點(diǎn)）

以上四步做完之后的結(jié)論是：代碼是同一份，服務(wù)器是對(duì)的，反向代理服務(wù)器和應(yīng)用服務(wù)器都沒有收到請(qǐng)求

初步診斷結(jié)果

懷疑是B學(xué)校的防火墻攔截了請(qǐng)求，因此可能有兩個(gè)解決方案：
1.找學(xué)校開防火墻，設(shè)置白名單

2.想辦法繞開防火墻規(guī)則

但是有人得問了，為什么防火墻會(huì)攔截喃，因?yàn)樵谖覀儺惒教峤坏臄?shù)據(jù)當(dāng)中含有

等富文本標(biāo)簽，這應(yīng)該是防火墻防止XSS攻擊的而設(shè)置的策略，進(jìn)而攔截了請(qǐng)求

因?yàn)楫?dāng)時(shí)事情緊急，且學(xué)校放假?zèng)]人配合，只有先試著用第2點(diǎn)。

解決過程

之前沒怎么接觸過XSS攻擊，對(duì)防火墻的攔截策略沒什么多少認(rèn)識(shí)，接下來試著在POSTMAN中使用mutipart/formdata提交測(cè)試，居然是成功的。

找到了突破口，然后就讓前端更改默認(rèn)提交請(qǐng)求頭中的Content-Type=mutipart/formdata，然后在VUE中使用FormData構(gòu)造表單提交

至此繞過了防火墻，上線OK

總結(jié)

不同學(xué)校的防火墻策略不一樣，因此開發(fā)人員需要補(bǔ)充WEB安全相關(guān)的知識(shí)點(diǎn)，最好是公司的CTO在學(xué)習(xí)整理之后，公司針對(duì)特定行業(yè)現(xiàn)狀弄出一套最佳實(shí)踐出來

通過本次實(shí)踐，順便了解了一下Content-Type分別為multipart/formdata和x-www-form-urlencode的請(qǐng)求信息

x-www-form-urlencode

默認(rèn)情況下，html的form表單的enctype=application/x-www-form-urlencoded。一些框架比如Jquery Vue的Ajax提交默認(rèn)也是這種類型

application/x-www-form-urlencoded是指表單的提交，并且將提交的數(shù)據(jù)進(jìn)行urlencode。默認(rèn)情況下，我們所有的表單提交都是通過這種默認(rèn)的方式實(shí)現(xiàn)的，如圖：

可以看到中文被編碼了,但是它并不會(huì)把特殊字符進(jìn)行編碼,比如< &等。這樣可能會(huì)導(dǎo)致XSS-存儲(chǔ)型攻擊或者SQL注入攻擊。因此防火墻攔截它是正確的。因此寫前端代碼的時(shí)候，輸入都需要做校驗(yàn)，比如電子郵箱，生日、年齡、文本使用地方的XSS FILTER做過濾等，同時(shí)后端也要做校驗(yàn)，因?yàn)榍岸耸呛苋菀拙屠@過的。關(guān)于XSS-攻擊可以去看阿里-首席安全架構(gòu)師-吳翰清的《白帽子講WEB安全》一書

multipart/form-data

我們?nèi)绻诒韱沃猩蟼魑募?，一般?huì)將form的enctype參數(shù)設(shè)置為multipart/form-data，一些框架比如Jquery Vue的Ajax提交也可以設(shè)置Content-Type，這種方式只支持POST的請(qǐng)求方式

Contype-Type=multipart/form-data情況的時(shí)候，都會(huì)通過一個(gè)特殊的字符串來將原始POST數(shù)據(jù)進(jìn)行分割。

我們可以看到下面的請(qǐng)求中Content-type的類型

分隔符開始為：----WebKitFormBoundaryM2jFeC5L7hYjAqxZ

分隔符結(jié)束為：-----WebKitFormBoundaryM2jFeC5L7hYjAqxZ--

相比較多了“--”

通過這種方式我們把富文本提交到了后端，寫入了數(shù)據(jù)庫。但是為了避免XSS攻擊，前端和后端代碼都可以使用第三方的插件掃描一下文件內(nèi)容或者VALUE值

application/json

是我們將json字符串通過請(qǐng)求體(http body)向后端提交數(shù)據(jù)，springmvc后端直接使用@requestBody進(jìn)行接收，這也是經(jīng)常使用一種方式，并沒有什么特別的點(diǎn)。同樣需要對(duì)參數(shù)內(nèi)容進(jìn)行過濾，防止XSS攻擊。

VUE防XSS攻擊

vue前端框架提供了防XSS攻擊的方法，可以自行網(wǎng)上查閱

看完上述內(nèi)容，你們掌握如何理解因防火墻而學(xué)習(xí)的Content-Type的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！