Websockets 客户端 API 中的 HTTP 标头

Question

看起来很容易使用任何支持此功能的 HTTP 标头客户端将自定义 HTTP 标头添加到您的 websocket 客户端，但我找不到如何使用 JSON API 来做到这一点。

不过，好像应该支持these headers in the spec。

有人知道如何实现它吗？

var ws = new WebSocket("ws://example.com/service");

具体来说，我需要能够发送 HTTP 授权标头。

Answer 1

对于那些在 2021 年仍在苦苦挣扎的人，Node JS 全局 Web 套接字类在构造函数中多了一个 options 字段。如果你去WebSockets类的实现，你会发现这个变量声明。可以看到它接受三个参数url，这是必需的，protocols（可选），它可以是字符串、字符串数组或null。然后是第三个参数options。我们的兴趣，一个对象和（仍然是可选的）。见...

declare var WebSocket: {
    prototype: WebSocket;
    new (
        uri: string,
        protocols?: string | string[] | null,
        options?: {
            headers: { [headerName: string]: string };
            [optionName: string]: any;
        } | null,
    ): WebSocket;
    readonly CLOSED: number;
    readonly CLOSING: number;
    readonly CONNECTING: number;
    readonly OPEN: number;
};

如果您使用的是 Node Js 库，例如 react 、 react-native。这是一个示例，说明如何做到这一点。

 const ws = new WebSocket(WEB_SOCKETS_URL, null, {
    headers: {
      ['Set-Cookie']: cookie,
    },
  });

关于我通过的协议的通知 null。如果您使用的是 jwt，您可以使用 Bearer + token 传递 Authorization 标头

免责声明，并非所有开箱即用的浏览器都支持此功能，从 MDN 网络文档中您可以看到仅记录了两个参数。 见https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket#syntax

Answer 2

致所有未来的调试器 - 直到今天，即 15-07-21

浏览器也不支持将客户标头发送到服务器，因此任何此类代码

    import * as sock from 'websocket'
    const headers = {
        Authorization: "bearer " + token
    };
    console.log(headers);

    const wsclient = new sock.w3cwebsocket(
        'wss://' + 'myserver.com' + '/api/ws',
        '',
        '',
        headers,
        null
    );

这在浏览器中不起作用。其背后的原因是浏览器原生 Websocket 构造函数不接受 headers。

您很容易被误导，因为 w3cwebsocket 承包商接受我上面显示的标头。然而，这在 node.js 中有效。

Answer 3

更新了 2 倍

简答：不行，只能指定路径和协议字段。

更长的答案：

JavaScript WebSockets API 中没有用于指定客户端/浏览器发送的附加标头的方法。 HTTP 路径（“GET /xyz”）和协议头（“Sec-WebSocket-Protocol”）可以在 WebSocket 构造函数中指定。

Sec-WebSocket-Protocol 标头（有时扩展为用于特定于 websocket 的身份验证）是从 WebSocket 构造函数的可选第二个参数生成的：

var ws = new WebSocket("ws://example.com/path", "protocol");
var ws = new WebSocket("ws://example.com/path", ["protocol1", "protocol2"]);

上面的结果如下：

Sec-WebSocket-Protocol: protocol

和

Sec-WebSocket-Protocol: protocol1, protocol2

实现 WebSocket 身份验证/授权的常见模式是实现一个票证系统，其中托管 WebSocket 客户端的页面从服务器请求票证，然后在 WebSocket 连接设置期间通过 URL/查询字符串中的协议字段，或作为连接建立后的第一条消息所必需。然后，服务器仅在票证有效（存在、尚未使用、票证匹配中的客户端 IP 编码、票证中的时间戳是最近的等）时才允许连接继续。以下是 WebSocket 安全信息摘要：https://devcenter.heroku.com/articles/websocket-security

基本身份验证以前是一个选项，但已被弃用，现代浏览器即使指定了标头也不会发送。

基本身份验证信息（已弃用 - 不再起作用）：

注意：以下信息在任何现代浏览器中都不再准确。

Authorization 标头是从 WebSocket URI 的用户名和密码（或只是用户名）字段生成的：

var ws = new WebSocket("ws://username:password@example.com")

上面的结果是带有字符串“username:password”base64编码的以下标头：

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

我已经在 Chrome 55 和 Firefox 50 中测试了基本身份验证，并验证了基本身份验证信息确实是与服务器协商的（这在 Safari 中可能不起作用）。

感谢 Dmitry Frank 的基本身份验证 answer

Answer 4

您可以将标头作为对象内的第三个参数（选项）中的键值传递。 带有授权令牌的示例。将协议（第二个参数）保留为 null

ws = new WebSocket('ws://localhost', null, { headers: { Authorization: token }})

