[网络协议] 浏览器笔记

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 网络协议 -> 浏览器笔记 -> 正文阅读

[网络协议]浏览器笔记

1.浏览器本地存储方案

? ? ? ? 浏览器本地存储分为：cookie；web storage；IndexedDB。HTTP协议是无状态的，一旦数据交换完毕后此次链接就会进行关闭，因此需要会话跟踪，服务器为每位用户分发一个通行证，每个人访问必须携带，cookie中存储一些通用数据例如用户登录状态，首选项等，不建议进行存储业务数据。存储容量大约为4KB左右；存储在cookie的任何数据都能被访问到，因此不能存储敏感信息。web Storage存储的标准API分为localstorage，sessionstorage，二者存储大小都为5MB，sessionstorage中的数据会在每次会话结束之前保存，且从一个session派生出来的页面不能访问到当前数据，即时新页面与原页面并不同源，因为其不属于一个会话。localstorage中数据一直保存在本地，同源文档会共享localstorage中数据，互相读取到对方数据，并通过onstorage事件进行监听实现同源窗口之间的通信。IndexDB可存储更大量的结构化数据，类似于数据库的存储方式，数据之间进行搜索时都有相应的key值，便于查找。

2.浏览器窗口之间通信

? ? ? ? 浏览器多个标签页窗口间通信，主要是指同源多个页面之间的通信：本地存储通信，web worker通信，web Socket通信。本地存储通信主要是通过localstorage、cookie、IndexDB，通过数据共享策略实现通信。web worker通信分为两种线程：专用线程dediacted worker，当前页面专有，共享线程:shared worker，同源页面共享。web Socket将服务器作为数据中转站进行数据传输，实现浏览器窗口间的通信，但是比较耗费资源。只需要一次握手，允许服务器主动向客户端发送消息，就可创建持久性连接，进行双向数据传输，没有同源限制，数据格式轻量级，性能开销小，通信高效，协议头标识符为ws，加密传输为wss。

3.浏览器事件

? ? ? ? 常用浏览器事件与DOM事件包括鼠标点击事件、键盘事件、框架/对象事件、表单事件、剪贴板事件、打印事件、拖动事件、多媒体事件、动画事件、过渡事件。

4.浏览器渲染与内核

? ? ? ? 浏览器渲染分为：渲染引擎和JS引擎，现在内核越来越只指渲染引擎。浏览器的渲染过程为：先解析HTML生成DOM Tree，遇到<link>或<style>标签时，开始同步解析CSS文件，生成CSSOM，当遇到<script>标签时，浏览器会立即开始解析脚本，并停止解析文档。脚本可能会改动，DOM与CSS继续解析会浪费资源，所以应当将<script>标签放在<body>后。当DOM Tree与CSSOM生成后，将两者结合进行布局，形成内部表示模型，渲染树render tree，并根据计算好的信息绘制整个页面，系统会遍历渲染树，并调用paint方法，将内容显示在屏幕上。重绘：当页面外观、风格发生变化时，render tree中元素需要更新属性，则需要进行页面重绘。回流：当页面尺寸，布局，隐藏等页面需要重新构建时，即页面重新布局，重新构建render tree，称为回流，回流一定会重绘，重绘不一定回流。内核：IE浏览器（Trident内核）;Chrome浏览器(webkit内核)；Firefox浏览器(Firefox内核)；safari浏览器(webkit内核)；Opera浏览器(Blink内核)。JS引擎：负责对javascript进行解释、编译和执行，使网页达到一些动态效果。引擎：chrom浏览器：V8引擎；safari浏览器：javascriptCore引擎；Firefox浏览器：Carakan引擎；IE3~IE8浏览器：JScript引擎；Edge浏览器：Chakra引擎。

5.浏览器页面呈现过程

? ? ? ? 浏览器输入的链接进行DNS解析，即根据域名找到IP的过程，再进行TCP连接及数据传输。DNS解析过程中，浏览器先检查自身缓存是否能找到IP，若未命中缓存则查找操作系统中hosts文件检查域名与IP对应关系，若host文件未命中，则向本地域名服务器请求解析，通过53端口发送UDP报文请求解析DNS。若本地服务器解析为命中有两种解析方式：迭代解析(本地域名服务器向根域名服务器查询)和递归解析(主机向本地域名服务器查询)。HTTP协议是使用TCP协议作为其传输层协议的，在拿到服务器的IP地址时，客户端浏览器会与服务器建立TCP连接，该过程包括三次握手四次挥手。

client ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?server
主动打开 → ? ? ? ? ?SYN=1,seq=x ? ? ? ? ?→ 被动打开，接收
(同步已发送) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (同步收到)
接收 ? ? ← ? SYN=1,ACK=1,seq=y,ack=x+1 ? ← 发送
(已建立链接) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (同步收到)
发送 ? ? → ? ? ?ACK=1,seq=x+1,ack=y+1 ? ?→ ?接收
(已建立链接) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (已建立链接)

? ? ? ? 浏览器构建HTTP请求报文并通过TCP协议传送到服务器指定端口，HTTP请求报文分为三部分：报文首部(包含请求头行与各种请求头字段)；空行(告诉服务器请求头部到此为止)；报文主体(即发送的数据信息)?。

GET / HTTP/1.1 
accept: text/html
accept-encoding: gzip, deflate, br
accept-language: zh-CN,zh;q=0.9?
... 



u=1&t=1587699008

响应报文分为四部分：响应行、响应头、空行、响应体。

HTTP/1.1 200 OK 
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Fri, 24 Apr 2020 03:34:50 GMT
... 



{"status":1, "msg": "success"}

6.浏览器的强缓存与协商缓存

? ? ? ? 浏览器缓存指的是本地磁盘对用户最近请求资源的存储，当访问者再次访问同一资源时，浏览器就可以直接从本地磁盘中加载数据，通过缓存的方式就可以减少与服务器之间数据传输，减少服务器负担，加快页面响应速度。先查询内存中缓存；再查询硬盘中缓存，若都没有则与服务器进行交互，前两者都属于查找本地缓存（强缓存），后者为本地缓存未命中时，浏览器发送协商缓存请求。强缓存通过expires和cache-control检查缓存是否过期；协商缓存通过last-modified和etag验证资源是否命中协商缓存。

7.跨域问题

? ? ? ? 跨域解决的是不同源问题。当协议、端口、IP有一者不同时，都会涉及跨域问题，不允许不同源网站进行交互。不同源时：XHR请求不能发送；无法对跨域请求资源进行修改，不同源的cookie、localstorage无法读取。解决方案①JSONP跨域请求数据(通过<script>标签的src属性携带callback函数，并在请求结束后回调callback，实现不同源请求)②CORS跨域资源共享，主要是在其header中添加origin请求头字段，响应时也说明请求来源，进行交互；③nginx代理和node.js代理，都是通过代理服务器，直接转发http请求；④document.domain.iframe主域相同子域不同的场景⑤window.postmessage直接向其他window对象发送消息，不能实现与服务端之间数据交互。

8.分布式Session一致性

? ? ? ? session是服务器为客户端创建的一个会话，存储用户的相关信息，用以标识用户的身份。但若是在集群环境下，假如用户在登录时被负载均衡到A服务器，A服务器为其分配了session，下次再登录时被均衡到B服务器，此时B服务器没有其相关session，则会对用户进行重定向到登录页面，这种操作是不合理的，因此需要考虑session的一致性。①session同步，即A服务器生成的session同步到其他服务器上，每个服务器包含全部的session，即session复制（大部分应用服务器都提供session复制功能实现集群，需要网络传输进行同步，会占用带宽，并存在一定的延迟，一台服务器上发生变化，其他服务器也要发生变化，容易引起广播风暴）；②session映射，通过将负载均衡服务器进行修改，对返回用户的sessionID 会对用户请求的IP地址进行标记，即从传输层读取网络层的IP或是应用层读取HTTP协议的某些属性做HASH，保证用户请求都落在同一台服务器上（只要分配服务器均匀，则多台服务器是负载均衡，负载均衡服务器变为了一个有状态的节点，内存消耗就很大）。③客户端存储，将数据直接存储在客户端比如cookie或请求头中，每次请求客户端自动携带数据信息（服务端不需要存储标记用户信息，每次请求可能携带大量数据，占用外网带宽，数据存储在客户端就容易造成泄密、篡改、窃取等）；④后端集中存储，将session存储在一台单独的服务器的数据库中，各服务器需要用户信息时携带sessionID对集中式存储服务器进行请求，进而获取用户信息（服务重启时不会造成session的丢失，每次请求都会增加对存储服务器的网络请求，数据库压力比较大）。⑤⑥

