We have an Angular/TypeScript application that uses SignalR web socket technology to connect to our C# .NET Core API. To authenticate, we are sending our JWT access token, which we can then retrieve and check on the API. This is actually working great.
However, the issue is that the method used by the web socket JavaScript client to initially connect to the API exposes our access token in a GET request. Web server access logs, load balancer access logs, proxy logs, and other common enterprise tools, such as performance analytics platforms, can store sensitive information requested by the HTTP GET method. Below is the code we use to connect.
On the front-end:
this._hubConnection = new HubConnectionBuilder()
.withUrl(this.apiPath + ?authtoken=${localStorage.getItem('access_token')})
.build();
On the back-end:
if (context.Request.Path.Value.StartsWith("/hub") &&
context.Request.Query.TryGetValue("authtoken", out
Microsoft.Extensions.Primitives.StringValues token))
{
context.Token = token;
}
This throws our access token directly into the GET request's query string for everyone to see.
We have tried other solutions (below) but we still have the same issue. Here is a link to where someone explains that the web socket JavaScript client does not currently support custom headers. Is there any way around this issue? We need to send access token without it being dangerously exposed.
this._hubConnection = new HubConnectionBuilder()
.withUrl(this.apiPath, { accessTokenFactory: () => localStorage.getItem('access_token') })
.build();