编辑：似乎这种方法仅适用于 nodejs 库而不适用于标准浏览器实现。离开它是因为它可能对某些人有用。

Answer 5

在我的情况下 (Azure 时序见解 wss://)

使用 ReconnectingWebsocket 包装器并能够通过简单的解决方案实现添加标头：

socket.onopen = function(e) {
    socket.send(payload);
};

这里的payload是：

{
  "headers": {
    "Authorization": "Bearer TOKEN",
    "x-ms-client-request-id": "CLIENT_ID"
}, 
"content": {
  "searchSpan": {
    "from": "UTCDATETIME",
    "to": "UTCDATETIME"
  },
"top": {
  "sort": [
    {
      "input": {"builtInProperty": "$ts"},
      "order": "Asc"
    }], 
"count": 1000
}}}

Answer 6

我的情况：

• 我想通过www.mycompany.com/api/ws 连接到生产 WS 服务器...
• 使用真实凭据（会话 cookie）...
• 来自本地页面 (localhost:8000)。

设置document.cookie = "sessionid=foobar;path=/" 无济于事，因为域不匹配。

解决方案：

将127.0.0.1 wsdev.company.com 添加到/etc/hosts。

这样，当您从有效的子域 wsdev.company.com 连接时，您的浏览器将在连接到 www.mycompany.com/api/ws 时使用来自 mycompany.com 的 cookie。

Answer 7

从技术上讲，您将在协议升级阶段之前通过连接函数发送这些标头。这在nodejs 项目中对我有用：

var WebSocketClient = require('websocket').client;
var ws = new WebSocketClient();
ws.connect(url, '', headers);

Answer 8

无法发送授权标头。

附加令牌查询参数是一个选项。但是，在某些情况下，可能不希望以纯文本形式发送主登录令牌作为查询参数，因为它比使用标头更不透明，并且最终会被记录在不知何处。如果这引起了您的安全问题，另一种方法是仅将辅助 JWT 令牌用于 Web 套接字内容。

创建一个用于生成此 JWT 的 REST 端点，它当然只能由使用您的主登录令牌（通过标头传输）进行身份验证的用户访问。 Web 套接字 JWT 的配置可以与您的登录令牌不同，例如超时时间更短，因此作为升级请求的查询参数发送更安全。

为注册 SockJS eventbusHandler 的同一路由创建一个单独的 JwtAuthHandler。确保首先注册您的身份验证处理程序，以便您可以根据您的数据库检查 Web 套接字令牌（JWT 应该以某种方式链接到后端的用户）。

Answer 9

当您想使用 JavaScript WebSockets API 建立 WebSockets 连接时，您不能发送自定义标头。 您可以通过使用第二个 WebSocket 类构造函数来使用 Subprotocols 标头：

var ws = new WebSocket("ws://example.com/service", "soap");

然后您可以使用服务器上的Sec-WebSocket-Protocol 键获取 Subprotocols 标头。

还有一个限制，您的 Subprotocols 标头值不能包含逗号 (,)！

Answer 10

更多的替代解决方案，但所有现代浏览器都将域 cookie 与连接一起发送，因此使用：

var authToken = 'R3YKZFKBVi';

document.cookie = 'X-Authorization=' + authToken + '; path=/';

var ws = new WebSocket(
    'wss://localhost:9000/wss/'
);

以请求连接标头结束：

Cookie: X-Authorization=R3YKZFKBVi

Answer 11

感谢 kanaka 的回答，像这样完全破解它。

客户：

var ws = new WebSocket(
    'ws://localhost:8080/connect/' + this.state.room.id, 
    store('token') || cookie('token') 
);

服务器（在本例中使用 Koa2，但在任何地方都应该类似）：

var url = ctx.websocket.upgradeReq.url; // can use to get url/query params
var authToken = ctx.websocket.upgradeReq.headers['sec-websocket-protocol'];
// Can then decode the auth token and do any session/user stuff...

Answer 12

您不能添加标头，但如果您只需要在连接时将值传递给服务器，您可以在 url 上指定查询字符串部分：

var ws = new WebSocket("ws://example.com/service?key1=value1&key2=value2");

那个 URL 是有效的，但是 - 当然 - 你需要修改你的服务器代码来解析它。

Answer 13

HTTP 授权标头问题可以通过以下方式解决：

var ws = new WebSocket("ws://username:password@example.com/service");

然后，将使用提供的username 和password 设置适当的基本授权HTTP 标头。如果您需要基本授权，那么一切就绪。

---

我想使用Bearer，但我使用了以下技巧：我连接到服务器如下：

var ws = new WebSocket("ws://my_token@example.com/service");

当我在服务器端的代码收到带有非空用户名和空密码的基本授权标头时，它会将用户名解释为令牌。