前后端必学的网络安全浏览器工作原理 学习笔记

宏观视角下的浏览器

c/s client --server
b/s browser --server

进程和线程

ctrl+alt+delete
进程：就是在内存中正在运行的应用程序
特点：1 在内存中独占一个内存空间 2 .进程和进程之间是隔离的
线程：就是进程的最小执行单位
特点：1.一个进程是由多个线程组成 2.每一个线程之间也是相互之间隔离的

一个页面启动的时候到底启动了几个进程？

最少启动了4个进程 ：
浏览器主进程
渲染进程
网络进程
GPU进程

计算机网络的七层模型

1.物理层：使用一定的物理介质（光纤、网线wifi） 0和1 以电信号传输
2.数据链路层：MAC地址 封装byte
3.网络层：IP协议
4.传输层：UDP协议（用户数据包协议） /TCP协议（传输控制协议） 端口
UPD协议的特点：只管发，不管收 如 DNS，微信电话，流媒体就用到了UDP协议
TCP协议的特点：1重传机制 2.排序机制–根据数据包的编号对数据进行排序，重组数据包，保证数据包的完整性和准确性
5.会话层： 断点续传
6.表示层： 翻译 解决不同系统之间数据传输的问题
7.应用层： HTTP协议

四层

物理层 — 物理层，数据链路层
网络层
传输层
应用层 — 会话层，表示层，应用层

HTTP的请求流程

浏览器发送HTTP请求的流程

1.构造请求行
GET /api/… HTTP/1.1
2.查找缓存 有缓存就取缓存 没有就发送网络请求
3.准备IP地址和端口号
4.等待TCP队列 一个域名最多只能建立6个TCP连接
5.建立TCP连接
6.发送HTTP请求

服务器处理HTTP请求

1.返回请求内容
2.断开连接

从进程的角度讨论

从输入url地址到浏览器显示页面，这个过程中到底发生了什么

1.浏览器主进程输入url请求
2.浏览器主进程将url请求派发给网络进程
3.在网络进程发送url请求，获取响应头数据，解析响应头数据，之后将数据转发给浏览器主进程
4.浏览器主进程接收到网络进程的相应数据之后，发送“提交文档”消息给渲染进程
5.在渲染进程接收到消息之后，准备接收HTML数据，接收数据的方式是直接和网络进程之间建立数据管道
6.文档数据传输完毕，渲染进程会返回“确认提交”x消息给浏览器主进程
7.在l浏览器主进程中，收到渲染进程“确认提交”消息之后，便开始提交移除旧的文档，更新浏览器进程中的页面状态

浏览器的渲染流程

1.使用html解析器将html页面转换成浏览器能够理解的DOM树 ParseHTML
2.将css解析成浏览器能够识别的css 树 ParseStylesheet
3.样式计算
4.DOM树+CSS树 —>布局树
5.根据布局树生成了图层树
*哪几种情况被称为图层
*css 3d * position:fixed *video *canvas *css3动画 *
6.绘制（一个个地绘制）
7.组合图层 生成最终的页面0

浏览器每次可以接收多少数据

64KB

CDN

CDN(Content Delivery Networks) 内容发布网络
CDN是一组发布在多个不同地理位置的web服务器,用于更有效的向用户发布内容
应用场景:假设拼多多今天开一个活动抢iphone,如果某个地区(杭州)的用户激增,导致杭州的服务器宕机了,那么用户的请求服务会转给另一台服务器所在的城市

浏览器多页面之间的通讯

实现多也页面之间的通讯,主要有浏览器数据存储和服务器两种方式。浏览器数据存储的方式主要使用本地存储方式解决,即调用localStorage,Cookie等本地存储方式
服务器方式主要使用websocket

