如何機智的弄壞一臺電腦?來自一名前端工程師的報復...

很多人都在說:“技術領域當中,前端最沒有技術含量,且容易被替代。”有人說,前端的能力界限頂多就在瀏覽器那兒,無論你觸發了多少bug,最多導致瀏覽器崩潰,連電腦系統都影響不了。

就像二次元各種炫酷的毀滅世界,都不會導致三次元的世界末日。

這我就不能忍了。作為一個前端,我發現還是有方式突破次元壁、打開次元大門的…

這個實驗腦洞較大,動機無聊,但某種意義上反映了一些安全問題。

想象一下,有天你在家裡上網,吃著火鍋還唱著歌,點開一個鏈接,電腦突然就藍屏了!想想還真有點小激動。


如何機智的弄壞一臺電腦?來自一名前端工程師的報復...


起因

故事得從localStorage(本地存儲)說起。

html5的本地存儲,相信大家都不陌生。將數據以二進制文件形式存儲到本地,在當前應用得非常廣泛。

windows下的chrome,localStorage存儲於C:\Users\\xxx\AppData\Local\Google\Chrome\User Data\Default\Local Storage文件夾中。但如果任由網頁無限寫文件,對用戶硬盤的傷害可想而知,因而瀏覽器對其做了大小限制。

對於一個域名+端口,PC端的上限是5M-10M之間,移動端的則是不大於2.5M。

那麼問題就變成:這樣的限制足夠保護用戶硬盤了嗎?

關鍵

關鍵的問題在於,這一限制,針對的是一個域名+端口。

也就是說,你訪問同一個域名的不同端口,它們的localStorage並無關聯,是分開存儲的。

我用node簡單地開啟了服務器,這時,用戶訪問http://127.0.0.1:1000到http://127.0.0.1:1099這100個端口,會請求到同一個頁面index.html。

如何機智的弄壞一臺電腦?來自一名前端工程師的報復...


當然,這個index.html裡涉及了localStorage寫操作。

如何機智的弄壞一臺電腦?來自一名前端工程師的報復...


我試著用瀏覽器分別訪問了幾個端口,結果是分開存儲。一切跟劇本一樣。

自動遍歷

但這種程度還不夠。

如果要讓實驗變得更好(xie)玩(e)一些,問題就變成如何讓用戶自動遍歷這些端口?

iframe是個好的嘗試。

只要一打開http://127.0.0.1: 1000,頁面的腳本就會創建一個iframe,去請求http://127.0.0.1: 1001,一直循環下去。

如何機智的弄壞一臺電腦?來自一名前端工程師的報復...


當然iframe我們還可以設置為不可見,以掩蓋這種不厚道的行為…

比方說,有人發給你一個鏈接,你打開後發現是個視頻,而你根本注意不到背後的腳本,在視頻播放的幾分鐘裡,快要把你的C盤寫滿。

然後我就看到請求如潮水漸漲:

如何機智的弄壞一臺電腦?來自一名前端工程師的報復...


但是,請求到1081端口,最新的chrome就崩潰掉了…原來iframe嵌套太多,已經到達了瀏覽器的極限。

防止瀏覽器崩潰

C盤還未撐滿,同志還需努力。怎麼辦?

突然想到,到達iframe極限之前,我們可以重定向啊。

每訪問50個端口,就使用window.location.href重定向一次,去確保瀏覽器不崩潰。

如何機智的弄壞一臺電腦?來自一名前端工程師的報復...


事實證明,這種野蠻的方法的確可行。

至此,只要訪問http://127.0.0.1: 1000,就會往Local Storage文件夾裡寫入近500M無用數據:

如何機智的弄壞一臺電腦?來自一名前端工程師的報復...


裡面的數據是這樣的:

如何機智的弄壞一臺電腦?來自一名前端工程師的報復...


繼續實驗的黑科技

算了下我的C盤還有空間嘛,那就把端口數量從100增長到200個。結果是這樣的,到達了1.17G大小。

如何機智的弄壞一臺電腦?來自一名前端工程師的報復...


在後續的實驗中,我就慢慢地把端口數量與存儲的數據調大。

電腦也運行得越來越慢。這是為什麼呢?

我觀察到,有時候執行localStorage.setItem()後,在文件夾裡不一定立即能看到數據文件。我懷疑這些數據會被chrome先放到內存裡,以避免重複讀寫帶來的消耗,在空閒或關閉的時機,再寫進硬盤裡。

但此時,瀏覽器已經影響到系統了。它處於一種“不會崩潰”,但“因為佔用了許多內存,已經妨礙用戶電腦的正常使用”的狀態。

即使用戶關閉了瀏覽器窗口,也不會很快恢復。要知道讀寫任務並不是隨窗口關閉而終止的,否則瀏覽器會丟失數據。

遭遇黑科技的人們能做的只有:

  • 等待;
  • 用任務管理器關掉chrome進程,再等待;
  • 相信並嘗試“重啟電腦解決90%電腦問題”的科學論斷。


可以說,瀏覽器的內心幾乎是崩潰的。

最後

最後,還是得用嚴肅臉告誡一下:害人之心不可有。

本實驗,從一開始就是懷揣著將安全問題上交給國家的初衷去做的(是的就是這麼純粹)。

後續,看著C盤還有2G空間,我又把端口增長到2000個,試下會發生什麼。

由於請求過多,需要一定時間,我就去做別的事情了。

回來後發現房間安靜祥和,美輪美奐,一片藍光,像是加了特技。

如何機智的弄壞一臺電腦?來自一名前端工程師的報復...


那麼…

問題來了,計算機修理哪家強?

有點急…

如何機智的弄壞一臺電腦?來自一名前端工程師的報復...


如何機智的弄壞一臺電腦?來自一名前端工程師的報復...


從工作流程來看,前端開發工程師處於UI設計師的下游,要接UI設計稿,轉化為網頁。同時又是後端工程師的上游,需要把用戶產生的數據提交到服務端。橫向來看,他又與產品經理有著密切接觸,因為他可能隨時和產品經理探(si)討(bi)交互的細節。

對於產品經理天馬行空的思想,你要能把握到位,你得理解他比劃了半天到底是想要做什麼。與後端工程師打交道的時候,你又得馬上化身編程達人,跟他們聊數據類型,聊面向對象,聊設計模式。

前端的門檻好像很低,但要成為一名專業的前端工程師,需要掌握的東西太多了。除了前端技術外,還要思維細膩、有品味、有思想、情商高等等。畢竟你要通過代碼與用戶產生接觸,給用戶帶來愉悅感。

從某種程度上來說,好的前端工程師,一定得先是一個好人。

相關推薦

推薦中...