Add extra headers to websocket connection from browser in Dart

Question

I'm trying to establish an authenticated websocket connection, and this question is a sibling to similar question for server part. How I can add extra headers when I establish a websocket connection from browser?

I'm trying to use dart:html's WebSocket object to connect to server requiring a header authentication: containing current authentication token (JWT) to authenticate user. The problem is WebSocket establishes connection immediately after constructor called, which doesn't have any parameter to send headers with http request:

var ws = new WebSocket('wss://localhost:8080/ws');

Right after that string, websocket connection is closed with an error, because my server denies all requests not containing authentication token in headers to that path.

Is there any other implementations of websocket for browser side which allows to authenticate websocket connection?

Is it possible at all to write different implementation of WebSocket for browser?

I'm not a pro in security, but would it be safe to send a token in a path request instead of headers? Something like:

wss://localhost:8080/ws?token=BLAHBLAHBLAH

Answer 1

You will have to use cookies which are automatically sent by websocket as well but you can't customize the headers sent with a WebSocket request.

You can also send and receive a session token in the payload. See https://devcenter.heroku.com/articles/websocket-security#authentication-authorization for more detailed explanation.