WebsocketsクライアントAPIのHTTPヘッダー

カスタムHTTPヘッダーを、これをサポートするHTTPヘッダークラ​​イアントを使用してWebsocketクライアントに追加するのは簡単なようですが、JSON APIでそれを行う方法を見つけることができません。

しかし、仕様ではこれらのヘッダーをサポートする必要があるようです。

誰でもそれを達成する方法についての手掛かりがありますか？

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

具体的には、HTTP Authorizationヘッダーを送信できる必要があります。

2回更新

短い答え：いいえ、指定できるのはパスとプロトコルのフィールドのみです。

より長い答え：

JavaScript WebSockets APIには、クライアント/ブラウザーが送信する追加のヘッダーを指定するメソッドはありません。HTTPパス（ "GET / xyz"）とプロトコルヘッダー（ "Sec-WebSocket-Protocol"）は、WebSocketコンストラクターで指定できます。

Sec-WebSocket-Protocolヘッダー（WebSocket固有の認証で使用されるように拡張されることもある）は、WebSocketコンストラクターのオプションの2番目の引数から生成されます。

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でエンコードされたクライアント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に感謝

代替ソリューションの詳細ですが、最新のブラウザはすべて、接続と一緒にドメインCookieを送信するため、以下を使用します。

var authToken = 'R3YKZFKBVi';

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

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

リクエスト接続ヘッダーで終わります：

Cookie: X-Authorization=R3YKZFKBVi

HTTP Authorizationヘッダーの問題は、以下で対処できます。

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

次に、提供されたusernameおよびを使用して、適切な基本認証HTTPヘッダーが設定されpasswordます。基本認証が必要な場合は、これで準備は完了です。

Bearerただし、使用したいので、次のトリックを使用しました。次のようにサーバーに接続します。

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

そして、サーバー側の私のコードが空でないユーザー名と空のパスワードを持つBasic Authorizationヘッダーを受信すると、ユーザー名をトークンとして解釈します。

ヘッダーを追加することはできませんが、接続時にサーバーに値を渡すだけでよい場合は、URLにクエリ文字列の部分を指定できます。

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

そのURLは有効ですが、もちろん-解析するにはサーバーコードを変更する必要があります。

JavaScript WebSockets APIを使用してWebSockets接続を確立する場合は、カスタムヘッダーを送信できません。Subprotocols2番目のWebSocketクラスコンストラクターを使用してヘッダーを使用できます。

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

Sec-WebSocket-Protocolサーバー上のキーを使用してサブプロトコルヘッダーを取得できます。

また、制限もあります。サブプロトコルヘッダーの値にカンマ（,）を含めることはできません。

Authorizationヘッダーを送信することはできません。

トークンクエリパラメータのアタッチはオプションです。ただし、状況によっては、メインのログイントークンをプレーンテキストでクエリパラメーターとして送信することが望ましくない場合があります。これは、ヘッダーを使用するよりも不透明であり、最終的にだれがログに記録することになるためです。これによりセキュリティの問題が発生する場合は、代替手段として、Webソケット用だけにセカンダリJWTトークンを使用します。。

このJWTを生成するためのRESTエンドポイントを作成しますもちろん、これには、プライマリヘッダートークンで認証されたユーザーのみがアクセスできます（ヘッダー経由で送信されます）。WebソケットJWTは、ログイントークンとは異なる方法で構成できます。たとえば、タイムアウトを短くして、アップグレードリクエストのクエリパラメータとして送信する方が安全です。

でSockJS eventbusHandlerを登録したのと同じルートに個別のJwtAuthHandlerを作成します。最初に認証ハンドラーが登録されていることを確認してください。これにより、データベースに対してWebソケットトークンを確認できます（JWTは何らかの形でバックエンドのユーザーにリンクされているはずです）。

カナカの答えのおかげで、このように完全にハッキングしました。

クライアント：

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...

私の場合：

• 本番WSサーバーに接続したいwww.mycompany.com/api/ws...
• 実際の資格情報（セッションCookie）を使用しています...
• ローカルページ（localhost:8000）から。

設定 document.cookie = "sessionid=foobar;path=/"ドメインが一致しないため、は役に立ちません。

解決策：

に追加127.0.0.1 wsdev.company.comし/etc/hostsます。

このようにして、有効なサブドメインからmycompany.com接続しwww.mycompany.com/api/wsているときに、ブラウザは接続時にからCookieを使用しますwsdev.company.com。

私の状況では（Azure Time Series Insights wss：//）

ReconnectingWebsocketラッパーを使用して、簡単なソリューションでヘッダーの追加を実現できました。

socket.onopen = function(e) {
    socket.send(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
}}}

技術的には、プロトコルアップグレードフェーズの前に、接続機能を介してこれらのヘッダーを送信します。これはnodejsプロジェクトで私のために働きました：

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

オブジェクト内の3番目のパラメーター（オプション）で、ヘッダーをKey-Valueとして渡すことができます。認可トークンの例。プロトコル（2番目のパラメーター）をnullのままにします。

ws = new WebSocket（ 'ws：// localhost'、null、{headers：{Authorization：token}}）

編集：このアプローチはnodejsライブラリでのみ機能し、標準のブラウザー実装では機能しないようです。一部の人にとっては便利かもしれないので、そのままにしておきます。