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

前端与协议

HTTP协议简介

完整的HTTP报文由头部、空行、正文三部分组成。目前最广泛使用的是HTTP1.1。

• 长连接 通过请求头中的keep-alive控制。在HTTP1.0中可以通过Connection: keep-alive开启长连接。长连接可以让客户端和服务器端之间的连接在一段时间内持续有效，当一个请求文件的传输连接建立后，服务器保持该连接的时间段内，其他文件请求可以复用这个已经建立好的连接。需要注意，长连接并不会节省传输内容的网络开销
• 协议扩展切换 HTTP1.1协议中支持在请求头部中包含Upgrade头让服务器知道客户端可以知道它能支持其他备用通用协议的一种机制。如，可以在请求头中增加Connection: Upgrade和Upgrade: websocket来告诉服务器需要切换成WebSocket协议进行通信。如果服务器端支持，会在响应头中返回Upgrade和Connection，同时返回状态码101表示请求还需要完成协议的切换。
• 缓存控制 HTTP1.0中浏览器控制缓存是通过Expires进行实现的，Expires根据绝对时间来刷新缓存内容。HTTP1.1中增加了Cache-Control可以支持max-age来表示相对时间。

HTTP2

​ 说道HTTP2，必须先说SPDY协议，SPDY是一种基于HTTP的兼容协议，支持多路复用和服务器推送技术，压缩了HTTP头部减小了请求大小，但其强制使用SSL传输协议，即必须是HTTPS。HTTP2就是基于SPDY协议规范为基础，不强制使用SSL。

• HTTP2采用完全二进制的格式来传输数据，而HTTP1.1默认文本格式；
• HTTP2使用TCP多路复用的方式来降低网络请求连接建立和关闭开销，多个请求可以通过一个TCP连接来并发完成； ​ TCP复用传输发生在传输层；而keep-alive控制的文本的连接复用是在应用层的，连接复用是串行的，即一个文本传输完后，下个文本才能复用这个链接。
• HTTP2支持传输流的优先级和流量控制机制，可以在服务器端对优先级高的文件优先传输（比如，可以设置CSS文件先于JS文件传输，这样就无需将JS文件写到HTML文件底部了）；
• 支持服务器端推送。

WEB安全机制

基础安全知识

