这几行 javascript 代码能让你的浏览器崩溃?

  先上Demo,有兴趣的可以先试一下:

  http://www.zeakhold.com/crash/  

  (温馨提示:访问前请保存好浏览器其他窗口的任务,整人被打概不负责嘿嘿~)

  事情还是得从 IT Security Tweets ™   的一篇推文说起:

  也就是说,这段 javascript 代码,能让浏览器崩溃并且能让iPhone重启?!

  于是打开电脑跃跃欲试,当满怀好奇地在浏览器上执行了这段代码后发现: Chrome 立马陷入了卡死的状态,更要命的是点击关闭窗口没响应!!

  打开任务管理器,发现CPU已飙升至100%:

  立马停掉 Chrome ,还好一切恢复正常。

  不过也纳闷着,这几行代码究竟又是什么梗?

<script>
    var total = "";
    for (var i = 0; i < 1000000; i++) {
        total = total + i.toString();
        history.pushState(0, 0, total);
    }
</script>

  从代码看应该是history对象的pushState()方法在1000000次的循环中耗尽了系统的资源。看了一下相关的博客介绍,才发现原来pushState()是HTML5引进的新特性之一,它的引进与Ajax有着密切的关系。

  我们知道,Ajax的出现方便了用户浏览网页,它允许用户在不用刷新的情况下更新网站的内容,但是这样也引发了一个问题,就是更新网站内容之后,不同的页面之间还是有区别的,而这种区别无法体现在URL上:Ajax产生的页面变化并没有伴随着URL的改变,当前页的URL仍与前一页的URL一样,这就导致我们无法通过前进、后退来切换页面。在传统的浏览体验中,页面内容的改变往往会伴随着URL的改变,而这些改变对应着“前进”和“后退”,但是Ajax的出现破坏了这种独特的体验。为此,HTML5 给history对象新增了一些特性来解决这个问题,其中就包括上面代码里的pushState()方法。

  根据W3C的HTML5文档,pushState()方法的作用是在浏览器的历史记录栈里面添加记录(Pushes the given data onto the session history),该方法包含三个参数:一个事件对象,一个加进历史记录的页面的标题(通常被浏览器忽略),一个加进历史记录的地址。这样一来,当Aja作做变更一次,就可以用pushState()方法添加一次历史记录,在此基础上再加上其它几个方法,便使得我们可以主动地对历史记录进行编辑,无刷新改变URL,从而弥补了使用Ajax带来的这个缺陷。

  回到代码,for做了1000000次循环,浏览器的历史记录(压入URL)也就修改了1000000次,并且,每次循环的URL都在上一次的基础叠加,这样不断循环下去向history添加记录,迅速地消耗系统内存资源,从而导致浏览器的崩溃。

  了解缘由后,选了几个手机设备做了测试,虽然没有出现twitter所说的能让iPhone设备重启的现象,但是都不约而同地搞挂了浏览器:

  iPhone 6s(Safari) ——  直接闪出苹果图标,3秒后回到主界面,恢复正常(这个不算重启吧);
  iPhone 4(Safari) ——  卡死在浏览器界面,强制关闭浏览器后恢复正常;
  华为 P6 (内置浏览器) ——卡死在浏览器界面,强制关闭浏览器后恢复正常;
  魅族 MX3 (内置浏览器、UC浏览器) —— 卡死在浏览器界面,强制关闭浏览器后恢复正常;
  QQ、微信里也试了一下打开那个页面,结果都是闪退到聊天主界面。

  有了这段代码后,似乎又多了许多整蛊小伙伴的新姿势嘿嘿~

  (转载请注明出处——http://www.cnblogs.com/zeakhold/)

时间: 2024-10-10 09:40:50

这几行 javascript 代码能让你的浏览器崩溃?的相关文章

60行JavaScript代码俄罗斯方块

教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏 早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大约需要1000行代码的样子.所以60行乍一看还是很让人吃惊的. 但是读懂了代码之后发现其实整个程序并没有使用什么神秘的技术,只不过是利用一些工具或者JavaScript本身的技巧大大简化了代码. 总结起来主要是以下三点 1.使用eval

265行 JavaScript 代码实现第一人称引擎

原文:A first-person engine in 265 lines(2014-6-11)翻译:Jaward华仔 今天,让我们进入一个可以伸手触摸的世界吧.在这篇文章里,我们将从零开始快速完成一次第一人称探索.本文没有涉及复杂的数学计算,只用到了光线投射技术.你可能已经见识过这种技术了,比如<上古卷轴2 : 匕首雨>.<毁灭公爵3D>还有 Notch Persson 最近在 ludum dare 上的参赛作品.Notch 认为它够好,我就认为它够好! [Demo (arrow

教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏

早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大约需要1000行代码的样子.所以60行乍一看还是很让人吃惊的. 但是读懂了代码之后发现其实整个程序并没有使用什么神秘的技术,只不过是利用一些工具或者JavaScript本身的技巧大大简化了代码. 总结起来主要是以下三点 1.使用eval来产生JavaScript代码,减小了代码体积 2.以字符串作为

大神手把手教你写一个页面模板引擎,只需20行Javascript代码!

只用20行Javascript代码就写出一个页面模板引擎的大神是AbsurdJS的作者,下面是他分享的全文,转需. 不知道你有木有听说过一个基于Javascript的Web页面预处理器,叫做AbsurdJS.我是它的作者,目前我还在不断地完善它.最初我只是打算写一个CSS的预处理器,不过后来扩展到了CSS和HTML,可以用来把Javascript代码转成CSS和HTML代码.当然,由于可以生成HTML代码,你也可以把它当成一个模板引擎,用于在标记语言中填充数据. 于是我又想着能不能写一些简单的代

150行JavaScript代码实现增强现实

增强现实技术(Augmented Reality,简称 AR),是一种实时地计算摄影机影像的位置及角度并加上相应图像.视频.3D模型的技术,这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动.这种技术1990年提出.随着随身电子产品CPU运算能力的提升,预期增强现实的用途将会越来越广. 本文介绍使用JavaScript开源框架AR.js实现的增强现实的Hello World例子. 先看效果: 首先在手机浏览器里打开我部署在github page上的这个demo应用: https://i04

30行JavaScript代码实现一个比特币量化策略

精简极致的均线策略 30行打造一个正向收益系统 原帖地址:https://www.fmz.com/bbs-topic-new/262 没错!你听的没错是30行代码!仅仅30行小编我习惯先通篇来看看 代码,这样能有个宏观的了解! 策略参数如下 参数 描述 类型 默认值 FastPeriod 入市快线周期 数字型(number) 3 SlowPeriod 入市慢线周期 数字型(number) 7 EnterPeriod 入市观察期 数字型(number) 3 ExitFastPeriod 离市快线周

在 mongodb 终端环境下写多行 javascript 代码、函数

工作中碰到一个问题,需要把某个 collection 中的某些符合条件的数据取出来,逐行处理其中某些字段.mongodb 终端下支持直接写 js 代码.函数,也可以运行 js 文件.1 首先需要设置 mongo 终端的代码编辑器,不设置的话只能输入一行代码文件,无法处理大段 js 逻辑 进入 mongo 终端后,输入 f={} 回车后,继续输入: edit f 未设置过相关系统变量的会收到如下提示: please define EDITOR as a JavaScript string or a

【转】265行JavaScript代码的第一人称3D H5游戏Demo

译文:http://blog.jobbole.com/70956/ 原文:http://www.playfuljs.com/a-first-person-engine-in-265-lines/ 这是一篇关于利用 Canvas 实现3D 游戏场景绘制的文章,看完感觉很受启发,所以自己准备总结一下.我们先看下最终效果: 很酷是不是.原作者只使用了265行代码就实现了这么炫酷的效果.代码写的也很清晰明了,并且原文也对原理也进行了解释.本篇就直接将原作者的代码全部贴上来大家观赏观赏. 1 <!doct

265行JavaScript代码的第一人称3D H5游戏Demo【个人总结1】

本文目的是分解前面的代码.其实,它得逻辑很清楚,只是对于我这种只是用过 Canvas 画线的人来说,这个还是很复杂的.我研究这个背景天空也是搞了一天,下面就是只加载天空的代码. 在线效果点击:http://1.codemo2.sinaapp.com/3d_demo_265line/index.html   [可以用键盘“左右”键控制][手机浏览器触控有些异常] 原理大概就是: 1. 创建主循环 一个无限循环 2. 主循环内重复调用绘制方法 3. 绘制方法: 针对 Player 的位置和方向,绘制