【技术干货】浏览器工作原理和常见WEB攻击 (上).docxVIP

【技术干货】浏览器工作原理和常见WEB攻击（上）本文章来自于阿里云云栖社区摘要：?当你打开一个个设计漂亮、简洁大方的网页，有没有想过浏览器是如何展现这么一个网页的呢？今天给大家带来的文章就是简单总结介绍浏览器的工作原理，这篇文章分为上下两部分，纯经验干货，走过路过不要错过哦~本文作者：上海驻云开发总监陈昂浏览器工作原理当你打开一个个设计漂亮、简洁大方的网页，有没有想过浏览器是如何展现这么一个网页的呢。当你在这些网页上输入你的淘宝账号登录购买东西的时候，有没有想过，你的账号密码、身份证号、手机号、真实姓名，这些信息会不会泄露，被黑客利用呢？在了解网络安全方面的知识之前我们先简单了解下浏览器的工作原理，以辅助我们更好的理解网络安全知识。浏览器分类现代浏览器从内核上来说，主要分为以下6大类：Trident内核，代表是IEEDGE内核，代表是微软的Edge浏览器Gecko内核，代表是FirefoxWebKit内核，代表是Safari和ChromeBlink内核，代表是最新的ChromePresto内核，代表是Opera其中Trident、Gecko、Webkit、Presto已在市场存在多年。但是浏览器技术发展很是迅猛。随着微软最新浏览器Edge的诞生，采用Trident内核被诟病多年的IE浏览器终于要逐渐退出浏览器舞台了。而Blink是Google Chrome浏览器采用的新内核，由此，Google似乎也要和Webkit阵营分道扬镳，Opera也宣称要紧抱Blink的大腿，一场看不见硝烟的战争似乎又在酝酿。不过这里不再过多讨论。有兴趣的朋友可以关注下浏览器内核发展的最新动向。但不论浏览器怎么发展变化，浏览器的组成和浏览器加载网页的原理都是大同小异，不会有太大变化的。下图是浏览器的主要组成模块：图 1浏览器组成模块浏览器加载顺序当我们在浏览器地址栏输入一个网址（比如：），点击回车后，浏览器是如何加载网页的呢？DNS Lookup首先，点击回车后，浏览器是无法识别是什么的，它也不知道你要访问的这个网站放在哪里。这个时候，就需要有人告诉浏览器，你应该去哪台服务器访问这个网站。这个“人”就是DNS(Domain Name System，域名系统)，我们从图中看下DNS工作原理。假如本地配置的DNS服务地址是大致步骤是这样的：浏览器发送寻址请求给DNS服务器DNS服务返回数据告诉本地电脑的服务器地址是本地电脑缓存DNS数据，并发送访问请求给这个服务器服务器和本地电脑建立TCP连接，进行数据交互注：关于DNS缓存和路由寻址，大家有兴趣可以GoogleTCP连接和HTTP当TCP连接建立后，就可以进行数据传输了。而数据的传输是要满足HTTP协议的（分为1.0和1.1两个版本）,包含有连接、消息、请求、响应等一系列规定。一个页面的加载少则数个HTTP请求，多则几十个甚至上百个HTTP请求。一个HTTP的请求头大概是这个样子的：一个HTTP响应后的头大概是这个样子的：我们常说的200、404、500就是相应的状态码了。而我们最关心的可能就是HTTP 的响应Body了, 一个简单的相应body类似是这个样子的是不是很熟悉？这就是我们预先编辑好的HTML页面代码。当我们拿到这么一个页面代码后，浏览器是怎么渲染成一个功能丰富，简洁漂亮网页的呢？我们先看下HTML的代码结构HTML代码结构一个完整的HTML代码，应该包含html, head, body 这三个标签htmlhead/headbody/body/html其中head标签定义文档的头部，可以引用脚本，指示样式表，提供原信息等。这里定义的东西不会真正展现在页面。Body标签下面定义了页面需要展示的元素和布局。关于HTML大家可以自行搜索。接下来，我们看下浏览器的渲染过程HTML页面渲染过程假如的首页是这样的：当浏览器从服务器第一次拿到页面数据时候，就是上面这个样子，我们称之为基础文档(document)，浏览器会把这个基础文档转化为称之DOM树的结构化对象存储在内存里面，然后根据这个DOM树，进行渲染，转化为浏览器可视化的东西。在渲染的时候，浏览器会从上到下依次渲染DOM树，当发现有外链的资源或是脚本的时候（如：上图link、script、img标签），会异步发起外链资源HTTP请求。同时解析继续。如果你的网络环境不好，网速很慢的话，可能会看到这样一个现象：网页先呈现“Hello world” 字样然后图片逐渐加载出来如果样式表里面定义了类似 div {color: red;} 的样式。当样式表加载完后，”Hello world”字样会突然变成红色字体。CookiesHTTP协议里面定义了Cookies的操作。Cookies的中文名称作“小型文本文件”，它以域名为隔离空间存储在浏览器所在电脑的本地磁