如何机智的弄坏一台电脑？
全世界只有3.14 %?的人關(guān)注了
爆炸吧知識
原文：http://litten.me/2015/07/06/hack-in-localstorage/
作者：Litten
很多人都在說：“技術(shù)領(lǐng)域當中，前端最沒有技術(shù)含量，且容易被替代。”有人說，前端的能力界限頂多就在瀏覽器那兒，無論你觸發(fā)了多少bug，最多導(dǎo)致瀏覽器崩潰，連電腦系統(tǒng)都影響不了。
就像二次元各種炫酷的毀滅世界，都不會導(dǎo)致三次元的世界末日。
這我就不能忍了。作為一個前端，我發(fā)現(xiàn)還是有方式突破次元壁、打開次元大門的…
這個實驗?zāi)X洞較大，動機無聊，但某種意義上反映了一些安全問題。
想象一下，有天你在家里上網(wǎng)，吃著火鍋還唱著歌，點開一個鏈接，電腦突然就藍屏了！想想還真有點小激動。
起因
故事得從localStorage（本地存儲）說起。
html5的本地存儲，相信大家都不陌生。將數(shù)據(jù)以二進制文件形式存儲到本地，在當前應(yīng)用得非常廣泛。
windows下的chrome，localStorage存儲于C:\Users\xxx\AppData\Local\Google\Chrome\User Data\Default\Local Storage文件夾中。但如果任由網(wǎng)頁無限寫文件，對用戶硬盤的傷害可想而知，因而瀏覽器對其做了大小限制。
對于一個域名+端口，PC端的上限是5M-10M之間，移動端的則是不大于2.5M。
那么問題就變成：這樣的限制足夠保護用戶硬盤了嗎？
關(guān)鍵
關(guān)鍵的問題在于，這一限制，針對的是一個域名+端口。
也就是說，你訪問同一個域名的不同端口，它們的localStorage并無關(guān)聯(lián)，是分開存儲的。
我用node簡單地開啟了服務(wù)器，這時，用戶訪問http://127.0.0.1:1000到http://127.0.0.1:1099這100個端口，會請求到同一個頁面index.html。
當然，這個index.html里涉及了localStorage寫操作。
我試著用瀏覽器分別訪問了幾個端口，結(jié)果是分開存儲。一切跟劇本一樣。
自動遍歷
但這種程度還不夠。
如果要讓實驗變得更好（xie）玩（e）一些，問題就變成如何讓用戶自動遍歷這些端口？
iframe是個好的嘗試。
只要一打開http://127.0.0.1: 1000，頁面的腳本就會創(chuàng)建一個iframe，去請求http://127.0.0.1: 1001，一直循環(huán)下去。
當然iframe我們還可以設(shè)置為不可見，以掩蓋這種不厚道的行為…
比方說，有人發(fā)給你一個鏈接，你打開后發(fā)現(xiàn)是個視頻，而你根本注意不到背后的腳本，在視頻播放的幾分鐘里，快要把你的C盤寫滿。
然后我就看到請求如潮水漸漲：
但是，請求到1081端口，最新的chrome就崩潰掉了…原來iframe嵌套太多，已經(jīng)到達了瀏覽器的極限。
防止瀏覽器崩潰
C盤還未撐滿，同志還需努力。怎么辦？
突然想到，到達iframe極限之前，我們可以重定向啊。
每訪問50個端口，就使用window.location.href重定向一次，去確保瀏覽器不崩潰。
事實證明，這種野蠻的方法的確可行。
至此，只要訪問http://127.0.0.1: 1000，就會往Local Storage文件夾里寫入近500M無用數(shù)據(jù)：
里面的數(shù)據(jù)是這樣的：
繼續(xù)實驗的黑科技
算了下我的C盤還有空間嘛，那就把端口數(shù)量從100增長到200個。結(jié)果是這樣的，到達了1.17G大小。
在后續(xù)的實驗中，我就慢慢地把端口數(shù)量與存儲的數(shù)據(jù)調(diào)大。
電腦也運行得越來越慢。這是為什么呢？
我觀察到，有時候執(zhí)行l(wèi)ocalStorage.setItem()后，在文件夾里不一定立即能看到數(shù)據(jù)文件。我懷疑這些數(shù)據(jù)會被chrome先放到內(nèi)存里，以避免重復(fù)讀寫帶來的消耗，在空閑或關(guān)閉的時機，再寫進硬盤里。
但此時，瀏覽器已經(jīng)影響到系統(tǒng)了。它處于一種“不會崩潰”，但“因為占用了許多內(nèi)存，已經(jīng)妨礙用戶電腦的正常使用”的狀態(tài)。
即使用戶關(guān)閉了瀏覽器窗口，也不會很快恢復(fù)。要知道讀寫任務(wù)并不是隨窗口關(guān)閉而終止的，否則瀏覽器會丟失數(shù)據(jù)。
遭遇黑科技的人們能做的只有：
等待；
用任務(wù)管理器關(guān)掉chrome進程，再等待；
相信并嘗試“重啟電腦解決90%電腦問題”的科學(xué)論斷。
可以說，瀏覽器的內(nèi)心幾乎是崩潰的。
最后
最后，還是得用嚴肅臉告誡一下：害人之心不可有。
本實驗，從一開始就是懷揣著將安全問題上交給國家的初衷去做的（是的就是這么純粹）。
后續(xù)，看著C盤還有2G空間，我又把端口增長到2000個，試下會發(fā)生什么。
由于請求過多，需要一定時間，我就去做別的事情了。
回來后發(fā)現(xiàn)房間安靜祥和，美輪美奐，一片藍光，像是加了特技。
那么…
問題來了，計算機修理哪家強？
有點急…
從工作流程來看，前端開發(fā)工程師處于UI設(shè)計師的下游，要接UI設(shè)計稿，轉(zhuǎn)化為網(wǎng)頁。同時又是后端工程師的上游，需要把用戶產(chǎn)生的數(shù)據(jù)提交到服務(wù)端。橫向來看，他又與產(chǎn)品經(jīng)理有著密切接觸，因為他可能隨時和產(chǎn)品經(jīng)理探（si）討（bi）交互的細節(jié)。
對于產(chǎn)品經(jīng)理天馬行空的思想，你要能把握到位，你得理解他比劃了半天到底是想要做什么。與后端工程師打交道的時候，你又得馬上化身編程達人，跟他們聊數(shù)據(jù)類型，聊面向?qū)ο?#xff0c;聊設(shè)計模式。
前端的門檻好像很低，但要成為一名專業(yè)的前端工程師，需要掌握的東西太多了。除了前端技術(shù)外，還要思維細膩、有品味、有思想、情商高等等。畢竟你要通過代碼與用戶產(chǎn)生接觸，給用戶帶來愉悅感。
從某種程度上來說，好的前端工程師，一定得先是一個好人。
本文轉(zhuǎn)載自【51CTO官微】
總結(jié)
以上是生活随笔為你收集整理的如何机智的弄坏一台电脑？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 万万没想到，刷1000道题目，还不如搞懂
- 下一篇： 找对象不能只看TA的外表