Cookie,SesionStorage,LocalStorage这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对
注意;session和sessionStorage不是一个概念。在服务端有一种存储方式叫做;session会话存储,常常被简称为session
相关api
localStorage.setItem('key','value') localStorage.getItem('key','value') localStorage.removeItem('key') localStorage.clear()
Cookie
Cookie的大小限制为4KB.它的主要用途有保存登录信息。一般由服务器生成,如果在浏览器端生成Cookie,默认是关闭浏览器后失效。每次都会携带在HTTP头中,如果使用Cookie保存过多会带来性能问题
maxAge:一个数字表示从Date.now()得到的毫秒 Cookie的有效时长 expires:cookie过期的Date(就是说这个cookie到某个日期时间就到期) httpOnly:是否只是服务器可访问cookies,默认是true
localStorage
除非被清除,否则永久保存。一般大小在5MB。仅在客户端(即浏览器)中保存,不参与和服务器的通信
sessionStorage
sessionStorage是HTML5新增的一个 会话存储对象,用于临时保存同一窗口(或标签页)的数据,刷新页面数据依旧存在,在关闭窗口或标签页之后将会删除这些数据

websocket
websocket可以实现多个标签页的通信。webSocket是HTML5新增的协议,它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道。比如说,服务器可以在任意时刻发送消息给浏览器
为什么传统的HTTP协议不能做到webSocket实现的功能?因为HTTP协议是一个请求-响应协议,请求必须由浏览器发给服务器,服务器才能响应。而建立webSocket之后,服务器可以主动发数据给浏览器,浏览器也可以主动发数据给服务器
webSocket事件
Socket.onopen 在建立时触发 Socket.onmessage 客户端接收到服务端数据时触发 Socket.onerror 通信发生错误时触发 Socket.onclose 连接关闭时触发
webSocket方法
Socket.send() 使用连接发送数据 Socket.close() 关闭连接

强缓存-协商缓存

缓存的定义
浏览器在本地磁盘上将用户之前请求的数据存储起来,当用户再次请求该数据时,不用发送http请求,直接从浏览器本地获取
好处:
1.减少http请求次数
2.节省带宽,避免网络资源的浪费,减轻服务器的压力
3.提升网页的加载速度,优化用户体验
缓存的分类
强缓存:不会像服务器发送请求,直接从本地缓存中获取数据。请求资源的状态码为:200 ok(from memory cache)
Expires 强缓存的到期时间 Cache-Control 缓存在多长时间之间有效 当Cache-Control与Expires在服务器端同时启用的时候,Cache-Control优先级更高
协商缓存:想服务器发送请求,服务器会根据请求头的标识判断是否命中协商缓存。如果命中,就会返回304状态码通知浏览器从缓存中读取资源
Last-Modified/if-Modified-Since 这个资源在服务器上的最后修改时间 etag/if-none-match 服务器生成的每个资源的唯一标识字符串,只要资源有变化这个值才会改变
强缓存vs协商缓存 :共同点:都是从浏览器读取资源 不同点:强缓存不发送请求给服务器 协商缓存发请求给服务器,根据服务器返回的信息决定是否使用缓存

浏览器网络

http/0.9 只用传输html文件 传输的数据比较简单,只有请求行,没有请求头和响应头
http/1.0 解决多种类型文件下载 通过请求头和响应头协商
http/1.1 持久化连接
http/2.0
为什么HTTP/1.1很难将带宽占满
1.tcp的慢启动
2.同时开启多条TCP连接,那么这些连接会竞争固定的带宽
3.http/1.1的队头阻塞问题
基于以上问题 就提出http/2.0 多路复用 一个域名只使用一个TCP长连接来传输数据

浏览器安全

1.页面安全 同源策略,xss(跨站攻击),CSRF攻击
2.网络安全
3.浏览器系统安全
同源策略
什么是同源
协议(http/https/ftp)+子域名(www)+主域名(baidu.com)+端口号(443) //有一个不一样我们就叫跨域
xss攻击
xss攻击就是指黑客往HTML文件中或DOM中注入恶意脚本,从而在用户浏览页面时,利用注入的恶意脚本对用户实施
可以窃取cookie信息 可以监听用户行为 可以修改DOM 可以在页面内生成浮窗广告
解决:1.服务器对输入的脚本进行过滤和转码 2.充分利用CSP 3.使用HttoOnly属性
CSRF攻击
跨站请求伪造:冒充用户在站内的正常操作