聊聊让浏览器爆炸的十二行代码

Posted by zhang on

前两天,我在朋友圈分享了个链接——http://www.zhangsubo.cn/demo.html跟各位小伙伴还特意强调不要点(→_→,不让点你发什么,(*^__^*) 嘻嘻……)

 

这个网页其实没什么太大的作用,只不过是让你的电脑死机,手机重启,微信闪退而已。

那到底是因为什么让一个小小的网页有这么大的威力呢?

让我们从头说起。

这个小网页一共由十二行代码构成。在google上用『十二行代码 浏览器』为关键词搜索,你会发现Freebuf、V2EX等程序员和网络安全人员长期聚集的论坛都在讨论这个话题。Google

FreeBuf V2EX

追溯其根源,这段代码应该是来自于一个『不存在的网站』——Twitter——上的 IT Security Tweets ™@F1r3h4nd

Twitter

Crash your friend's browser and restart Iphone with a link which has this script:

翻译下就是:把带有下面这个脚本的链接发给你的朋友,能让你朋友的浏览器崩溃,而且能让iPhone重启。

有兴趣的可以点击我的那个链接试试!【友情提醒:请先保存浏览器上的工作。 拿去整人,被砍死本人概不不负责哦~】

可能会出现的效果:

  • PC端用浏览器打开:点开链接以后,电脑CPU内存极有可能一路狂飙直至浏览器崩溃卡死。
  • 移动端(安卓、iPhone)用三方浏览器打开:点开链接以后浏览器会闪退。
  • 移动端(安卓、iPhone)用嵌入浏览器的应用打开:在微博、微信客户端中点开链接会闪退。
  • iPhone用Safari打开:点开链接之后,手机可能会注销重启。

完整代码如下:

2016-01-25_11-34-40

(那啥,因为现在用的这个主题没有准备代码样式,所以直接放代码太难看,就截了下图,谁想要源代码就直接百度或者找我要好了。)

让我们来看下这段代码,主要就是

total= total+i.toString();
history.pushState(0,0,total);

这两行代码执行1000000遍。

其中total= total+i.toString();这行代码没有为题,就是把参数i变成字符串和total去合并,显然单纯的合并并不能让浏览器瘫痪,电脑死机,手机重启。那肯定是第二行代码了。(我咋这聪明呢!哎没办法。。。)

这段代码的核心真的就是 history.pushState() 方法。

这个方法是 HTML5 的一个 API,用于向history添加当前页面的记录。简单来说就是在不刷新页面,也不打开新页面的情况下,改变浏览器地址栏中的URL。这个技术可以解决AJAX遗留下来的问题。它和AJAX结合后,有个新的称呼是PJAX(淘宝目前正在使用)。

这里的代码:history.pushState(0, 0, total);只能起到一个效果,就是修改URL(只能修改当前目录后的字符,无法修改全部域名。且不会发生跳转或发送请求)。然后这里代码循环了1000000次,也就是说URL修改了1000000次,每次新的URL都是之前一次的后面再加上i.toString()。这样快速不停地向history中添加记录,最终就会导致内存占用迅速增大到机器无法承受,然后浏览器崩溃。

所以PC上面才会出现内存和CPU突然一路飙升,而手机的内存和处理器本身就跟PC没得比,所以崩溃也是自然的。至于iPhone上的Safari是如何让iPhone重启的,这个就不得而知了。

 

#About Me

张小璋,野蛮生长成世界500强企业供应链金融产品经理的法语毕业生。微信公众号:张小璋碎碎念(ID: SylvainZhang )。
一直在互联网金融公司从事产品经理工作并负责互联网金融产品线,深耕互联网金融和区块链领域。「PMCAFF」、「人人都是产品经理」专栏作家、「PmTalk」签约作家。