美文网首页
了解浏览器如何处理histtory.pushState

了解浏览器如何处理histtory.pushState

作者: 池寒 | 来源:发表于2016-07-29 10:41 被阅读336次

来源:http://bbs.ichunqiu.com/thread-8846-1-1.html?from=ch

社区:i春秋

时间:2016年7月28日

作者:池寒

0x01起因

在i春秋的春秋酷评节目中发现了这个有趣的网址,是美某黑客做的,(额,我手贱点了进去)其中简单的脚本会不断向url地址栏添加字符。导致占用大量内存浏览器崩溃。于是乎我就简单实践分析了下原理。

0x02相关知识

HTML5引入了histtory.pushState()和history.replaceState()

pushState 用于向 history 添加当前页面的记录pushState是为了解决传统ajax带来的问题,htnl5里引入的新的API。可以通过它操作浏览器历史,并且不断改变当前页面的URL。IOmHistory是IE中历史操作的接口

0x03开始

首先用Edge试了下,打开网址,发现不断向url添加字符

然并卵。浏览器运行正常,且内存占用,cpu运行都正常。

然后再试试chrome吧

发现瞬间,内存占用就从52%飙到了76%最后直到99%浏览器就崩溃了。系统不能正常运行了。

国产的360浏览器和它的情况一样,火狐也差不多,于是就没有再进行试验了。

最后再试试IE,看看情况如何。

可以发现IE直接就显示了页面内容,并未发生任何情况,浏览器,系统都没变化。这是为什么呢?其实这是源于不同浏览器对于处理这种情况的机制不同导致了不同的结果。

0x04原理剖析

打开网页源代码,源码很简单

[AppleScript]纯文本查看复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

What were you expecting?

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*newDate();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create','UA-60737367-1','auto');

ga('send','pageview');

var total="";

for(var i=0; i<100000; i++){

total=total+i.toString();

history.pushState(0,0,total);

}

其中这段代码是核心,导致浏览器崩溃的原因。

[AppleScript]纯文本查看复制代码

?

1

2

3

4

5var total="";

for(var i=0; i<100000; i++){

total=total+i.toString();

history.pushState(0,0,total);

}

额,那为什么IE并未作用呢?

IE对历史条录做了限制,但是chrome更多为什么却能正常运行呢?因为IE中历史操作的接口为IOmHistory(由于这个不是很懂就不详细解释了,怕误人子弟,知道的大牛麻烦告诉我,我添上,谢谢)总之就是调用history.pushState不断填入信息,最后导致了浏览器崩溃。

0x05写在最后

额,由于本人菜鸟,核心的东西不是很懂。问了下大牛,查了些资料,见谅。

相关文章

  • 了解浏览器如何处理histtory.pushState

    来源:http://bbs.ichunqiu.com/thread-8846-1-1.html?from=ch 社...

  • 【转】 什么是MIME TYPE(关于Content-Type

    一、 首先,我们要了解浏览器是如何处理内容的。在浏览器中显示的内容有 HTML、有 XML、有 GIF、还有 Fl...

  • 浏览器加载、解析、渲染

    浏览器加载、解析、渲染的过程是怎么样的? Why 为什么要了解浏览器加载、解析、渲染这个过程? 1.了解浏览器如何...

  • 跨浏览器的事件兼容

    我们都知道,在不同的浏览器下,添加和移除事件处理程序方式有所相同,要想写出跨浏览器的事件处理程序,首先我们要了解不...

  • CSS overflow 属性

    overflow 属性规定如何处理如何处理不符合元素框的内容。 大多数主流浏览器都支持 overflow 属性。 ...

  • 2020-12-06

    如何查看浏览器版本的方法 通过 navigator.userAgent 来进行处理 match()是用来处理里面...

  • “浏览器”那些事

    前端离不开“浏览器”,要学好前端,我们就要学会调试IE浏览器,并且处理好浏览器兼容等有关浏览器的问题。 一、如何调...

  • 浅谈Http请求中header的作用

    了解Header的作用,先了解下 header中都有什么? 如下图所示 1、Accept,浏览器端能够处理的内容类...

  • 前端页面渲染机制

    作为一个前端开发,有必要了解从我们在浏览器地址栏输入网址到看到页面这期间浏览器是如何进行工作的,进而了解如何更好的...

  • 简述浏览器渲染机制

    一 : 为什么要了解浏览器渲染页面的机制,主要还是性能的优化。 了解浏览器如何进行加载,我们可以在引用外部样式文件...

网友评论

      本文标题:了解浏览器如何处理histtory.pushState

      本文链接:https://www.haomeiwen.com/subject/jskzjttx.html