本文来自云栖社区程序猿小卡的技术分享。

1、前言

2、参考文章

• 《WebSocket详解（一）：初步认识WebSocket技术》
• 《WebSocket详解（二）：技术原理、代码演示和应用案例》
• 《WebSocket详解（三）：深入WebSocket通信协议细节》
• 《WebSocket详解（四）：刨根问底HTTP与WebSocket的关系(上篇)》
• 《WebSocket详解（五）：刨根问底HTTP与WebSocket的关系(下篇)》
• 《WebSocket详解（六）：刨根问底WebSocket与Socket的关系》
  

3、更多资料

4、什么是WebSocket

• WebSocket可以在浏览器里使用；
• 支持双向通信；
• 使用很简单。
  

4.1有哪些优点

• 1）支持双向通信，实时性更强；
• 2）更好的二进制支持；
• 3）较少的控制开销：
  连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部；
• 4）支持扩展：
  ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议（比如支持自定义压缩算法等）。
  

4.2需要学习哪些东西

• 如何建立连接；
• 如何交换数据；
• 数据帧格式；
• 如何维持连接。
  

5、入门例子

《理论联系实际：从零理解WebSocket的通信原理、协议格式、安全性）例子代码(52im.net).rar (3 KB , 下载次数: 40 , 售价: 2 金币)

6 年前 上传

请点击文件名下载附件！
售价: 2 金币  [记录]  [如何获取金钱？]

5.1服务端

var app = require('express')();
var server = require('http').Server(app);
var WebSocket = require('ws');

var wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
    console.log('server: receive connection.');
    
    ws.on('message', function incoming(message) {
        console.log('server: received: %s', message);
    });

    ws.send('world');
});

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

app.listen(3000);

5.2客户端

<script>
  var ws = new WebSocket('ws://localhost:8080');
  ws.onopen = function () {
    console.log('ws onopen');
    ws.send('from client: hello');
  };
  ws.onmessage = function (e) {
    console.log('ws onmessage');
    console.log('from server: ' + e.data);
  };
</script>

5.3运行结果

server: receive connection.
server: received hello

client: ws connection is open
client: received world

6、如何建立连接

6.1客户端：申请协议升级

