63

I'm trying to set a http header when socket.io client makes the connection request. Is there a way to do this?

Here is what i'm doing:

// server side
var io = socketio(server);

io.use(function (socket, next) {
  // authorize using authorization header in socket.request.headers
});

// client side
var socket = io();  // i'm trying to set an authorization header in this http reqeust

Any ideas? Thanks.

7
  • When socket client makes a request, it already has request headers with it. Are you saying that you want to change those or you just want to send some tokens from socket client and based on those tokens you want to authorize the client????
    – M Omayr
    May 2, 2014 at 9:23
  • I want to send a token in the header. @MOmayr
    – Ziyu
    May 2, 2014 at 9:31
  • you can send that token in the query string and check it in authorization function. Should i give you an example?
    – M Omayr
    May 2, 2014 at 9:36
  • @MOmayr Thanks. That's what I'm doing at the moment. But to put the token in the header is what I would like to do. Cause in that way i could reuse my auth middleware for socket.io connection request.
    – Ziyu
    May 2, 2014 at 9:41
  • Well, I think you'll have to dig socket.io for that. But you can attach an object with socket in authorization function and later use it in io.connection event.
    – M Omayr
    May 2, 2014 at 10:40

8 Answers 8

71

You can use extraHeaders option, if you are using socket.io-client >= 1.4.

For example:

var socket = io("http://localhost", {
  extraHeaders: {
    Authorization: "Bearer authorization_token_here"
  }
});

engine.io-client, which is a backend of socket.io-client, introduced extraHeaders support on 2015-11-28.

6
  • 18
    While this appears to be a great option, it works when using the NodeJS client, but not in the browser. It states this in the read me, presumably b/c of the first link in the answer by bakavic above (not all transports allow for the setting of custom headers)
    – Sunil D.
    Feb 16, 2016 at 20:08
  • It wasn't supported on some browsers as of yesterday due to a bug, I've fixed it :)
    – Lu4
    Feb 2, 2017 at 21:43
  • 5
    Awesome, how do you get the headers on the server side then?
    – TheJKFever
    Mar 28, 2017 at 22:28
  • 3
    Unfortunately the extraHeaders are available only with Polling mode and not with websocket...
    – bertonc96
    Sep 4, 2019 at 15:49
  • Headers are only provided when the connection is over http(s) which is always true for the initial handshake. After that, if the client/server "upgrade" to ws(s), no headers are available. You will have to pass the auth data in the packets instead. Dec 1, 2019 at 12:57
14

It seems like the client doesn't support setting headers, as not all transports allow for the setting of headers.

This post by facundoolano details a workaround to authentication that doesn't require placing the auth token in the query string.

His workaround module can be found at https://github.com/invisiblejs/socketio-auth.

Makes me wonder why on server-side, socket.io allows for the request headers to be accessed...

1
  • 3
    Socket.io handshake (even for WebSockets) starts with regular REST call and further elevation to WebSocket protocol, so the answer seems wrong, on the other hand if you are using HTTP Request Headers than this should work fine...
    – Lu4
    Jan 23, 2017 at 17:35
13

There's a new way to do this: https://socket.io/docs/v3/middlewares/. Look under the "Sending Credentials" section.

// client
const socket = io(server, {
    transports: ['websocket', 'polling', 'flashsocket'],
    auth: {
        token: 'abc'
    }
});

// server
io.use((socket, next) => {
    const token = socket.handshake.auth.token;
    if (isValidJwt(token)){
        next();
    }else{
        next(new Error("Socket authentication error"));
    }
});

async function isValidJwt(token){
    jwt.verify(token, secrets.jwt, function(err, decoded) {
        if (err){
            console.log(err);
            return false;
        }else{
            //console.log(decoded);
            return true;
        }
    });
}
2
  • 2
    Perfect. This works very well and is the most updated answer as of today.
    – relu
    Aug 31, 2021 at 13:33
  • Hands down the most efficient and scalable approach. Bravo for highlighting this. Sep 5, 2022 at 21:06
4

This following information has been deprecated since socket.io 1.0

There are two methods of authorization: global or namespace (think route). The global method is set on the server with the io.set('authorization', function (handshakeData, callback) configuration call.

The handshakeData object contains the following information:

{
   headers: req.headers       // <Object> the headers of the request
 , time: (new Date) +''       // <String> date time of the connection
 , address: socket.address()  // <Object> remoteAddress and remotePort object
 , xdomain: !!headers.origin  // <Boolean> was it a cross domain request?
 , secure: socket.secure      // <Boolean> https connection
 , issued: +date              // <Number> EPOCH of when the handshake was created
 , url: request.url          // <String> the entrance path of the request
 , query: data.query          // <Object> the result of url.parse().query or a empty object
}

The above information and a deeper explanation is available on this documentation page.

2
  • 2
    io.set('authorization') has actually been deprecated in 1.0: socket.io/docs/migrating-from-0-9 Feb 5, 2015 at 19:33
  • 1
    Guys...no need to down vote. I added edit that this is deprecated information. The answer is from 2014.
    – adamrights
    Oct 25, 2018 at 4:50
3

As of version 2.0.0 / 2017-01-22 engine.io-client supports

[feature] Allow extraHeaders to be set for browser clients in XHR requests (#519)

However at this point the socket.io-client is not updated to support this functionality, so couple of days may make this saga end until that time use the following instructions: https://facundoolano.wordpress.com/2014/10/11/better-authentication-for-socket-io-no-query-strings/

2

"transportOptions" options can be used to send extra headers in socket.io request. I also explained that here :-

Node.js + Socket.io | Set custom headers on the server

1

For some reason, these request headers are only received if the socket server is also socket.io. If I connect to a python Websockets server for example I have no luck authenticating.

The only solution that worked for me is to use a different WebSocket client, for example, ws works fine.

import WebSocket from 'ws';

const socket = new WebSocket('wss://example.com/path', {
      headers: {
            Authorization: 'token'
         },
 });

1
  • Is there any way to handle ws does not work in the browser. Browser clients must use the native WebSocket object error?
    – sj_959
    Aug 24, 2021 at 5:35
1

Short Answer: It's imposiburu based on spec... if you just need to pass info early... why not query parameters?

socket = io('localhost:5000', {
      path: '/mySocketPath',
      transports: ['websocket'],
      query: {
        token:'some-token-value'
      }
})

See @satpal-07 in https://github.com/socketio/socket.io-client/issues/1356#issuecomment-810023635

1
  • Very simple: because URL length is limited which may cause very annoying issues. Aug 4, 2021 at 13:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.