9.对称加密与非对称加密

? ? ? ? 对称加密：内容+密钥=密文? 密文-密钥=原文；非对称加密算法需要两个密钥：公开密钥和私有密钥，私钥不能被其他任何人知道，公钥可以随意公开。HASH算法是一种消息摘要算法，单向运算，具有不可逆性。HASH也称为散列，任何输入信息的变化哪怕一位都会导致散列结果的明显变化称其为雪崩效应，散列应该是防冲突的，即找不出具有相同散列结果的两条信息。

10.网络请求伪造

（1）CSRF跨站请求伪造

? ? ? ? 跨站请求伪造是一种挟持用户当前已经登录的web应用程序上执行非本意操作的攻击方法。例如小明刚刚登录银行系统进行转账，结束之后不小心点击进入小黑通过游戏广告设置的网站中，此时浏览器携带cookie访问银行网站，当小明所在服务端session未过期时，这个url就会被正常响应，执行转账。防御：敏感操作加入验证码；避免使用get请求，接口最好用post请求；检查http协议中referer字段，拒绝响应；加入token验证，在请求头中加入token，在服务端添加拦截器进行token身份验证。利用了用户对浏览器的信任，借用cookie。

（2）XSS跨站脚本攻击

? ? ? ? 跨站脚本攻击，即在页面中插入内容包含特殊字符<时，浏览器误认为是HTML标签，脚本程序在用户浏览程序中执行，而不能被动态页面检查时，产生XSS漏洞。这类漏洞是使攻击者嵌入恶意脚本代码到正常用户访问到的页面，导致恶意攻击用户的目的。包括反射型XSS(通过制作好的攻击链接反射到浏览器，让用户点击)；存储型XSS(代码存储在服务器，若没有过滤或是过滤不严的情况下，用户访问触发代码执行，造成cookie的被窃取)；DOM型XSS(类似于反射型XSS，但其是通过修改DOM树实现的)。例如劫持会话，插入恶意内容，重定向链接，使用恶意软件劫持用户浏览器等。防御：使用特殊字符进行转义；输入转化为小写对比，匹配过滤；禁止加载外域代码；对于不受信任输入应限定一个合理的长度。利用用户对指定网站的信任，盗取cookie。

（3）SSRF服务器端请求伪造

? ? ? ? SSRF服务端请求伪造漏洞，也称为XSPA跨站端口攻击，是一种由攻击者构造利用代码导致服务端发起漏洞利用请求的安全漏洞。一般情况下SSFR攻击的应用是无法用通过外网访问的，所以需要借助目标服务器进行发起，目标服务器可以链接内网和外网，攻击者便可以通过目标主机攻击内网应用。例如由于业务需求服务端程序需要从其他服务器中获取数据，但由于服务器没有对请求目标地址做过滤和限制，导致黑客利用此缺陷请求任意服务器，包含隐匿的内网应用，造成很大的危害(读取本地文件，对内网web应用进行指纹识别，攻击运行性在内网或本地的应用程序，获取服务的一些banner信息。)

（4）CSS劫持攻击

? ? ? ? 访问网站时，CSS攻击者就是将点击页面进行透明化隐藏，然后在页面后显示一些链接让用户点击，即产生点击劫持clickJacking。使用iframe覆盖构造一个钓鱼页面，用户点击之后可能导致构成财产损失等。防御方法：X-FRAME-OPTIONS中的http头，专门用来防御利用iframe嵌套的点击劫持攻击。

（5）SQL注入

? ? ? ? SQL注入指的是web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者在web应用程序中事先定义好查询语句添加额外的SQL语句，从而实现非法操作，获取数据库数据。主要是通过修改SQL语句达到web服务器攻击的方法。防御：分级管理(对用户进行分级管理，严格控制用户权限，对于普通用户，禁止建立、删除等操作)；拦截请求(拦截正则表达式匹配的非正常请求)；参数过滤(敏感字符进行过滤)；变量检查(确定变量类型，进行检测)；隐藏错误(避免直接向用户显示数据库错误)；预编译语句集(采用预编译语句集，内置处理SQL注入能力，提高安全性)；防火墙(对访问数据库的web应用程序使用Web应用程序防火墙WAF，帮助识别SQL注入尝试)；定期检查(定期测试与数据库交互的web应用程序，且数据库更新为最新可修补程序。)

