Setting header value from Javascript Client Side

Question

I want to set a customer header from browser similar to what mod plugin does on chrome, is there any way to set a header from javascript client side?

Based on a condition, I want to set a header so that all subsequent browser requests will have this header value.

I know this from server side, but wanted to know if it is possible from client side.

Answer 1

A simple way to do this in vanilla JS is to augment the XMLHTTPRequest.prototype.send method.

You would do something like

const defaultSend = XMLHTTPRequest.prototype.send;
XMLHTTPRequest.prototype.send = function (data) {
  this.setRequestHeader('SOME-CUSTOM-HEADER', 'header-value');
  defaultSend.call(this, data);
};

While this works, it's like using a nuke when you need a hammer. It pollutes ALL of the following XHRs run in the context of that particular window. While you could do domain level filtering, but I find that it's not worth the trouble.

If you are using client XHR libraries like axios , they will often provide a better and more contextual way. For example, in case of axios, you could do something like

const client = axios.createClient();
client.interceptors.request.use(config => {
  config.headers['SOME-CUSTOM-HEADER'] = 'header-value';
  return config;
});
client.get('/some-url', params); // this will have the custom header that you injected

EDIT: One caveat here is that this only affects XHRs, not form submissions or asset calls.