主讲人:李成银
一、HTTP
- HTTP在浏览器网络中的位置
- HTTP是应用层协议
联网细节交给了通用的传输协议:TCP/UDP
3. 请求/响应报文
请求:
<method> <request-URL> <version>
<headers>
<entity-body>
返回:
<version> <status> <respon-phrase>
<headers>
<entity-body>
- 请求类型
- 状态码
- 常见状态码
- 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>
- 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
- 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>[; <name>=<value>]... [; expires=<date>][; domain=<domain_name>] [; path=<some_path>][; secure][; httponly][; samesite=<samesite_value>]
响应头里也可以有多个 Set-Cookie
- Cookie安全策略
- path
- domain (hostonly*)
- expires (max-age)
- secure
- httponly
- SameSite
格式化后的cooki:
- XSS 漏洞盗取 Cookie,设置 httponly
- CSRF 漏洞,设置 token/samesite
- Session
- 服务器侧对应为 Session,基于 Cookie 存放用户信息
- Cookie 有效期为 Session(随浏览器进程退出而失效)
- 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>
二、性能优化
- keep-alive
- HTTP 1.0 原本不支持 Keep-Alive,后来扩充了 Connection: Keep-Alive
- HTTP 1.1 默认支持 Keep-Alive,除非显式指明 Connection: close
- 减少网络传输大小
- 主要是文本资源
- 大约减少 60%
- 文件过小不宜压缩(<1K)
- 缓存
首次请求
二次请求
常用指令:
- LocalStorage:维护版本,提升缓存速度
- ServiceWorker:可拦截请求,可控制缓存情况
- http2/http3
1)HTTP2
- 二进制传输
- 多路复用
- 头部压缩
- server push
2)HTTP3
- 基于 QUIC 协议(UDP)
- HTTP 抓包工具
- Wireshark
- Fiddler
- Firebug for Firefox
- Chrome 开发者工具
- IE8+ 自带的开发者工具
- HTTP 发包工具
- telnet / curl
- Fiddler *
- Tamper for Firefox
- Postman for Chrome *
- Paw for OSX