15

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?

wonea
  • 4,425
  • 17
  • 82
  • 137
maxxdev
  • 303
  • 2
  • 5
  • 14

2 Answers2

3

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

mdeora
  • 3,642
  • 1
  • 16
  • 27
-3

I'm so confused at the massive amount of mis-information of websockets and headers. There is a way to add headers to WebSocket connections.

Like this

options.headers= {"header1":"value"}
const socket = new WebSocket('wss://yourwebsocketAPIpath', [],options )
Bhargav Rao
  • 45,811
  • 27
  • 120
  • 136
user1999304
  • 31
  • 1
  • 2
  • 1
    @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. – voneiden Jun 24 '20 at 07:08
  • 1
    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. – user1999304 Jul 06 '20 at 02:17
  • 2
    @user1999304 However it's a false statement. [the spec](https://html.spec.whatwg.org/multipage/web-sockets.html#dom-websocket) 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? – Anticom Jul 14 '20 at 09:28
  • 1
    @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. – Frank AFRIAT Aug 02 '20 at 14:40
  • 4
    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. – Sarpdoruk Tahmaz Aug 27 '20 at 12:51
  • A websocket is not a HTTP request so you won't see it in the network tab. – user1999304 Aug 28 '20 at 23:22
  • 2
    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. – Daniel Aug 29 '20 at 22:10