[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"$f14arwn2jsy5wn":3},"\u003Ch1 id=\"原创网站如何开启-http2\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#原创网站如何开启-http2\">\u003Cspan>\u003Ca href=\"#%E7%BD%91%E7%AB%99%E5%A6%82%E4%BD%95%E5%BC%80%E5%90%AF-http-2\">原创网站如何开启 HTTP\u002F2\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fh1>\n\u003Ch2 id=\"http2是什么\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#http2是什么\">\u003Cspan>\u003Ca href=\"#http-2%E6%98%AF%E4%BB%80%E4%B9%88\">HTTP\u002F2是什么？\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>在\u003Ca href=\"https:\u002F\u002Fdatatracker.ietf.org\u002Fdoc\u002Fhtml\u002Frfc9113\">RFC 9113 HTTP\u002F2\u003C\u002Fa>介绍了 HTTP\u002F2: 通过引入字段压缩和允许在同一连接上进行多个并发交换，使网络资源得到更有效的利用，并减少了延迟。\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>This specification describes an optimized expression of the semantics of the Hypertext Transfer Protocol (HTTP), referred to as HTTP version 2 (HTTP\u002F2). HTTP\u002F2 enables a more efficient use of network resources and a reduced latency by introducing field compression and allowing multiple concurrent exchanges on the same connection. This document obsoletes RFCs 7540 and 8740.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>在之前的\u003Ca href=\"https:\u002F\u002Fwww.rfc-editor.org\u002Frfc\u002Frfc7540#section-4.1\">RFC 7540 Hypertext Transfer Protocol Version 2 (HTTP\u002F2)\u003C\u002Fa>可以找到 Frame Format\u003C\u002Fp>\n\u003Cpre class=\"shiki vitesse-dark\" style=\"background-color:#121212;color:#dbd7caee\" tabindex=\"0\">\u003Ccode class=\"language-text\">\u003Cspan class=\"line\">\u003Cspan>4.1.  Frame Format\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>   All frames begin with a fixed 9-octet header followed by a variable-\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>   length payload.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    +-----------------------------------------------+\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    |                 Length (24)                   |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    +---------------+---------------+---------------+\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    |   Type (8)    |   Flags (8)   |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    +-+-------------+---------------+-------------------------------+\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    |R|                 Stream Identifier (31)                      |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    +=+=============================================================+\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    |                   Frame Payload (0...)                      ...\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    +---------------------------------------------------------------+\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>                          Figure 1: Frame Layout\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"客户端如何检测-http2\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#客户端如何检测-http2\">\u003Cspan>\u003Ca href=\"#%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%A6%82%E4%BD%95%E6%A3%80%E6%B5%8B-http-2\">客户端如何检测 HTTP\u002F2\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ch3 id=\"curl\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#curl\">\u003Cspan>\u003Ca href=\"#curl\">CURL\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>查看 Response Header 来确认服务器支持的 HTTP 的版本。\u003C\u002Fp>\n\u003Cpre class=\"shiki vitesse-dark\" style=\"background-color:#121212;color:#dbd7caee\" tabindex=\"0\">\u003Ccode class=\"language-text\">\u003Cspan class=\"line\">\u003Cspan>$ curl -I https:\u002F\u002Fipw.cn\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>HTTP\u002F2 200 \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>server: nginx\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>content-type: text\u002Fhtml\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>accept-ranges: bytes\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>content-length: 11710\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>strict-transport-security: max-age=16070400;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>HTTP\u002F2 需要客户端和服务端都支持，一般浏览器都支持。\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>从 CURL 的官方文档 可以支持 curl 7.47.0 才支持 HTTP\u002F2 访问。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>Since 7.47.0, the curl tool enables HTTP\u002F2 by default for HTTPS connections.\u003C\u002Fp>\n\u003Ch3 id=\"chrome\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#chrome\">\u003Cspan>\u003Ca href=\"#chrome\">Chrome\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>在审查模式中，切换到\u003Ccode>Network Tab\u003C\u002Fcode>，列表页中增加\u003Ccode>Protocol\u003C\u002Fcode>一列，访问支持 HTTP2 的页面，可以看到值为\u003Ccode>h2\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdoc\u002Fhttp2-chrome.png\" alt=\"http2 chrome\">\u003C\u002Fp>\n\u003Ch2 id=\"wireshark-抓取并分析-http2协议\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#wireshark-抓取并分析-http2协议\">\u003Cspan>\u003Ca href=\"#wireshark-%E6%8A%93%E5%8F%96%E5%B9%B6%E5%88%86%E6%9E%90-http2%E5%8D%8F%E8%AE%AE\">Wireshark 抓取并分析 HTTP2协议\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>HTTP2 位于 TLS 协议之上，消息会被加密，需要把通信的\u003Ccode>Pre-Master-Secret\u003C\u002Fcode>打印出来，并被 Wireshark 读取，以便 Wireshark 能解开被 TLS 加密的上层 HTTP2 协议。\u003C\u002Fp>\n\u003Cp>以 macOS 系统为例。\u003C\u002Fp>\n\u003Ch3 id=\"打印-pre-master-secret\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#打印-pre-master-secret\">\u003Cspan>\u003Ca href=\"#%E6%89%93%E5%8D%B0-pre-master-secret\">打印 Pre-Master-Secret\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cpre class=\"shiki vitesse-dark\" style=\"background-color:#121212;color:#dbd7caee\" tabindex=\"0\">\u003Ccode class=\"language-text\">\u003Cspan class=\"line\">\u003Cspan>mkdir -p ~\u002Ftls\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>echo -e \"\\nexport SSLKEYLOGFILE=~\u002Ftls\u002Fsslkeylog.log\" \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>souce  ~\u002F.bash_profile\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3 id=\"设置-wireshark-tls-协议读取-pre-master-secret\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#设置-wireshark-tls-协议读取-pre-master-secret\">\u003Cspan>\u003Ca href=\"#%E8%AE%BE%E7%BD%AE-wireshark-tls-%E5%8D%8F%E8%AE%AE%E8%AF%BB%E5%8F%96-pre-master-secret\">设置 Wireshark TLS 协议读取 Pre-Master-Secret\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>在 Wireshark Preferences 的 Protocols 中找到 TLS，做如下配置：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdoc\u002Fwireshark_tls_preferences.png\" alt=\"wireshark http2\">\u003C\u002Fp>\n\u003Ch3 id=\"启动-chrome\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#启动-chrome\">\u003Cspan>\u003Ca href=\"#%E5%90%AF%E5%8A%A8-chrome\">启动 Chrome\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>退出 Chrome，在刚才的终端中打开 Chrome，确保能加载到上面的环境变量。\u003C\u002Fp>\n\u003Cpre class=\"shiki vitesse-dark\" style=\"background-color:#121212;color:#dbd7caee\" tabindex=\"0\">\u003Ccode class=\"language-text\">\u003Cspan class=\"line\">\u003Cspan>open \u002FApplications\u002FGoogle\\ Chrome.app\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3 id=\"开启-wireshark-抓包\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#开启-wireshark-抓包\">\u003Cspan>\u003Ca href=\"#%E5%BC%80%E5%90%AF-wireshark-%E6%8A%93%E5%8C%85\">开启 Wireshark 抓包\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>可以看到建立了 TLS1.3 的链接后，就开始 HTTP2 的协议通信。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Chrome 请求首页\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Stream ID = 1，这也是与 HTTP\u002F1.1 最大的区别，是流，而不是 文本。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdoc\u002Fwireshark_http2_1.png\" alt=\"wireshark http2\">\u003C\u002Fp>\n\u003Cul>\n\u003Cli>服务端返回首页\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Stream ID = 1\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdoc\u002Fwireshark_http2.png\" alt=\"wireshark http2\">\u003C\u002Fp>\n\u003Ch2 id=\"nginx-开启-http2\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#nginx-开启-http2\">\u003Cspan>\u003Ca href=\"#nginx-%E5%BC%80%E5%90%AF-http-2\">Nginx 开启 HTTP\u002F2\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>从 Nginx 官网\u003Ca href=\"https:\u002F\u002Fnginx.org\u002Fen\u002Fdocs\u002Fhttp\u002Fngx_http_v2_module.html\">Module ngx_http_v2_module\u003C\u002Fa>可以了解到 Nginx 从 1.9.5 版本开始支持 HTTP\u002F2。\u003C\u002Fp>\n\u003Cp>目前主流发行版中的 Nginx 默认支持 HTTP2，自行编译可加上\u003Ccode>--with-http_v2_module\u003C\u002Fcode>参数。\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>The ngx_http_v2_module module (1.9.5) provides support for HTTP\u002F2 and supersedes the ngx_http_spdy_module module.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cblockquote>\n\u003Cp>This module is not built by default, it should be enabled with the --with-http_v2_module configuration parameter.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>执行命令\u003Ccode>nginx -V\u003C\u002Fcode>看编译参数中是否带\u003Ccode>--with-http_v2_module\u003C\u002Fcode>来确认 Nginx 是否已经支持 HTTP2\u003C\u002Fp>\n\u003Cp>开启 HTTP2的前提是开启 SSL，只需要在 ssl 后面加上 http2 即可。\u003C\u002Fp>\n\u003Cpre class=\"shiki vitesse-dark\" style=\"background-color:#121212;color:#dbd7caee\" tabindex=\"0\">\u003Ccode class=\"language-text\">\u003Cspan class=\"line\">\u003Cspan>server {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    listen 443 ssl http2;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    ssl_certificate server.crt;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    ssl_certificate_key server.key;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>具体示例详见\u003Ca href=\"\u002Fdoc\u002Fserver\u002Fnginx_ipv6\">Nginx 开启 IPv6\u003C\u002Fa>\u003C\u002Fp>\n",1787918414444]