wireshark 解密浏览器https数据包

一.什么是HTTP

HTTP (全称为 “超文本传输协议”) 是一种应用非常广泛的 应用层协议.

HTTP 诞生与1991年。目前已经发展为最主流使用的一种应用层协议。HTTP 往往是基于传输层的 TCP 协议实现的。 (HTTP1.0, HTTP1.1, HTTP2.0 均为TCP, HTTP3 基于 UDP实现)目前我们主要使用的还是 HTTP1.1 和 HTTP2.0 。 我们平时打开一个网站, 就是通过 HTTP 协议来传输数据的。

当我们在浏览器中输入一个 搜狗搜索的 “网址” (URL) 时, 浏览器就给搜狗的服务器发送了一个 HTTP 请求, 搜狗的服务器返回了一个 HTTP 响应。这个响应结果被浏览器解析之后, 就展示成我们看到的页面内容. (这个过程中浏览器可能会给服务器发送多个 HTTP 请求, 服务器会对应返回多个响应, 这些响应里就包含了页面 HTML, CSS, JavaScript, 图片, 字体等信息)。

二.理解应用层协议

我们已经学过 TCP/IP , 已经知道目前数据能从客户端进程经过路径选择跨网络传送到服务器端进程
[ IP+Port ]。可是，仅仅把数据从A点传送到B点就完了吗？

所以，我们把数据从A端传送到B端， TCP/IP 解决的是顺丰的功能，而两端还要对数据进行加工处理或者使用，所以我们还需要一层协议，不关心通信细节，关心应用细节！这层协议叫做应用层协议。而应用是有不同的场景的，所以应用层协议是有不同种类的，其中经典协议之一的HTTP就是其中的佼佼者.

三.理解HTTP的工作过程

当我们在浏览器中输入一个 “网址”, 此时浏览器就会给对应的服务器发送一个 HTTP 请求. 对方服务器收到这个请求之后, 经过计算处理, 就会返回一个 HTTP 响应。

事实上, 当我们访问一个网站的时候, 可能涉及不止一次的 HTTP 请求/响应 的交互过程。

四.HTTP的协议格式

HTTP 是一个文本格式的协议. 可以通过 Chrome 开发者工具或者 Fiddler 抓包, 分析 HTTP 请求/响应

1.抓包工具的使用

