javascriptのWebSocket接続時にhttp headerを設定したい

Question

javascriptのWebSocketの接続時にヘッダー情報を設定する方法を教えて頂けないでしょうか？

angularからJWTによるトークン認証を使っているのですが、通常のリクエストはinterceptorを利用してAuthorizationヘッダーにトークンをを設定しているものの、WebSocket接続時にはinterceptorを通らないためヘッダーが設定されません。

別途設定しようと思ったのですが、WebScoketオブジェクトにヘッダーを設定する方法がわかりません。

環境は下記になります。

サーバ

• go言語
• Echo framework

クライアント

• angular
• javascipt

以上、よろしくお願いします。

Answer 1

JS の WebSocket API では残念ながらヘッダーを設定することはできません。
回避策として、JSのWebSocket APIでは、サブプロトコル名を設定することができます。
サブプロトコルを設定すると、Sec-WebSocket-Protocolヘッダーが追加されます。
サブプロトコル名は自由に設定することができますので、サブプロトコル名にJWTトークンを設定してみてはいかがでしょう。
当然ながら、受ける側のライブラリ等の改造が必要となりますが。

const ws = new WebSocket('wss://hoge.com', ['JWTトークン']);

Comments

[thunderheadJP]

ありがとうございます。
そもそも設定ができないんですね。
接続時のurlにトークンを仕込む方法で回避しようかと実装を始めましたが、アクセスログに残るのは良くないので、サブプロトコルを使ったほうが良さそうですね。
試してみます。

[thunderheadJP]

echoフレームワークのmiddlewareでトークンの処理をしているので、トークン周りの実装を自力でやってみてるのですが、カスタムしたClaimsを使っているためか少し苦労しています。
これ以降は、こちらの質問から外れるので、とりあえず質問をクローズさせていただきます。
ありがとうございました。

Answer 2

WebSocketではないですが。
ガンガン変えちゃうぜ！！って感じならsocket.ioを使うとかですかね。

https://socket.io/docs/client-api/#with-extraheaders

Comments

[thunderheadJP]

Socket.io 自由度が高いんですね。

[thunderheadJP]

魅力を感じますが、いまWebSocketから変える余裕がないので、別の機会にでも挑戦してみます。
ありがとうございます。