GET / HTTP/1.1
Host: localhost:8080
Origin: [url=http://127.0.0.1:3000]http://127.0.0.1:3000[/url]
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: w4v7O6xFTi36lq3RNcgctw==

Connection: Upgrade：表示要升级协议
Upgrade: websocket：表示要升级到websocket协议。
Sec-WebSocket-Version: 13：表示websocket的版本。如果服务端不支持该版本，需要返回一个Sec-WebSocket-Versionheader，里面包含服务端支持的版本号。
Sec-WebSocket-Key：与后面服务端响应首部的Sec-WebSocket-Accept是配套的，提供基本的防护，比如恶意的连接，或者无意的连接。

6.2服务端：响应协议升级

HTTP/1.1 101 Switching Protocols
Connection:Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: Oy4NRAQ13jhfONC7bP8dTKb4PTU=

6.3Sec-WebSocket-Accept的计算

• 1）将Sec-WebSocket-Key跟258EAFA5-E914-47DA-95CA-C5AB0DC85B11拼接；
• 2）通过SHA1计算出摘要，并转成base64字符串。
  

>toBase64( sha1( Sec-WebSocket-Key + 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 )  )

const crypto = require('crypto');
const magic = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';
const secWebSocketKey = 'w4v7O6xFTi36lq3RNcgctw==';

let secWebSocketAccept = crypto.createHash('sha1')
    .update(secWebSocketKey + magic)
    .digest('base64');

console.log(secWebSocketAccept);
// Oy4NRAQ13jhfONC7bP8dTKb4PTU=

7、数据帧格式

• 发送端：将消息切割成多个帧，并发送给服务端；
• 接收端：接收消息帧，并将关联的帧重新组装成完整的消息。
  

7.1数据帧格式概览

• 从左到右，单位是比特。比如FIN、RSV1各占据1比特，opcode占据4比特；
• 内容包括了标识、操作代码、掩码、数据、数据长度等。（下一小节会展开）
  

WX20180115-121318@2x.jpg (46.61 KB, 下载次数: 1191)

下载附件  保存到相册

6 年前 上传

7.2数据帧格式详解

• %x0：表示一个延续帧。当Opcode为0时，表示本次数据传输采用了数据分片，当前收到的数据帧为其中一个数据分片；
• %x1：表示这是一个文本帧（frame）；
• %x2：表示这是一个二进制帧（frame）；
• %x3-7：保留的操作代码，用于后续定义的非控制帧；
• %x8：表示连接断开；
• %x8：表示这是一个ping操作；
• %xA：表示这是一个pong操作；
• %xB-F：保留的操作代码，用于后续定义的控制帧。
  

• x为0~126：数据的长度为x字节；
• x为126：后续2个字节代表一个16位的无符号整数，该无符号整数的值为数据的长度；
• x为127：后续8个字节代表一个64位的无符号整数（最高位为0），该无符号整数的值为数据的长度。
  

• 载荷数据：
  包括了扩展数据、应用数据。其中，扩展数据x字节，应用数据y字节；
• 扩展数据：
  如果没有协商使用扩展的话，扩展数据数据为0字节。所有的扩展都必须声明扩展数据的长度，或者可以如何计算出扩展数据的长度。此外，扩展如何使用必须在握手阶段就协商好。如果扩展数据存在，那么载荷数据长度必须将扩展数据的长度包含在内；
• 应用数据：
  任意的应用数据，在扩展数据之后（如果存在扩展数据），占据了数据帧剩余的位置。载荷数据长度 减去 扩展数据长度，就得到应用数据的长度。
  

7.3掩码算法

• original-octet-i：为原始数据的第i字节。
• transformed-octet-i：为转换后的数据的第i字节。
• j：为i mod 4的结果。
• masking-key-octet-j：为mask key第j字节。
  

j = i MOD 4
transformed-octet-i = original-octet-i XOR masking-key-octet-j

8、数据传递

8.1数据分片

8.2数据分片例子

• 1）FIN=0，opcode=0x1，表示发送的是文本类型，且消息还没发送完成，还有后续的数据帧；
• 2）FIN=0，opcode=0x0，表示消息还没发送完成，还有后续的数据帧，当前的数据帧需要接在上一条数据帧之后；
• 3）FIN=1，opcode=0x0，表示消息已经发送完成，没有后续的数据帧，当前的数据帧需要接在上一条数据帧之后。服务端可以将关联的数据帧组装成完整的消息。
  

Client: FIN=1, opcode=0x1, msg="hello"
Server: (process complete message immediately) Hi.
Client: FIN=0, opcode=0x1, msg="and a"
Server: (listening, new message containing text started)
Client: FIN=0, opcode=0x0, msg="happy new"
Server: (listening, payload concatenated to previous message)
Client: FIN=1, opcode=0x0, msg="year!"
Server: (process complete message) Happy new year to you too!

9、连接保持+心跳

• 发送方->接收方：ping
• 接收方->发送方：pong
  

ws.ping('', false, true);

10、Sec-WebSocket-Key/Accept的作用

• 1）避免服务端收到非法的websocket连接（比如http客户端不小心请求连接websocket服务，此时服务端可以直接拒绝连接）；
• 2）确保服务端理解websocket连接。因为ws握手阶段采用的是http协议，因此可能ws连接是被一个http服务器处理并返回的，此时客户端可以通过Sec-WebSocket-Key来确保服务端认识ws协议。（并非百分百保险，比如总是存在那么些无聊的http服务器，光处理Sec-WebSocket-Key，但并没有实现ws协议。。。）；
• 3）用浏览器里发起ajax请求，设置header时，Sec-WebSocket-Key以及其他相关的header是被禁止的。这样可以避免客户端发送ajax请求时，意外请求协议升级（websocket upgrade）；
• 4）可以防止反向代理（不理解ws协议）返回错误的数据。比如反向代理前后收到两次ws连接的升级请求，反向代理把第一次请求的返回给cache住，然后第二次请求到来时直接把cache住的请求给返回（无意义的返回）；
• 5）Sec-WebSocket-Key主要目的并不是确保数据的安全性，因为Sec-WebSocket-Key、Sec-WebSocket-Accept的转换计算公式是公开的，而且非常简单，最主要的作用是预防一些常见的意外情况（非故意的）。
  

11、数据掩码的作用

11.1代理缓存污染攻击

“We show, empirically, that the current version of the WebSocket consent mechanism is vulnerable to proxy cache poisoning attacks. Even though the WebSocket handshake is based on HTTP, which should be understood by most network intermediaries, the handshake uses the esoteric “Upgrade” mechanism of HTTP. In our experiment, we find that many proxies do not implement the Upgrade mechanism properly, which causes the handshake to succeed even though subsequent traffic over the socket will be misinterpreted by the proxy.”

（TALKING） Huang, L-S., Chen, E., Barth, A., Rescorla, E., and C.

          Jackson, "Talking to Yourself for Fun and Profit", 2010,

• 攻击者、攻击者自己控制的服务器（简称“邪恶服务器”）、攻击者伪造的资源（简称“邪恶资源”）；
• 受害者、受害者想要访问的资源（简称“正义资源”）；
• 受害者实际想要访问的服务器（简称“正义服务器”）；
• 中间代理服务器。
  

• 1）攻击者浏览器 向 邪恶服务器 发起WebSocket连接。根据前文，首先是一个协议升级请求；
• 2）协议升级请求 实际到达 代理服务器；
• 3）代理服务器 将协议升级请求转发到 邪恶服务器；
• 4）邪恶服务器 同意连接，代理服务器 将响应转发给 攻击者。
  

• 1）攻击者 在之前建立的连接上，通过WebSocket的接口向 邪恶服务器 发送数据，且数据是精心构造的HTTP格式的文本。其中包含了 正义资源 的地址，以及一个伪造的host（指向正义服务器）。（见后面报文）；
• 2）请求到达 代理服务器 。虽然复用了之前的TCP连接，但 代理服务器 以为是新的HTTP请求；
• 3）代理服务器 向 邪恶服务器 请求 邪恶资源；
• 4）邪恶服务器 返回 邪恶资源。代理服务器 缓存住 邪恶资源（url是对的，但host是 正义服务器 的地址）。
  

• 1）受害者 通过 代理服务器 访问 正义服务器 的 正义资源；
• 2）代理服务器 检查该资源的url、host，发现本地有一份缓存（伪造的）；
• 3）代理服务器 将 邪恶资源 返回给 受害者；
• 4）受害者 卒。
  

Client → Server:
POST /path/of/attackers/choice HTTP/1.1 Host: host-of-attackers-choice.com Sec-WebSocket-Key: <connection-key>
Server → Client:
HTTP/1.1 200 OK
Sec-WebSocket-Accept: <connection-key>

11.2当前解决方案

12、写在后面

13、相关链接

• [1] RFC6455：websocket规范 https://tools.ietf.org/html/rfc6455
• [2] 规范：数据帧掩码细节 https://tools.ietf.org/html/rfc6455#section-5.3
• [3] 规范：数据帧格式 https://tools.ietf.org/html/rfc6455#section-5.1
• [4] server-example：https://github.com/websockets/ws#server-example
• [5] 编写websocket服务器 https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers
• [6] 对网络基础设施的攻击（数据掩码操作所要预防的事情）https://tools.ietf.org/html/rfc6455#section-10.3
• [7] Talking to Yourself for Fun and Profit（含有攻击描述）http://w2spconf.com/2011/papers/websocket.pdf
• [8] What is Sec-WebSocket-Key for? https://stackoverflow.com/questions/18265128/what-is-sec-websocket-key-for
• [9] 10.3. Attacks On Infrastructure (Masking) https://tools.ietf.org/html/rfc6455#section-10.3
• [10] Talking to Yourself for Fun and Profit http://w2spconf.com/2011/papers/websocket.pdf
• [11] Why are WebSockets masked? https://stackoverflow.com/questions/33250207/why-are-websockets-masked
• [12] How does websocket frame masking protect against cache poisoning? https://security.stackexchange.com/questions/36930/how-does-websocket-frame-masking-protect-against-cache-poisoning
• [13] What is the mask in a WebSocket frame? https://stackoverflow.com/questions/14174184/what-is-the-mask-in-a-websocket-frame
  

附录：更多Web端即时通讯资料