前端常用的 HTTP 知识

前端常用的 HTTP 知识

360前端星计划-第七课
主讲：李成银老师

HTTP浏览器网络中的位置

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

• 请求/响应报文

<method> <request-URL> <version> 

<headers>


<entity-body>

<version> <status> <respon-phrase> 

<headers>


<entity-body>

• 请求类型
  
• 状态码
  
  常见状态码
  
• URL

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

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

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

受限字符：%/.#?;:$+@&= 以及非US-ASCⅡ字符集字符

• Header 分类

通用
Date: Tue, 3 Oct 2019 02:16:00 GMT
Connection: close
请求
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: */*
响应
Server: Nginx
Last-Modified: Thu, 16 Oct 2019 10:15:16 GMT
实体
Content-Type: text/html; charset=utf-8
Content-Length: 100
扩展（自定义）
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-Cooki

Cookie安全策略
path
domain (hostonly)
expires (max-age)
secure
httponly
SameSite

1. XSS 漏洞盗取 Cookie，设置 httponly
2. CSRF 漏洞，设置 token/samesite

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

• Content-Type

application/x-www-form-urlencoded
multipart/form-data
application/json
text/xml

性能优化

• keep-alive

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

• 减少网络传输大小
• 缓存
• http2/http3

HTTP2
·二进制传输
·多路复用
·头部压缩
·server push
HTTP3
·基于 QUIC 协议（UDP）

HTTP 抓包工具

• Wireshark
• Fiddler
• Firebug for Firefox
• Chrome 开发者工具
• IE8+ 自带的开发者工具
• telnet / curl
• Fiddler *
• Tamper for Firefox
• Postman for Chrome *
• Paw for OSX

推荐书籍