第六届360前端星计划_前端常用的 HTTP 知识

主讲人：李成银

一、HTTP

1. HTTP在浏览器网络中的位置
   
2. HTTP是应用层协议

联网细节交给了通用的传输协议：TCP/UDP

3. 请求/响应报文

请求：
<method> <request-URL> <version>
<headers>

<entity-body>
返回：
<version> <status> <respon-phrase>
<headers>

<entity-body>

4. 请求类型
   
5. 状态码
   
6. 常见状态码
   
7. URL
   受限字符：%/.#?;:$+@&= 以及非US-ASCⅡ字符集字符

<scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>

http://<host>:<port>/<path>?<query>#<frag>

ftp://<user>:<password>@<host>:<port>/<path>;<params>

6. Header 分类

1）通用

• Date: Tue, 3 Oct 2019 02:16:00 GMT
• Connection: close

2）请求

• User-Agent: Mozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
• Accept: /

3） 响应

• Server: Nginx
• Last-Modified: Thu, 16 Oct 2019 10:15:16 GMT

4）实体

• Content-Type: text/html; charset=utf-8
• Content-Length: 100

5）扩展（自定义）

• X-Powered-By: thinkjs-3.0.4
• X-Cache: hit

7. Cookie

GET / HTTP/1.1
Host: m.so.com
Connection: keep-alive
Cookie: __guid=34870781.3073803881376862000

HTTP/1.1 200 OK
Server: nginx/1.2.9
Date: Wed, 08 Oct 2014 05:59:59 GMT
Connection: keep-alive
Set-Cookie: thinkjs=s4mhqotbdbg9uh917lu8d5bub5; path=/
Content-Encoding: gzip

Set-Cookie: <name>=<value>[; =]... [; expires=][; domain=] [; path=][; secure][; httponly][; samesite=]

响应头里也可以有多个 Set-Cookie

8. Cookie安全策略

• path
• domain (hostonly*)
• expires (max-age)
• secure
• httponly
• SameSite

格式化后的cooki：

• XSS 漏洞盗取 Cookie，设置 httponly
• CSRF 漏洞，设置 token/samesite

9. Session

• 服务器侧对应为 Session，基于 Cookie 存放用户信息
• Cookie 有效期为 Session（随浏览器进程退出而失效）

10. Content-Type
    1）标识返回内容的类型
    
    2）标识提交数据的类型
    

提交的4种类型：

• application/x-www-form-urlencoded

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

• multipart/form-data

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"

title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

• application/json

POST http://www.example.com HTTP/1.1 
Content-Type: application/json;charset=utf-8

{"title":"test","sub":[1,2,3]}

• text/xml

POST http://www.example.com HTTP/1.1 
Content-Type: text/xml

<?xml version="1.0"?>
<methodCall>
    <methodName>examples.getStateName</methodName>
    <params>
        <param>
            <value><i4>41</i4></value>
        </param>
    </params>
</methodCall>

二、性能优化

1. keep-alive

• HTTP 1.0 原本不支持 Keep-Alive，后来扩充了 Connection: Keep-Alive
• HTTP 1.1 默认支持 Keep-Alive，除非显式指明 Connection: close

2. 减少网络传输大小

• 主要是文本资源
• 大约减少 60%
• 文件过小不宜压缩（<1K）
  

3. 缓存
   首次请求
   
   二次请求
   
   常用指令：
   

• LocalStorage：维护版本，提升缓存速度
• ServiceWorker：可拦截请求，可控制缓存情况

4. http2/http3

1）HTTP2

• 二进制传输
• 多路复用
• 头部压缩
• server push

2）HTTP3

• 基于 QUIC 协议（UDP）

5. HTTP 抓包工具

• Wireshark
• Fiddler
• Firebug for Firefox
• Chrome 开发者工具
• IE8+ 自带的开发者工具

6. HTTP 发包工具

• telnet / curl
• Fiddler *
• Tamper for Firefox
• Postman for Chrome *
• Paw for OSX

三、推荐书籍