现代前端技术解析：前端与协议

HTTP 协议

---

HTTP (超文本传输协议) 是 WWW 服务器和用户请求代理之间通过应答请求模式传输超文本内容的一种协议

HTTP 报文

浏览器端请求：

1. 头部
   请求类型、请求 URI、协议版本、扩展内容
   请求头部域内容：Accept/Cookie/Cache-Control/Host 等
2. 空行
   由一个回车符和一个换行符组成，用于区分报文头部和正文
3. 正文
   请求内容，如：POST、PUT

服务器端响应：

1. 头部
   状态码、状态描述、协议版本、扩展内容
   响应头部域内容：Date/Content-Type/Cache-Control/Expires 等
2. 空行
3. 正文

HTTP 1.1

长连接：
HTTP 1.1 请求头部默认包含 keep-alive

协议扩展切换：
头部中包含 Upgrade 头并让服务器根据请求切换到其他协议，返回 101 状态码

缓存控制

HTTP 1.1 增加了 Cache-Control 头域，支持 max-age 表示相对过期时间

判断返回状态码是 200 or 304

1. 浏览器查询 Cache-Control 判断内容是否过期，若没有过期则直接读取缓存文件，不发送 HTTP 请求
2. 若上次文件返回头中包含 Etag 信息，则浏览器发送请求时带上 If-None-Match 字段，服务端判断若 Etag 未修改则返回 304，否则返回 200
3. 若上次文件返回头中包含 Last-Modified 信息，则浏览器发送请求时带上 If-Modified-Since 字段，服务端判断若 Last-Modified 有效则返回 304，否则返回 200
4. 若 Etag 和 Last-Modified 都不存在，则直接向服务器请求内容

支持超文本文件的部分传输

HTTP 2

优点：

1. 完全二进制传输，对消息头采用 HPACK 压缩传输，最大限度节省了传输带宽
2. 使用 TCP 多路复用来降低网络请求建立和关闭的开销，多个请求可以通过一个 TCP 连接并发完成
3. 支持传输流的优先级和流量控制机制
4. 支持服务器端主动推送

Web 安全机制

---

XSS（跨站脚本攻击）

通常由带有页面可解析内容的数据未经处理直接插入到页面上解析导致的

1. 存储型 XSS
   前端未经过处理的数据存储到数据库中，然后从数据库中读取出来又直接插入页面中导致的
2. 反射型 XSS
   在网页 URL 参数中注入了可解析内容的数据导致的
3. MXSS（DOM XSS）
   渲染 DOM 时将攻击脚本插入 DOM 属性中被解析导致的

SQL 注入攻击

页面提交数据到服务器端后，服务器端未进行数据验证就将数据直接拼接到 SQL 语句中执行导致的

CSRF

指非源站点按照源站点的数据请求格式提交非法数据给源站点服务器的一种攻击方式

解决方法：
通过页面 Token 提交验证的方式验证是否为源站点提交的数据

网络请求劫持

1. DNS 劫持
   篡改 DNS 服务器上的域名解析记录，使正确的网址不能访问或被解析指向另一网站 IP
2. HTTP 劫持
   在网站内容请求返回时，在正常的数据包中插入或修改成为攻击者设计的网络数据包
3. 预防：尽量使用 HTTPS 协议访问网站

HTTPS 协议通信过程

加入 SSL 层加密 HTTP 数据

公钥加密，私钥解密

前端实时协议

---

WebSocket

类似 Socket 方式的消息通信

优点：双向数据实时通信

最小的传输单位为帧，流式的传输

缺点：不是所有浏览器都支持

Poll（轮询）和 Long-poll（长轮询）

Poll 定时向服务器发送请求轮询，比较消耗系统资源

Long-poll 设置一个较长的时间等待，接收到服务器传回的消息后再发送下一条查询请求，不用定时。例如：二维码扫描登录跳转页面。

DDP 协议（分布式数据协议）

一种新型和客户端与服务端的实时通信协议，但目前兼容性不是很好

REST（表述性状态转化）数据协议规范

---

URI 的格式：路径/版本/接口名 path/v1/addBook

与 Native 交互协议

---

Web App、Native App、Hybrid App

Hybrid App 结合了 Web App 和 Native App 的优点，应用广泛