JS `WebSocket` `Subprotocols` 逆向与自定义协议分析

各位观众老爷，大家好！今天咱们来聊点儿刺激的——WebSocket的Subprotocols逆向与自定义协议分析。别害怕，听起来高大上，其实就是扒掉WebSocket的马甲，看看它里面藏了什么好东西，然后自己也造一个。准备好了吗？Let’s dive in！

一、WebSocket：你以为的只是表面

WebSocket，这玩意儿大家都不陌生，长连接嘛，服务器可以主动push消息给客户端，实时性杠杠的。但你有没有想过，WebSocket连接建立之后，传输的数据都是“裸奔”的吗？当然不是！Subprotocols就是WebSocket用来协商数据传输格式的一种机制，就像两个人聊天，总得先确定用什么语言吧？

1. 什么是Subprotocols？

简单来说，Subprotocols就是WebSocket握手阶段，客户端和服务器之间协商的一种“暗号”，告诉对方： “嘿，老兄，我支持这个协议，你也支持吗？要不咱们就用这个协议通信吧！”。如果双方都同意，那么后续的数据传输就会按照这个协议来解析。

2. Subprotocols在哪里？

在WebSocket握手阶段，客户端会在请求头中添加 Sec-WebSocket-Protocol 字段，列出自己支持的Subprotocols，例如：

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat, awesomechat
Sec-WebSocket-Version: 13

服务器收到请求后，如果支持客户端列出的某个Subprotocol，就会在响应头中也包含 Sec-WebSocket-Protocol 字段，并指定最终选择的Subprotocol，例如：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: superchat

3. 常见Subprotocols

chat: 最简单的文本聊天协议，通常直接发送纯文本消息。
json: 使用JSON格式进行数据交换，方便结构化数据的传输。
soap: (古老的)基于XML的协议，现在用的比较少了。
mqtt: 消息队列遥测传输协议，常用于物联网领域。
wamp: WebSocket应用消息协议，提供RPC和PubSub功能。

二、Subprotocols逆向：窥探数据传输的秘密

好了，知道了Subprotocols是什么，接下来就是重头戏——逆向分析。为什么要做这个？因为有些时候，你可能需要分析某个WebSocket应用的通信协议，或者想要模拟客户端的行为。

1. 工具准备

浏览器开发者工具: Chrome、Firefox自带的开发者工具，可以抓包WebSocket通信。
Wireshark: 强大的网络协议分析工具，可以捕获和分析各种网络流量。
Burp Suite/Charles Proxy: HTTP代理工具，可以拦截和修改WebSocket请求和响应。

2. 抓包分析

首先，使用浏览器开发者工具或者Wireshark捕获WebSocket通信的数据包。观察握手阶段的 Sec-WebSocket-Protocol 字段，确定使用的Subprotocol。

然后，分析WebSocket帧的数据部分，看看数据的格式和结构。不同的Subprotocol，数据格式可能完全不同。

3. 案例分析：JSON Subprotocol

假设我们发现某个WebSocket应用使用了 json Subprotocol，那么我们可以预期，WebSocket帧的数据部分会是JSON格式的字符串。

例如，客户端发送的消息可能是：

{
  "type": "message",
  "data": {
    "sender": "Alice",
    "content": "Hello, world!"
  }
}

服务器发送的消息可能是：

{
  "type": "update",
  "data": {
    "onlineUsers": ["Alice", "Bob", "Charlie"]
  }
}

通过分析这些JSON数据，我们可以了解应用的数据结构和通信逻辑。

4. 逆向技巧

观察数据模式: 寻找重复出现的字段和结构，推测数据的含义。
关联用户行为: 观察用户在界面上的操作，分析这些操作对应的数据包。
搜索字符串: 在捕获的数据包中搜索特定的字符串，例如用户名、密码、错误信息等，可能会找到有用的线索。
反编译代码: 如果可以获取到客户端或者服务器端的代码，可以尝试反编译，查看代码中对WebSocket数据的处理逻辑。

5. 逆向实战：某聊天室Subprotocol分析

假设我们抓包分析了一个聊天室应用，发现它使用了自定义的Subprotocol chatroom。通过观察数据包，我们发现消息格式如下：

[0x01, 0x00, 0x0a, "username", 0x02, 0x00, 0x0d, "message content"]

0x01：消息类型，表示发送消息。
0x00：分隔符。
0x0a：用户名长度。
"username"：用户名。
0x02：消息类型，表示消息内容。
0x00：分隔符。
0x0d：消息内容长度。
"message content"：消息内容。

通过逆向分析，我们搞清楚了这个聊天室应用的自定义协议，就可以模拟客户端发送消息了。

三、自定义Subprotocols：打造专属的数据传输通道

逆向分析是为了更好地理解和利用WebSocket，而自定义Subprotocols则可以让我们根据自己的需求，打造专属的数据传输通道。

1. 为什么需要自定义Subprotocols？

安全性: 可以自定义加密和认证机制，提高数据传输的安全性。
效率: 可以针对特定的应用场景，优化数据格式，提高传输效率。
灵活性: 可以根据业务需求，自定义消息类型和处理逻辑。

2. 自定义Subprotocols的步骤