11.HTTP协议

（1）HTTP协议概述

? ? ? ? http超文本传输协议，是基于TCP/IP通信协议传输数据的。http协议是无连接的(即每次连接只进行一次请求，节省传输时间)；http协议是独立的(只要客户端与服务器知道如何处理数据就可利用http进行数据传输，使用Content-type表明资源媒体类型)；http协议是无状态的(即协议对事物处理没有记忆能力，当后续需要先前数据时需要进行重传)。9种请求方法包括：GET，PUT(客户端想服务器传送的数据取代指定文档的内容)，HEAD，OPTIONS(获取目的资源所支持的通信选项)，PUT，PATCH(对已知资源进行局部更新)；DELETE，TRACE；CONNECT。状态码：1××：信息，服务器收到请求，需要继续执行操作；2××：成功，操作被成功接收并处理；3××：重定向，需要进一步操作以完成请求；4××：客户端错误；包括语法错误和请求错误；5××：服务端错误，服务端在请求处理过程中发生错误。(304：请求重定向；401:请求用户身份验证；403:服务端理解客户端请求，但是拒绝执行；405:客户端请求执行方法被禁止；500:服务器内部错误；501:服务器不支持请求功能无法完成请求；505:服务器不支持请求的HTTP协议版本，无法完成处理。)

（2）HTTPS加密传输

? ? ? ? HTTPS是在HTTP的基础上通过传输加密和身份认证保障传输过程的安全性，即加入SSL层(安全套接层Secure Socket Layer，分为SSL记录协议(为高层协议提供数据封装、压缩、加密等基本功能)，SSL握手协议(用于在实际数据传输之前，通讯双方进行身份验证，协商加密算法，交换密钥等))。HTTP为应用层协议运行在80端口，HTTPS应用层协议运行在443端口，其通过在HTTP层与运输层的TCP直接加入一个加密/身份验证层来保证安全传输。

12.TCP协议与UDP协议

? ? ? ? 传输控制协议TCP是一种面向连接的、可靠的、面向字节流的传输层通信协议；用户数据报文协议UDP是一种无连接的、不可靠的、面向报文的传输层通信协议。TCP协议三次握手四次挥手，因为其握手是通过序列号进行的，使用三次握手来约定确定双方初始的序列号。四次挥手(关闭连接时，服务器收到对方的FIN报文，仅仅表示对方不再发送数据但是能接收数据，而自己也未必全部数据都发送给对方，所以乙方可以立即关闭，也可以发送一些数据给对方，再发送FIN报文表示对方统一关闭连接，乙方ACK和FIN一般会分开发送，从而导致多一次。)

TCP	UDP
面向连接、可靠的、面向字节流	面向无连接、不可靠、面向报文
首部最小20字节，最大60字节	首部8字节
一对一通信	一对一、一对多、多对一，多对多
保证数据传输顺序，通过序号来确定	不保证串行苏顺序，需要额外添加
校验、确认应答、序列号、流量控制、拥塞控制	端口功能和差错检测功能
可靠传输，文件传输	实时应用，网络会议、视频会议

? ? ? ? TCP短连接是指客户端向服务端发送消息，服务端响应客户端，一次读写完成之后，客户端将发起close操作，不适用于频繁请求的场合。TCP长连接指客户端与服务端完成一次读写操作后并不会主动关闭之间的连接，长连接省去了较多的TCP建立和关闭的操作，减少浪费，节约时间，但应注意的是随客户端连接数的增加，server负载越来越大，需要采取措施减少负载，使用LRU算法、限制客户端连接数量等方法。

13.SSO单点登录和OAUTH开放授权

