【技术干货】浏览器工作原理和常见WEB攻击 （上）

当你打开一个个设计漂亮、简洁大方的网页，有没有想过浏览器是如何展现这么一个网页的呢。当你在这些网页上输入你的淘宝账号登录购买东西的时候，有没有想过，你的账号密码、身份证号、手机号、真实姓名，这些信息会不会泄露，被黑客利用呢？在了解网络安全方面的知识之前我们先简单了解下浏览器的工作原理，以辅助我们更好的理解网络安全知识。

浏览器分类

现代浏览器从内核上来说，主要分为以下6大类：

Trident内核，代表是IE EDGE内核，代表是微软的Edge浏览器 Gecko内核，代表是Firefox WebKit内核，代表是Safari和Chrome Blink内核，代表是最新的Chrome Presto内核，代表是Opera

其中Trident、Gecko、Webkit、Presto已在市场存在多年。但是浏览器技术发展很是迅猛。随着微软最新浏览器Edge的诞生，采用Trident内核被诟病多年的IE浏览器终于要逐渐退出浏览器舞台了。而Blink是Google Chrome浏览器采用的新内核，由此，Google似乎也要和Webkit阵营分道扬镳，Opera也宣称要紧抱Blink的大腿，一场看不见硝烟的战争似乎又在酝酿。不过这里不再过多讨论。有兴趣的朋友可以关注下浏览器内核发展的最新动向。但不论浏览器怎么发展变化，浏览器的组成和浏览器加载网页的原理都是大同小异，不会有太大变化的。下图是浏览器的主要组成模块：

图 1浏览器组成模块

浏览器加载顺序

当我们在浏览器地址栏输入一个网址（比如：http://cloudcare.cn）， 点击回车后，浏览器是如何加载网页的呢？

首先，点击回车后，浏览器是无法识别cloudcare.cn是什么的，它也不知道你要访问的cloudcare.cn这个网站放在哪里。这个时候，就需要有人告诉浏览器，你应该去哪台服务器访问这个网站。这个“人”就是DNS(Domain Name System，域名系统)，我们从图中看下DNS工作原理。

假如本地配置的DNS服务地址是223.5.5.5

大致步骤是这样的：

浏览器发送cloudcare.cn寻址请求给DNS服务器 DNS服务返回数据告诉本地电脑cloudcare.cn的服务器地址是10.0.0.1 本地电脑缓存DNS数据，并发送cloudcare.cn访问请求给10.0.0.1这个服务器 服务器和本地电脑建立TCP连接，进行数据交互

当TCP连接建立后，就可以进行数据传输了。而数据的传输是要满足HTTP协议的（分为1.0和1.1两个版本）,包含有连接、消息、请求、响应等一系列规定。

一个页面的加载少则数个HTTP请求，多则几十个甚至上百个HTTP请求。一个HTTP的请求头大概是这个样子的：

一个HTTP响应后的头大概是这个样子的：

我们常说的200、404、500就是相应的状态码了。

而我们最关心的可能就是HTTP 的响应Body了, 一个简单的相应body类似是这个样子的

是不是很熟悉？这就是我们预先编辑好的HTML页面代码。

当我们拿到这么一个页面代码后，浏览器是怎么渲染成一个功能丰富，简洁漂亮网页的呢？我们先看下HTML的代码结构

/html

其中head标签定义文档的头部，可以引用脚本，指示样式表，提供原信息等。这里定义的东西不会真正展现在页面。

Body标签下面定义了页面需要展示的元素和布局。关于HTML大家可以自行搜索。

接下来，我们看下浏览器的渲染过程

当浏览器从服务器第一次拿到页面数据时候，就是上面这个样子，我们称之为基础文档(document)，浏览器会把这个基础文档转化为称之DOM树的结构化对象存储在内存里面，然后根据这个DOM树，进行渲染，转化为浏览器可视化的东西。

在渲染的时候，浏览器会从上到下依次渲染DOM树，当发现有外链的资源或是脚本的时候（如：上图link、script、img标签），会异步发起外链资源HTTP请求。同时解析继续。

如果你的网络环境不好，网速很慢的话，可能会看到这样一个现象：

然后图片逐渐加载出来 如果样式表里面定义了类似 div {color: red;} 的样式。当样式表加载完后，”Hello world”字样会突然变成红色字体。

HTTP协议里面定义了Cookies的操作。Cookies的中文名称作“小型文本文件”，它以域名为隔离空间存储在浏览器所在电脑的本地磁盘上。他有两个重要的特点：

不能跨域访问（子级域名除外），例如，在cloudcare.cn域名下无法访问 baidu.com域名下面的cookies。 每次的HTTP请求都会在请求头里面自动带上cookies发送到后端服务器。

关于浏览器的具体工作原理，这里有一篇文章讲解的非常的详细：http://taligarsiel.com/Projects/howbrowserswork1.htm

这篇给大家总结介绍了浏览器相关的一系列知识，下篇将为大家带来重头的常见WEB攻击，敬请期待~~~同时如果喜欢我们的话就订阅我们吧，还可以关注微信公众号：架构云专家频道。每天新鲜干货定时推送噢~

Web前端安全策略之CSRF的攻击与防御 接着上一篇文章，本篇文章我们继续来讲解前端如何处理网站的安全问题，本文主要讲解跨站请求伪造(CSRF)。 没看过之前的文章的小伙伴，可以先看一下，这里放一个链接——Web前端安全策略之XSS的攻击与防御
Web前端安全策略之XSS的攻击与防御（上） 随着技术的发展，前端早已不是只做页面的展示了， 同时还需要做安全方面的处理，毕竟网站上很多数据会涉及到用户的隐私。若是没有些安全策略， 很容易被别人通过某些操作，获取到一些用户隐私信息，那么用户数据隐私就无法得到保障。对于前端方面的安全策略你又知道多少呢？接下来我们来介绍一下~ 本文先讲前两个，之后再讲最后一个
驻云科技 上海驻云信息科技有限公司成立于2013年，是一家领先的企业云计算架构咨询、实施、管理及运维技术服务提供商，致力于为企业客户提供卓越的云计算整体解决方案。
阿里云支持与服务 2132 作为全球云计算的领先者，阿里云为全球230万企业提供着云计算服务，服务范围覆盖200多个国家和地区。我们致力于为企业、政府等组织机构提供安全可靠的云计算服务，给用户带来极速愉悦的服务体验。