图片 9

HTTP2特性预览和抓包分析,一分钟预览

参考资料

  1. Turn-on HTTP/2 today!
  2. Hypertext Transfer Protocol Version 2
    (HTTP/2)
  3. npm spdy
  4. npm spdy push
  5. How to create a self-signed SSL
    Certificate
  6. HPACK: Header Compression for
    HTTP/2
  7. 用Node.js创建自签定的HTTPS服务器

    1 赞 收藏
    评论

图片 1

抓包分析

能够用chrome
内部自带的工具(chrome://net-internals/)查看http2流量,但这一个包信息量相比少,结构不比大家耳熟能详的Fiddler%E6%9F%A5%E7%9C%8Bhttp2%E6%B5%81%E9%87%8F,%E4%BD%86%E8%BF%99%E4%B8%AA%E5%8C%85%E4%BF%A1%E6%81%AF%E9%87%8F%E6%AF%94%E8%BE%83%E5%B0%91%EF%BC%8C%E7%BB%93%E6%9E%84%E4%B8%8D%E5%A6%82%E6%88%91%E4%BB%AC%E7%86%9F%E6%82%89%E7%9A%84Fiddler)
or Wireshark清晰。

Fiddler是直接当做中间代理,能够看做客户端直接与服务端通信,能够像浏览器这样直接解密https,直接看到https报文,
不过由于受限于.NET
Framework暂不辅助Http贰.

用wireshark间接抓包 https:44叁端口的流量是这么的:
图片 2

数据被加密了,协议细节完全看不到。
这里介绍了1种艺术获得私钥解包。
抓包https包时要把代理关了,不然私钥不是同一个,wireshark无法解包(被那些坑了两时辰T
T)。

图片 3

图片 4

二个包内有多少个不等的Steam ID

图片 5

追踪解密后TCP流能够看到,由于多路复用,各类区别的央求交替传输分歧的帧,所以流数据是乱的。但在同样帧内数据照旧好端端的。

浏览器帮助

主流浏览器都只支持 HTTP/二 Over TLS

四. 头音讯压缩:

HTTP/② 对音信头选取
HPACK
实行削减传输,能够节省新闻头占用的网络的流量。而 HTTP/壹.x
每一遍请求,都会带走大批量冗余头音信,浪费了过多带宽财富。
HTTP2对http头建立索引表,相同的头只发送hash
table 的index, 同时还用了霍夫曼编码和观念的gzip压缩。

1. 二进制协议

HTTP/二 选用2进制格式传输数据,而非 HTTP/一.x 的文本格式

图片 6

 

由上图能够见到HTTP二在原先的应用层和HTTP层加多了一层二进制传输。

二进制协议的3个益处是,能够定义额外的帧。

HTTP/2定义了近十种帧(详情可分析抓包文件),为今后的高级应用打好了根基。若是采用文本达成这种效益,解析数据将会变得分外艰辛,2进制解析则有利于得多。
RFC7540:Frame Definitions

图片 7

协议中定义的帧

3. 数据流

数量流发送到3/6的时候,客户端和服务器都得以发送时域信号(凯雷德ST_STREAM帧),撤废以此数据流。壹.一版撤废数据流的唯一方法,就是倒闭TCP连接。那正是说,HTTP/2可以打消某一回呼吁,同时有限补助TCP连接还开垦着,能够被其它请求使用。

HTTP一个性大概浏览

二. 多路复用

HTTP/2复用TCP连接,在2个接2连叁里,客户端和浏览器都足以而且发送多少个请求或答复,而且并非依照顺序依次对应,那样就幸免了”队头堵塞”(见TCP/IP详解卷壹)。
各类 Frame Header 都有三个 Stream ID
就是被用来落实该脾气。每一趟请求/响应使用分歧的 Stream ID。就像同1个 TCP
链接上的数额包通过 IP: PO帕杰罗T 来区别出多少包去往哪里一样。
图片 8

rfc7540: HTTP2
Multiplexing中对Multiplexing的说明

Streams and Multiplexing

   A "stream" is an independent, bidirectional sequence of frames
   exchanged between the client and server within an HTTP/2 connection.
   Streams have several important characteristics:

   o  A single HTTP/2 connection can contain multiple concurrently open
      streams, with either endpoint interleaving frames from multiple
      streams.

   o  Streams can be established and used unilaterally or shared by
      either the client or server.

   o  Streams can be closed by either endpoint.

   o  The order in which frames are sent on a stream is significant.
      Recipients process frames in the order they are received.  In
      particular, the order of HEADERS and DATA frames is semantically
      significant.

   o  Streams are identified by an integer.  Stream identifiers are
      assigned to streams by the endpoint initiating the stream.

node中启用http2

node中可以用spdy模块来运转应用,spdy的api,与https是千篇一律的且主流浏览器只协理HTTP/2Over TLS,需求配备 私钥和证明,本地自签订契约服务器配置可参考引用6,7

JavaScript

const express = require(‘express’); const fs = require(‘fs’); const
http2 = require(‘spdy’); const path = require(‘path’); const options = {
key: fs.readFileSync(‘./keys/privatekey.pem’), cert:
fs.readFileSync(‘./keys/certificate.pem’) }; const app = new express();
http2 .createServer(options, app) .listen(8080, ()=>{
console.log(`Server is listening on . You can
open the URL in the browser.`) } ) app.use(“/”,(req,res)=>{
res.send(“hello http2!”); })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const express = require(‘express’);
const fs =  require(‘fs’);
const http2 = require(‘spdy’);
const path = require(‘path’);
const options = {
    key: fs.readFileSync(‘./keys/privatekey.pem’),
    cert: fs.readFileSync(‘./keys/certificate.pem’)
};
const app = new express();
http2
  .createServer(options, app)
  .listen(8080, ()=>{
    console.log(`Server is listening on https://localhost:8080.
     You can open the URL in the browser.`)
  }
)
app.use("/",(req,res)=>{
    
  res.send("hello http2!");
})

如上,对于已存在的品种只要修改几行代码就足以使用http二.0了。

请求头和响应头:

表明:新版的Chrome,对不安全的证书(如本地的自签定服务)会降级到http壹.1,firefox不会现出此难题。

启动server push

JavaScript

app.get(“/”,(req,res)=>{ var stream = res.push(‘/app.js’, {
//服务器推送 status: 200, // optional method: ‘GET’, // optional
request: { accept: ‘*/*’ }, response: { ‘content-type’:
‘application/javascript’ } }) stream.on(‘error’, function() { })
stream.end(‘console.log(“http2 push stream, by Lucien “);’)
res.send(`hello http2! <script
src=”/app.js”></script>`);//express 并没有host static
,这个app.js 来自push })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
app.get("/",(req,res)=>{
    var stream = res.push(‘/app.js’, {   //服务器推送
    status: 200, // optional
    method: ‘GET’, // optional
    request: {
      accept: ‘*/*’
    },
    response: {
      ‘content-type’: ‘application/javascript’
    }
  })
  stream.on(‘error’, function() {
  })
  stream.end(‘console.log("http2 push stream, by Lucien ");’)
 
  res.send(`hello http2!
    <script src="/app.js"></script>`);//express 并没有host static ,这个app.js 来自push
})

源码在github

响应

HTTP/2 源自 SPDY/2

SPDY 类别协议由谷歌费用,于 二〇〇九 年堂而皇之。它的布署指标是下落 10分之伍的页面加载时间。当下游人如织著名的网络卖家都在祥和的网址或 应用软件 中动用了
SPDY 体系协议(当前风靡版本是
SPDY/三.壹),因为它对品质的升官是由此可见的。主流的浏览器(谷歌、火狐、Opera)也都早已经支撑
SPDY,它已经成为了工业标准,HTTP Working-Group 最后决定以 SPDY/2为根基,开辟 HTTP/二。HTTP/二标准于20一伍年15月以奇骏FC 7540规范刊出。

可是,HTTP/2 跟 SPDY 仍有例外的地点,重若是以下两点:

HTTP/2 援救明文 HTTP 传输,而 SPDY 强制行使 HTTPS
HTTP/二 音讯头的压缩算法选取 HPACK ,而非 SPDY 选取的 DEFLATE(多谢网上好友
逸风之狐指正)

磋商文书档案请见:rfc7540:HTTP2

五. 服务器推送

服务端能够越来越快的把能源推送给客户端。例如服务端能够积极把 JS 和 CSS
文件推送给客户端,而不需求客户端解析 HTML
再发送那几个请求。当客户端须要的时候,它早已在客户端了。

那就是说存在三个题材,就算客户端设置了缓存如何是好。有三种办法(来自社区)

  • 客户端能够由此安装SETTINGS_ENABLE_PUSH为0值公告服务器端禁止使用推送
  • 察觉缓存后,客户端和服务器都足以发送功率信号(大切诺基ST_STREAM帧),裁撤以此数据流。
  • cache-digest(提案)

    rfc7540: HTTP2 Server
    Push

    #### 陆. 流优先级

    HTTP二允许浏览器内定能源的优先级。

    rfc7540: Stream
    Priority

最后

谈到底,HTTP二有更加高的传输速度,更加少的财富占用,能够去除各个质量优化tricks(如css
sprite,inline-image.)
转车WEB开辟的美好现在T.T

一分钟预览 HTTP二 特征和抓包分析

2016/09/26 · JavaScript
· HTTP/2

原作出处: 段隆贤   

浏览器支持

图片 9

主流浏览器都只援救 HTTP/二 Over TLS

发表评论

电子邮件地址不会被公开。 必填项已用*标注