? ? ? ? SSO(single? sign on)单点登录指的是用户登录一次就可以访问所以相互信任的应用系统。例如用户登录百度帐号，再访问贴吧或是网盘就可以静默登录，因为其所有的子系统都在一个相互信任的应用群。实现方案：共享session(session同步、session集中存储。session共享问题关键在于cookie跨域，因为session是存储在cookie中的，对于同一个顶级域名下的二级域名，可设置SET-COOKIE设置domain属性为顶级域名，实现顶级域名下二级或三级域名的cookie共享)；Ticket(即SSO-Token，其为一个用户身份标识，标识在子系统群中是唯一的，所有的子系统server都可以验证这个token，同时也是要解决cookie跨域问题)；CAS(中央认证服务，将认证服务单独抽出作为一个子系统，所有的登录认证服务都在CAS认证中心进行。)OAUTH开放授权的服务端和第三方客户端不属于一个互相信任的应用群。OAUTH授权不会使第三方触及到用户的帐号信息及无需用户名和密码就可申请获得该用户资源的授权。例如冲印网站想要拿到自己谷歌帐号中的照片，使用OAUTH授权机制，让系统产生一个短期的进入令牌token，以替代密码，供第三方使用，用户授权行为都在goole授权网站中进行，若是非官方网站则拒绝请求。客户端授权模式：授权码模式(通过客户端的后台服务器与服务提供商的认证服务器进行互动，避免token在前端传输，前端只传递一个授权码，而授权码结合appid与appsecret等信息在后端与认证服务器交换令牌token。)简化模式(不通过第三方应用程序的服务器，直接在浏览器中向认证服务器申请令牌，跳过授权码步骤，客户端不需要认证。)密码模式(用户向客户端提供自己的用户名和密码)客户端模式：客户端以自己的名义，而不是以用户的名义，向服务提供上进行认证。

14.get和post的区别

? ? ? ? get是安全的、幂等的，post是不安全的，不幂等的；在浏览器回退或是刷新时，get请求是无害的，而post请求将再次提交数据；get通过URL来提交数据，因此对长度有限制，post提交的数据大小一般受服务器主动配置来限定大小，所以没有限制；get只接受ASCII字符的数据类型，而POST没有限制，可以传输二进制数据。针对get发送一次请求而post发送两次请求问题，不涉及http协议，而是浏览器本身网络请求底层做的一个优化。例如使用post发送一个大文件，需要先发送一个数据包并携带少量数据检测服务端能否收到这个文件，服务端了解请求控制信息后，决定处理请求的方法。

15.OSI七层模型

? ? ? ? 应用层(应用进程之间的信息交换)、表示层(对应用层信息内容进行变换，而不改变其内容本身)、会话层(应用进程之间按照约定，收发数据)、运输层(网络层次之间数据传送控制，开放系统之间的数据收发确认)、网络层(网络连接的建立、维持和拆除的协议)、数据链路层(建立、维持和拆除链路连接)、物理层(提供有关同步和比特流在物理媒体上的传输手段)。在TCP/IP四层模型中物理层与数据链路层为网络接口层。FTP协议：文件传输协议；SSH协议：安全外壳协议；SMTP协议：简单邮件传输协议；SNMP协议：简单网络管理协议；DHCP协议：动态主机配置协议。DNS协议：域名服务协议。

16.对象

? ? ? ? window对象将window作为全局变量，代表脚本正在运行窗口。document接口表示任何浏览器中载入的网页，并作为网页内容的入口即DOM树。Node接口指各种类型DOM API对象会从这个接口继承，允许用相似的方式对待这些不同类型的对象。Navigator对象表示用户代理的状态和标识，其允许脚本查询它和注册自己进行一些活动，可以使用只读的window.navigator属性取得实例化的navigator对象的引用。location对象表示其链接到的对象的位置URL，History对象允许操作浏览器的标签页或者框架里访问的会话历史记录。Element对象对象描述了所有相同种类的元素所普遍具有方法和属性。Event对象在DOM中出现的事件。domReady理解是DOMContentLoaded事件的别称，初始HTML文档被完全加载和解析完成后，DOMContentLoaded事件被触发，而无须等待样式表，图像和子框架的完全加载。

网络协议最新文章

使用Easyswoole 搭建简单的Websoket服务

常见的数据通信方式有哪些？

Openssl 1024bit RSA算法---公私钥获取和处

加:2021-08-06 10:11:58 更:2021-08-06 10:12:14

360图书馆购物三丰科技阅读网日历万年历 2024年5日历

-2024/5/4 9:57:44-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码