I'm looking to create a basic Websocket connection from my angular application to a server. Per RxJs documentation, the 'websocket' method is a wrapper around the WebSocket object provided by the browser:

import { Injectable } from '@angular/core';
import { webSocket } from 'rxjs/webSocket';

@Injectable({
  providedIn: 'root'
})

export class WebSocketService {

  connect(url: string) {
    return webSocket(url);
  }
}

While the examples are pretty straight forward, what I find surprising is the lack of documentation around a scenario where the the browser would need to send data as part of a request header (ie: an auth token) for the server to satisfy the request. Is this supported by JavaScript WebSockets?

I've seen a workaround where the websocket url would add the token as a query parameter (see image below), but that is a security vulnerability that should be avoided. Any suggestions or references would help!

I'm looking to create a basic Websocket connection from my angular application to a server. Per RxJs documentation, the 'websocket' method is a wrapper around the WebSocket object provided by the browser:

import { Injectable } from '@angular/core';
import { webSocket } from 'rxjs/webSocket';

@Injectable({
  providedIn: 'root'
})

export class WebSocketService {

  connect(url: string) {
    return webSocket(url);
  }
}

While the examples are pretty straight forward, what I find surprising is the lack of documentation around a scenario where the the browser would need to send data as part of a request header (ie: an auth token) for the server to satisfy the request. Is this supported by JavaScript WebSockets?

I've seen a workaround where the websocket url would add the token as a query parameter (see image below), but that is a security vulnerability that should be avoided. Any suggestions or references would help!

• javascript
• angular
• websocket
• rxjs

• take a look at this stackoverflow./questions/4361173/… – Fan Cheung Commented Apr 22, 2020 at 1:24

1 Answer 1

No.

The underlying API does not support any additional parameters (other than URL and protocols).

For more detail check out this answer

One possible solution that is not explained in the linked answer is that you could set a cookie from the server in a prior request. That cookie should then be re-sent to the server when you open the WebSocket. For that to work, make sure to enable withCredentials in your HttpService