定义协议格式: 确定消息的结构、字段和数据类型。
实现客户端代码: 编写客户端代码，处理Subprotocol握手和数据编码/解码。
实现服务器端代码: 编写服务器端代码，处理Subprotocol握手和数据编码/解码。
测试: 进行充分的测试，确保协议的正确性和可靠性。

3. 案例：自定义一个简单的Subprotocol

假设我们要自定义一个名为 myprotocol 的Subprotocol，用于传输简单的键值对数据。

协议格式：

[key_length, key, value_length, value]

key_length: key的长度（1字节）。
key: key的字符串。
value_length: value的长度（1字节）。
value: value的字符串。

客户端代码 (JavaScript):

const ws = new WebSocket('ws://example.com', ['myprotocol']);

ws.onopen = () => {
  console.log('WebSocket connected');

  // 发送数据
  const key = 'name';
  const value = 'Alice';

  const keyLength = key.length;
  const valueLength = value.length;

  const buffer = new Uint8Array(2 + keyLength + valueLength);
  buffer[0] = keyLength;
  for (let i = 0; i < keyLength; i++) {
    buffer[1 + i] = key.charCodeAt(i);
  }
  buffer[1 + keyLength] = valueLength;
  for (let i = 0; i < valueLength; i++) {
    buffer[2 + keyLength + i] = value.charCodeAt(i);
  }

  ws.send(buffer);
};

ws.onmessage = (event) => {
  console.log('Received message:', event.data);
};

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = () => {
  console.log('WebSocket closed');
};

服务器端代码 (Node.js):

const WebSocket = require('ws');

const wss = new WebSocket.Server({
  port: 8080,
  handleProtocols: (protocols, request) => {
    if (protocols.includes('myprotocol')) {
      return 'myprotocol';
    } else {
      return false; // 拒绝连接
    }
  }
});

wss.on('connection', ws => {
  console.log('Client connected');

  ws.on('message', message => {
    const buffer = new Uint8Array(message);
    const keyLength = buffer[0];
    const key = String.fromCharCode(...buffer.slice(1, 1 + keyLength));
    const valueLength = buffer[1 + keyLength];
    const value = String.fromCharCode(...buffer.slice(2 + keyLength, 2 + keyLength + valueLength));

    console.log('Received data:', { key, value });

    // Echo back the data
    const responseBuffer = new Uint8Array(2 + keyLength + valueLength);
    responseBuffer[0] = keyLength;
    for (let i = 0; i < keyLength; i++) {
      responseBuffer[1 + i] = key.charCodeAt(i);
    }
    responseBuffer[1 + keyLength] = valueLength;
    for (let i = 0; i < valueLength; i++) {
      responseBuffer[2 + keyLength + i] = value.charCodeAt(i);
    }
    ws.send(responseBuffer);
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

console.log('WebSocket server started on port 8080');

4. 自定义Subprotocols的注意事项

协议设计: 协议设计要简洁、高效，易于解析和扩展。
错误处理: 要考虑各种错误情况，例如数据格式错误、连接中断等，并进行适当的处理。
安全性: 如果需要传输敏感数据，要考虑加密和认证机制，防止数据泄露。
版本控制: 如果协议需要升级，要考虑版本控制，保证兼容性。
文档: 编写详细的文档，方便其他开发者使用。

四、Subprotocols与安全

Subprotocols本身并不能直接提供安全保障，但它可以配合其他安全机制，例如TLS/SSL加密、身份验证等，提高WebSocket通信的安全性。

1. TLS/SSL加密

WebSocket over TLS/SSL (WSS) 可以对WebSocket连接进行加密，防止数据被窃听。使用WSS时，Subprotocols也会被加密传输，提高了安全性。

2. 身份验证

可以在WebSocket握手阶段或者数据传输阶段进行身份验证，例如使用Token、用户名/密码等。

3. 自定义加密

可以在自定义Subprotocols中实现加密算法，对数据进行加密和解密。

五、总结

今天我们一起深入了解了WebSocket的Subprotocols，从逆向分析到自定义协议，希望大家对WebSocket有了更深入的理解。掌握Subprotocols的技巧，可以帮助我们更好地分析和利用WebSocket，打造更安全、高效、灵活的实时应用。

核心总结：

概念	描述	作用
Subprotocols	WebSocket握手阶段客户端与服务器协商的协议，用于约定数据传输格式。	确定数据传输格式，方便数据解析和处理。
逆向分析	通过抓包、分析数据包等手段，了解WebSocket应用的Subprotocol和数据格式。	了解应用的数据结构和通信逻辑，可以模拟客户端行为或者进行安全分析。
自定义协议	根据自身需求，设计和实现自定义的Subprotocol。	提高数据传输的安全性、效率和灵活性，满足特定的应用场景。
安全	Subprotocols本身不提供安全保障，但可以配合TLS/SSL加密、身份验证等机制，提高WebSocket通信的安全性。	确保数据传输的安全性，防止数据被窃听、篡改。

最后，记住一点：技术是工具，关键在于如何使用。希望大家能够灵活运用今天学到的知识，创造出更多有价值的应用！

感谢各位观众老爷的观看，下次再见！

发表回复 取消回复

发表回复取消回复