1. XSS（Cross Site Script，跨站脚本攻击） XSS通常由带有页面可解析内容的数据未经处理直接插入到页面上解析导致的。根据攻击脚本的引入位置可分为：
   • 存储型XSS：由前端提交的数据未经处理直接存储到数据库，然后从数据库中读取出来后直接插入到页面中所导致；
   • 反射型XSS：在网页URL参数中注入了可解析内容的数据而导致的，如果直接获取URL中不合法的内容并插入到页面就会出现问题；
   • MXSS：渲染DOM属性时导致攻击脚本插入DOM属性中被解析而导致的。

   要防范XSS攻击，需要验证输入到页面上的所有内容是否安全。 <div>{{ content }}</div> 可以对content内容进行转义，防止存在alert等。 /** * HTML字符转义编码 */ function html_encode(str) { var s = ""; if (str.length == 0) return ""; s = str.replace(/&/g, "&gt;"); s = s.replace(/</g, "&lt;"); s = s.replace(/>/g, "&gt;"); s = s.replace(/ /g, "&nbsp;"); s = s.replace(/\'/g, "&#39;"); s = s.replace(/\"/g, "&quot;"); s = s.replace(/\n/g, "<br>"); return s; } /** * HTML字符转义解码 */ function html_decode(str) { var s = ""; if (str.length == 0) return ""; s = str.replace(/&gt;/g, "&"); s = s.replace(/&lt;/g, "<"); s = s.replace(/&gt;/g, ">"); s = s.replace(/&nbsp;/g, " "); s = s.replace(/&#39;/g, "\'"); s = s.replace(/&quot;/g, "\""); s = s.replace(/<br>/g, "\n"); return s; } 更巧妙的编码、解码 /** * HTML字符转义编码 */ function htmlencode(s){ var div = document.createElement('div'); div.appendChild(document.createTextNode(s)); return div.innerHTML; } /** * HTML字符转义解码 */ function htmldecode(s){ var div = document.createElement('div'); div.innerHTML = s; return div.innerText || div.textContent; } 上述HTML内容可以如下编写，防止被XSS攻击： <div>{{ html_encode(content) }}</div> <div>{{ htmlencode(content) }}</div>

2. SQL（Structured Query Language，结构化查询语言）注入 主要是因为页面提交数据到数据库端后，在服务器端未进行数据验证，就将数据直接拼接到SQL语句中执行。
3. CSRF（Cross-site Request Forgery，跨站请求伪造） 非源站点按照源站点的数据请求格式提交非法数据给源站点服务器的一种攻击方法。通常比较安全的是通过页面Token提交验证的方式来验证请求是否为源站点页面提交的，来阻止跨站伪造请求的发生。

请求劫持

网络请求劫持目前主要分为两种：DNS劫持和HTTP劫持。

DNS劫持

攻击者劫持DNS服务器，通过某种手段获得某域名的解析记录控制权，进而修改此域名的解析结果，返回给用户一个错误的DNS查询结果（IP），用户请求被导向了错误的IP指向的服务器，从而达到获取用户资料或者破坏原网站的正常服务的目的。

HTTP劫持

在用户浏览器与访问的目的服务器之间所建立的网络数据传输通道中从网关或防火墙层上监视特定数据信息，当满足一定条件时，就会在正常的数据包中插入或修改为攻击者设计的网络数据包，目的是让用户获得错误的数据或者弹出广告等其他内容。

HTTPS

HTTPS是通过加入SSL层来加密HTTP数据进行安全传输的HTTP协议。客户端和服务端都有公钥、私钥。

• 【客户端】发起连接请求，告知将建立HTTPS连接；
• 【服务端】收到通知，拿自己公钥返回给客户端，如果是第一次请求，同时要告诉客户端进行连接验证；
• 如果需要验证，【客户端】收到验证请求，将验证串通过服务端公钥加密、同时将自己公钥一起发给服务端；
• 【服务端】通过自己的私钥解密加密串，然后通过接收到的客户端公钥加密刚解密的串，发回给客户端；
• 【客户端】通过自己的私钥解密加密串，判断是否为自己开始发送的验证串；
• 如果正确，安全连接建立，后续通过服务端公钥加密发送请求数据，服务端通过客户端公钥发送响应数据。

注意： HTTPS请求头可以增加upgrade-insecure-requests，（服务器同样需要增加header("Content-Security-Policy: upgrade-insecure-requests")）用于让页面打开的后续请求自动从HTTP请求升级到HTTPS请求。否则，HTTPS加载HTTP资源会产生Mixed Content类型错误，导致无法加载。

浏览器Web安全控制

除了上述提及的HTTPS，浏览器还可以通过某些特定的head头配置进行很多安全控制。

• X-XSS-Protection 防止浏览器中的反射性XSS（跨站脚本攻击）问题。
• Strict-Transport-Security（STS） 强制所有通信使用HTTPS。Chrome浏览器下可以通过chrome://net-internals/#hsts查看浏览器中站点的STS列表。
• Content-Security-Policy（CSP） 通过CSP可以约束浏览器可以加载指定可信的域名来源的内容（这里的内容可以是脚本、图片、iframe、font、style等等远程资源）。
• Access-Control-Allow-Origin 决定哪些网站可以访问当前服务器资源。更多跨域方式请查看：八种方式实现跨域请求

前端实时协议

有时需要客户端和服务端之间实时连接进行通信。可以通过Ajax定时向服务器轮询来持续获取消息，但是其效率过于低；当然也可以通过

• WebSocket：请查看WebSocket、WebSocket-SockJS；
• Poll：定时想服务器发送请求轮询的方式；
• Long-poll：设置一个Timeout；在超时时间内如果有响应，立即返回；否则超时，重新发送长轮询请求；如，客户端扫描二维码登录网站
• DDP协议（Distributed Data Protocol，分布式数据协议）：一种新型和客户端与服务端的实时通信协议，Meteor框架的双向实时数据更新机制底层使用的就是DDP，目前兼容性不是很好。

RESTful数据协议规范

目前最流行的URI方式：路径/版本/接口名，如path/v1/book。

与Native交互协议

随着HTML5的出现，越来越多的开发者将Web嵌入的Native应用中，Hybrid App（Native App和Web App结合）在牺牲一小部分性能的前提下，适应了更多的移动应用开发场景。