Custom headers for WebSocket JS

Question

I finding a simple solution to use WebSocket with custom headers for web app based on PHP as backend and js+vuejs as frontend.

My app should connect to WebSocket server based on Java to get live stat. WebSocket server protected by Oauth2. So my app should add header like

"Authorization: bearer 647d14-b132-41b9-aa4c-9eafad5d9630 "

when connect to WS server. But i can't add this header because browser doesn't support custom headers. Answer on question about custom headers HTTP headers in Websockets client API

I need something like code below

var serverWs = "ws://servername/stat"; var opts = { reconnection: false, transports: ['websocket'], extraHeaders: { 'Authorization': 'Bearer xxxx' } } var ws = new WebSocket(serverWs, opts);

What's solution exists?

Solution

Websocket client API doesn't allow to send custom header, they allow you to set exactly one header, namely Sec-WebSocket-Protocol, i.e. the application specific subprotocol. You could use this header for passing the bearer token.

Other option is to use token in query string.

Or you can use some library on client or server which support custom headers implementation eg. https://github.com/crossbario/autobahn-python/tree/master/examples/twisted/websocket/echo_httpheaders

Comments

[voneiden]

@bhargav-rao if this was originally a question, it's now completely misleading after the edit. There is no 'options' argument in the WebSocket API.

[user1999304]

This is not a question. This is a statement. There is absolutely an options field for the websocket. Go try it out. I currently use for authorization for the AWS websocket. Putting the authorization details in the options as specified above was the only way to get pass the authorization, as the Websocket js object auto initiates the connection.

[Anticom]

@user1999304 However it's a false statement. the spec clearly shows that there's no 3rd parameter to set any options. Maybe you're refering to a 3rd party library instead of the WebSocket web standard?

[Frank AFRIAT]

@user1999304 You are right !!!! Thank you. It is not in specs but true. I used it to pass authentication header from react native ios app to aws with wss protocol.

[Sarpdoruk Tahmaz]

Just run the following in your browser's console and check the network tab for the request and its headers; new WebSocket('wss://echo.websocket.org', [], { headers: { 'My-Header': 'MyValue' } }); You will see that it won't work.

[user1999304]

A websocket is not a HTTP request so you won't see it in the network tab.

[Daniel]

That's incorrect @user1999304, you can see WebSocket traffic in the network tab. Look for the initial HTTP GET which returns 101, then select the 'Messages' sub tab.