EventSource and basic http authentication

Question

Does anyone know if it is possible to send basic http authentication credentials with EventSource?

Answer 1

I'm looking for a solution to the same problem. This post here says this:

Another caveat is that as far as we know, you cannot change the HTTP headers when using EventSource, which means you have to submit an authorization query string param with the value that you would have inserted using HTTP Basic Auth: a base64 encoded concatenation of your login and a token.

Here is the code from the post:

 // First, we create the event source object, using the right URL. var url = "https://stream.superfeedr.com/?"; url += "&hub.mode=retrieve"; url += "&hub.topic=http%3A%2F%2Fpush-pub.appspot.com%2Ffeed"; url += "&authorization=anVsaWVuOjJkNTVjNDhjMDY5MmIzZWFkMjA4NDFiMGViZDVlYzM5"; var source = new EventSource(url); // When the socket has been open, let's cleanup the UI. source.onopen = function () { var node = document.getElementById('sse-feed'); while (node.hasChildNodes()) { node.removeChild(node.lastChild); } }; // Superfeedr will trigger 'notification' events, which corresponds // exactly to the data sent to your subscription endpoint // (webhook or XMPP JID), with a JSON payload by default. source.addEventListener("notification", function(e) { var notification = JSON.parse(e.data); notification.items.sort(function(x, y) { return x.published - y.published; }); notification.items.forEach(function(i) { var node = document.getElementById('sse-feed'); var item = document.createElement("li"); var t = document.createTextNode([new Date(i.published * 1000), i.title, i.content].join(' ')); item.appendChild(t); node.insertBefore(item, node.firstChild); // We add the element to the UI. }); });

Answer 2

EventSource is about the server sending events to the client. I think you need bidirectional communication for authentication. How would you otherwise send the actual credentials?

WebSockets, however, can achieve that. Is that what you are looking for?

Update:

You can achieve what you want by utilizing cookies, as pointed out by 4esn0k . Cookies are sent along with the initial request that the browser makes to establish the connection. So, just make sure you set the session identifier for the cookie before launching any EventSource connections.

Answer 3

If your talk about cookies (not http auth):

EventSource uses http, so cookies are sent with the EventSource connection request.

Http auth should be supported as any other http url, although from the spec CORS+http auth is not supported.

Answer 4

Nowadays there is a NPM package to change the HTTP Header

https://www.npmjs.com/package/eventsource

This library is a pure JavaScript implementation of the EventSource client. The API aims to be W3C compatible.

You can use it with Node.js or as a browser polyfill for browsers that don't have native EventSource support.

Answer 5

You can use event-source-polyfill to add headers like this

import { EventSourcePolyfill } from 'event-source-polyfill';

new EventSourcePolyfill(`/api/liveUpdate`, {
  headers: {
    Authorization: `Bearer 12345`,
    'x-csrf-token': `xxx-xxx-xxx`,
  },
});