Websocket connection with authorization header

Question

I am working on a real time websocket application where in the server is coded with .Net core where as clients can be in several different languages. The way I decided to secure the server is JWT, i.e. to accept a socket connection only from a request with valid JWT. I could successfully do so with .Net client, here is my code:

        _client = new WebSocket("ws://localhost:8080/api/SocketDock","",null,new List<KeyValuePair<string, string>>()
        { new KeyValuePair<string, string>(
            "Authorization", "Bearer eyJhbGciOiJIUzI1.....") 
        });

This is working perfectly fine with .net core client websocket. However, I am not able to do the same with Angular client. I went through several articles somehow ending up with an answer that it is not possible. However, it is seems to me a matter of common sense that if a protocol or handshake is possible in one language, it must be possible in others too.

Can someone guide me proper way to achieve the same with any Angular client.

score 22 · Answer 1 · answered Nov 25 '20 at 09:05

The answer is that the javascript native websocket api doesn't support addition of custom headers because its simply not necessary.

https://stackoverflow.com/a/4361358/10982972

You can share token it query param by first getting it via a get api that can have that authorization header.

Refer to :-

https://stackoverflow.com/a/39816150/10982972

If you think its not safe for websocket to have token in url, refer here :-

https://support.ably.com/support/solutions/articles/3000075120-is-it-secure-to-send-the-access-token-as-part-of-the-websocket-url-query-params-

Resons of not having it by official maintainer of Chromme's Websocket :-

https://github.com/whatwg/html/issues/3062#issuecomment-332065542

You can achieve addition of header by some other client like stompJS.

like here :- https://github.com/stomp-js/ng2-stompjs/issues/83#issuecomment-421210171

and an complete example with spring boot backend is available here :-

https://www.javaguides.net/2019/06/spring-boot-angular-8-websocket-example-tutorial.html

score 2 · Answer 2 · answered Nov 25 '20 at 10:29

2

You can't add custom headers for security issues and the WebSocket API doesn't support it.

What you can do instead is to pass your token in the URL like this:

new WebSocket("ws://localhost:8080/api/SocketDock?authorization=eyJhbGciOiJIUzI1...")

A more complete answer here.

answered Nov 25 '20 at 10:29

Tombery

266
2
15

1

The documentation says nowhere that headers are not allowed. The point here is, as the websocket request starts as http request and then upgraded to websocket, it should be possible to send the headers along with it. – Murtuza Kabul Dec 02 '20 at 10:23
1

As you can see [here](https://devcenter.heroku.com/articles/websocket-security), you cannot customize WebSocket headers from JavaScript, you’re limited to the “implicit” auth (i.e. Basic or cookies) that’s sent from the browser. – Tombery Dec 03 '20 at 08:38
this is exactly what I'm trying to do, i.e. to send cookies or basic auth header along with request. Can you show me how is it possible – Murtuza Kabul Dec 20 '20 at 21:21
@MurtuzaKabul Cookies are automatically included by the browser, depending on the cookie's options – Malte R Mar 15 '21 at 19:25

score -1 · Answer 3 · answered Nov 30 '20 at 04:03

You can use RxJs's webSocket and webSocketSubject to achieve ws communication between your angular app and the server over ws protocol.

You can send JWT token to the server via payload to the webSocket's next() function.

send(data: any) {
    if (this.connection$) {
        const payload = {
          token: this.authService.token,
          ...data,
        };
        
        this.connection$.next(payload);
    }
}

The article here on briebug explains steps in detail to create ws connection, sending JWT token as part of payload.

Not an option. As I explained, it is necessary to send the token as header and not using open websocket connection as the intended behavior is to not let the socket upgrade happen if the request is not authenticated. — Murtuza Kabul, Dec 02 '20 at 10:20

Websocket connection with authorization header

3 Answers3