HTTP headers in Websockets client API

Question

Looks like it s easy to add custom HTTP headers to your websocket client with any HTTP header client which supports this  but I can t find how to do it with the JSON API    Yet  it seems that there should be support these headers in the spec   Anyone has a clue on how to achieve it    var ws   new WebSocket  ws   example com service      Specifically  I need to be able to send an HTTP Authorization header

User · Answer

You can not send custom header when you want to establish WebSockets connection using JavaScript WebSockets API. You can use Subprotocols headers by using the second WebSocket class constructor:

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

and then you can get the Subprotocols headers using Sec-WebSocket-Protocol key on the server.

There is also a limitation, your Subprotocols headers values can not contain a comma (,) !

User · Answer

More of an alternate solution  but all modern browsers send the domain cookies along with the connection  so using   var authToken    R3YKZFKBVi    document cookie    X-Authorization     authToken      path      var ws   new WebSocket       wss   localhost 9000 wss        End up with the request connection headers   Cookie  X-Authorization R3YKZFKBVi

User · Answer

Updated 2x Short answer  No  only the path and protocol field can be specified  Longer answer  There is no method in the JavaScript WebSockets API for specifying additional headers for the client browser to send  The HTTP path   quot GET  xyz quot   and protocol header   quot Sec-WebSocket-Protocol quot   can be specified in the WebSocket constructor  The Sec-WebSocket-Protocol header  which is sometimes extended to be used in websocket specific authentication  is generated from the optional second argument to the WebSocket constructor  var ws   new WebSocket  quot ws   example com path quot    quot protocol quot    var ws   new WebSocket  quot ws   example com path quot     quot protocol1 quot    quot protocol2 quot      The above results in the following headers  Sec-WebSocket-Protocol  protocol  and Sec-WebSocket-Protocol  protocol1  protocol2  A common pattern for achieving WebSocket authentication authorization is to implement a ticketing system where the page hosting the WebSocket client requests a ticket from the server and then passes this ticket during WebSocket connection setup either in the URL query string  in the protocol field  or required as the first message after the connection is established  The server then only allows the connection to continue if the ticket is valid  exists  has not been already used  client IP encoded in ticket matches  timestamp in ticket is recent  etc   Here is a summary of WebSocket security information  https   devcenter heroku com articles websocket-security Basic authentication was formerly an option but this has been deprecated and modern browsers don t send the header even if it is specified  Basic Auth Info  Deprecated - No longer functional    NOTE  the following information is no longer accurate in any modern browsers   The Authorization header is generated from the username and password  or just username  field of the WebSocket URI  var ws   new WebSocket  quot ws   username password example com quot    The above results in the following header with the string  quot username password quot  base64 encoded  Authorization  Basic dXNlcm5hbWU6cGFzc3dvcmQ   I have tested basic auth in Chrome 55 and Firefox 50 and verified that the basic auth info is indeed negotiated with the server  this may not work in Safari   Thanks to Dmitry Frank s for the basic auth answer

User · Answer

My case     I want to connect to a production WS server a www mycompany com api ws    using real credentials  a session cookie      from a local page  localhost 8000      Setting document cookie    sessionid foobar path    won t help as domains don t match    The solution   Add 127 0 0 1  wsdev company com to  etc hosts    This way your browser will use cookies from mycompany com when connecting to www mycompany com api ws as you are connecting from a valid subdomain wsdev company com

User · Answer

You cannot add headers but  if you just need to pass values to the server at the moment of the connection  you can specify a query string part on the url   var ws   new WebSocket  ws   example com service key1 value1 amp key2 value2      That URL is valid but - of course - you ll need to modify your server code to parse it

User · Answer

HTTP Authorization header problem can be addressed with the following   var ws   new WebSocket  ws   username password example com service      Then  a proper Basic Authorization HTTP header will be set with the provided username and password  If you need Basic Authorization  then you re all set     I want to use Bearer however  and I resorted to the following trick  I connect to the server as follows   var ws   new WebSocket  ws   my token example com service      And when my code at the server side receives Basic Authorization header with non-empty username and empty password  then it interprets the username as a token

User · Answer

You can pass the headers as a key-value in the third parameter  options  inside an object  Example with Authorization token  Left the protocol  second parameter  as null     ws   new WebSocket    ws   localhost     null    headers    Authorization  token        Edit  Seems that this approach only works with nodejs library not with standard browser implementation  Leaving it because it might be useful to some people

User · Answer

Technically  you will be sending these headers through the connect function before the protocol upgrade phase   This worked for me in a nodejs project   var WebSocketClient   require  websocket   client  var ws   new WebSocketClient    ws connect url      headers

User · Answer

Totally hacked it like this  thanks to kanaka s answer   Client   var ws   new WebSocket       ws   localhost 8080 connect     this state room id       store  token      cookie  token         Server  using Koa2 in this example  but should be similar wherever    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

User · Answer

Sending Authorization header is not possible    Attaching a token query parameter is an option  However  in some circumstances  it may be undesirable to send your main login token in plain text as a query parameter because it is more opaque than using a header and will end up being logged whoknowswhere  If this raises security concerns for you  an alternative is to use a secondary JWT token just for the web socket stuff    Create a REST endpoint for generating this JWT  which can of course only be accessed by users authenticated with your primary login token  transmitted via header   The web socket JWT can be configured differently than your login token  e g  with a shorter timeout  so it s safer to send around as query param of your upgrade request    Create a separate JwtAuthHandler for the same route you register the SockJS eventbusHandler on  Make sure your auth handler is registered first  so you can check the web socket token against your database  the JWT should be somehow linked to your user in the backend

User · Answer

In my situation  Azure Time Series Insights wss       Using the ReconnectingWebsocket wrapper and was able to achieve adding headers with a simple solution   socket onopen   function e        socket send payload        Where payload in this case is        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

[javascript] HTTP headers in Websockets client API

Examples related to javascript

Examples related to http

Examples related to header

Examples related to websocket