以 Fiddler 为例. ( 下载地址）

随便点开一个是这个样子的。

2.抓包工具的原理

浏览器访问 sogou.com 时, 就会把 HTTP 请求先发给 Fiddler, Fiddler 再把请求转发给 sogou 的服务器。当 sogou 服务器返回数据时, Fiddler 拿到返回数据, 再把数据交给浏览器。因此 Fiddler 对于浏览器和 sogou 服务器之间交互的数据细节, 都是非常清楚的。

3.抓包结果

HTTP请求

HTTP响应

五.HTTP请求

1.认识URL

2.query String

query string 中的内容是键值对结构. 其中的 key 和 value 的取值和个数, 完全都是程序猿自己约
定的. 我们可以通过这样的方式来自定制传输我们需要的信息给服务器.

正事上述的灵活性HTTP可以根据不同的场景进行自定制工作，也使HTTP广泛使用。

3.关于 URL encode

我们到搜狗浏览器随便搜个东西，比如我搜c++

浏览器URL显示的是c%2B%2B,c++变成c%2B%2B这是为什么呢？像+这样的字符, 已经被url当做特殊意义理解了. 因此这些字符不能随意出现。比如, 某个参数中需要带有这些特殊字符, 就必须先对特殊字符进行转义。一个中文字符由 UTF-8 或者 GBK 这样的编码方式构成, 虽然在 URL 中没有特殊含义, 但是仍然需要进行转义. 否则浏览器可能把 UTF-8/GBK 编码中的某个字节当做 URL 中的特殊符号。转义的规则如下: 将需要转码的字符转为16进制，然后从右到左，取4位(不足4位直接处理)，每2位做一位，前面加上%，编码成%XY格式。“+" 被转义成了 “%2B”。

4.Get请求

1.GET和POST方法

GET 是最常用的 HTTP 方法. 常用于获取服务器上的某个资源。在浏览器中直接输入 URL, 此时浏览器就会发送出一个 GET 请求。另外, HTML 中的 link, img, script 等标签, 也会触发 GET 请求。 使用 JavaScript 中的 ajax 也能构造 GET 请求。
POST 方法也是一种常见的方法. 多用于提交用户输入的数据给服务器(例如登陆页面)。通过 HTML 中的 form 标签可以构造 POST 请求, 或者使用 JavaScript 的 ajax 也可以构造 POST 请求。
使用Fidder进行抓包获取GET请求：
访问搜狗主页请求：

POST请求常用于1.登录，2.上传。
获取登录的post请求：

我们发现POST对比GET请求多了空行和body,空行的作用主要区分header和body。body的格式可以有很多种，这里也是键值对的形式。
获取上传图片post请求：

主要区别

关于 GET 请求的 URL 长度问题
网上有些资料上描述: get请求长度最多1024kb 这样的说法是错误的。HTTP 协议由 RFC 2616 标准定义, 标准原文中明确说明: “Hypertext Transfer Protocol --HTTP/1.1,” does not specify any requirement for URL length。没有对 URL 的长度有任何的限制。实际 URL 的长度取决于浏览器的实现和 HTTP 服务器端的实现。在浏览器端, 不同的浏览器最大长度是不同的, 但是现代浏览器支持的长度一般都很长; 在服务器端, 一般这个长度是可以配置的。

2.面试题

关于幂等举个简单例子。今天牛吃草挤出来的是奶就是幂等的，如果挤出来的是钱是不幂等的。设计互联网产品有时候有时候需要幂等有时候不需要，查询账户余额时如果用户没有消费每次查询的结果都应该一样，是幂等的。设计广告的时候要根据用户的时间，地点等进行修改不是幂等的。

3.认识请求报头

Host
表示服务器主机的地址和端口。
Content-Length
表示 body 中的数据长度。如果没有body这个字段就可以没有。body是从空行开始的，从空行这里开始数，数content-length长度，就是body结束了，解决粘包问题。当浏览器发送多个http请求时服务器可以更好的区分每个http。

Content-Type
表示请求的 body 中的数据格式。

Content-Type三种主要形式

application/x-www-form-urlencoded：body的格式和query string一样。form 表单提交的数据格式. 此时 body 的格式形如:title=test&content=hello
multipart/form-data: 通常用于上传文件。form 表单提交的数据格式(在 form 标签中加上enctyped=“multipart/form-data” 。通常用于提交图片/文件. body 格式形如:Content-Type:multipart/form-data; boundary=—WebKitFormBoundaryrGKCBY7qhFd3Trw------WebKitFormBoundaryrGKCBY7qhFd3TrwAContent-Disposition: form-data; name=“text”
application/json: 数据为 json 格式。 body 格式形如:{“username”:“123456789”,“password”:“xxxx”,“code”:“jw7l”,“uuid”:“d110a05ccde64b16a861fa2bddfdcd15”}

4.User-Agent (简称 UA)

表示浏览器/操作系统的属性. 形如

主要包含当前机器的系统和浏览器的版本。

Referer
表示这个页面是从哪个页面跳转过来的. 形如

如果直接在浏览器中输入URL, 或者直接通过收藏夹访问页面时是没有 Referer 的。
Cookie
Cookie 中存储了一个字符串, 这个数据可能是客户端(网页)自行通过 JS 写入的, 也可能来自于服务器(服务器在 HTTP 响应的 header 中通过 Set-Cookie 字段给浏览器返回数据)。往往可以通过这个字段实现 “身份标识” 的功能。(下篇重点介绍）

5.HTTP 响应详解

认识 “状态码” (status code)
状态码表示访问一个页面的结果. (是访问成功, 还是失败, 还是其他的一些情况…).
以下为常见的状态码：
200 OK
这是一个最常见的状态码, 表示访问成功。抓包抓到的大部分结果都是 200。

404 Not Found
没有找到资源。浏览器输入一个 URL, 目的就是为了访问对方服务器上的一个资源. 如果这个 URL 标识的资源不存在, 那么就会出现 404。例如, 在浏览器中输入 www.sogou.com/index.html , 此时就在尝试访问 sogou 上的/index.html 这个资源。
如果输入正确, 则可以正确访问到. 但是如果输入错误, 比如 www.sogou.com/index2.html , 就会
看到 404 这样的响应。
403 Forbidden
表示访问被拒绝. 有的页面通常需要用户具有一定的权限才能访问(登陆后才能访问). 如果用户没有登陆直接访问, 就容易见到 403.
405 Method Not Allowed
前面我们已经学习了 HTTP 中所支持的方法, 有 GET, POST, PUT, DELETE 等。但是对方的服务器不一定都支持所有的方法(或者不允许用户使用一些其他的方法)。
500 Internal Server Error
服务器出现内部错误. 一般是服务器的代码执行过程中遇到了一些特殊情况(服务器异常崩溃)会产生个
状态码.咱们平时常用的网站很少会出现 500 (但是偶尔也能看到)。
504 Gateway Timeout
当服务器负载比较大的时候, 服务器处理单条请求的时候消耗的时间就会很长, 就可能会导致出现超时的。
302 Move temporarily
临时重定向。
理解 “重定向”，就相当于手机号码中的 “呼叫转移” 功能。比如我本来的手机号是 186-1234-5678, 后来换了个新号码 135-1234-5678, 那么不需要让我的朋友知道新号码,只要我去办理一个呼叫转移业务, 其他人拨打 186-1234-5678 , 就会自动转移到 135-1234-5678上。
在登陆页面中经常会见到 302. 用于实现登陆成功后自动跳转到主页。
响应报文的 header 部分会包含一个 Location 字段, 表示要跳转到哪个页面。

301 Moved Permanently
永久重定向. 当浏览器收到这种响应时, 后续的请求都会被自动改成新的地址。301 也是通过 Location 字段来表示要重定向到的新地址。
状态码小结

6.认识响应 “报头” (header)

响应报头的基本格式和请求报头的格式基本一致。类似于 Content-Type , Content-Length 等属性的含义也和请求中的含义一致。

Content-Type

五.构造HTTP请求

##一. 通过 form 表单构造 HTTP 请求
form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求.
不要把 form 拼写成 from!!

1.form 发送 GET 请求

form 的重要参数:
action: 构造的 HTTP 请求的 URL 是什么.
method: 构造的 HTTP 请求的 方法 是 GET 还是 POST (form 只支持 GET 和 POST).
input 的重要参数:
type: 表示输入框的类型. text 表示文本, password 表示密码, submit 表示提交按钮.
name: 表示构造出的 HTTP 请求的 query string 的 key. query string 的 value 就是输入框的用户
输入的内容.
value: input 标签的值. 对于 type 为 submit 类型来说, value 就对应了按钮上显示的文本.

<form action="http://abcdef.com/myPath" method="GET">
   <input type="text" name="userId">
   <input type="text" name="classId">
   <input type="submit" value="提交">
</form>

页面展示效果

在输入框随便填写数据：

点击 “提交”, 此时就会构造出 HTTP 请求并发送出去。
对应关系：

2.form 发送 POST 请求

修改上面的代码, 把 form 的 method 修改为 POST

<form action="http://abcdef.com/myPath" method="GET">
   <input type="text" name="userId">
   <input type="text" name="classId">
   <input type="submit" value="提交">
   </form>

二. 通过 ajax 构造 HTTP 请求

从前端角度, 除了浏览器地址栏能构造 GET 请求, form 表单能构造 GET 和 POST 之外, 还可以通过 ajax的方式来构造 HTTP 请求. 并且功能更强大。

服务器返回响应,要怎么处理。success的值是一个函数。这个函数就会在收到响应的时候，被浏览器自动调用。被浏览器自动调用这个函数的时候，就会把响应的body，通过参数,传给这个函数。
浏览器和服务器交互过程(引入 ajax 后):