Adding custom HTTP headers using JavaScript

Question

On an HTML page, while clicking the link of an Image ("img") or anchor ("a") tags, I would like to add custom headers for the GET request. These links are typically for downloading dynamic content. These headers could be SAML headers or custom application specific headers.

Is it possible to add these custom headers through JavaScript? Or if I add these through XMLHttpRequest, how can I achieve the download functionality?

This requirement is for IE6 or 7 only.

I would like to do the same, for example if you want to get image from the service which required authentication header in the GET request. — xchg.ca, Feb 14 '13 at 15:54

score 41 · Answer 1 · answered Feb 24 '09 at 11:15

If you're using XHR, then setRequestHeader should work, e.g.

xhr.setRequestHeader('custom-header', 'value');

P.S. You should use Hijax to modify the behavior of your anchors so that it works if for some reason the AJAX isn't working for your clients (like a busted script elsewhere on the page).

score 13 · Answer 2 · answered Feb 24 '09 at 11:15

13

I think the easiest way to accomplish it is to use querystring instead of HTTP headers.

answered Feb 24 '09 at 11:15

Mehrdad Afshari

414,610
91
852
789

1

+1. Even when using XMLHttpRequest, setting headers isn't wholly reliable. Go for parameters. – bobince Feb 24 '09 at 14:23
2

If you use SSL and the information you are sending is sensitive, you should not put it in the querystring because it will not get encrypted. Only the http message body is encrypted, thus safer in the header – James Reategui Aug 29 '14 at 15:53
7

@JamesReategui That is not correct: the URL is encrypted in transit. The potential security issue would be persistence of secret URLs in endpoints (in logs or bookmarks or history), but not in transit. – Mehrdad Afshari Aug 29 '14 at 16:46
Sorry, didn't double check. But yes the point was that it is a potential security issue as you mention. Also, not OWASP compliant. – James Reategui Aug 30 '14 at 17:38
elaborate it. please – MartianMartian Sep 18 '16 at 04:44
Often when dealing with existing services, changing the interface is not an option. While this suggestion may be a good alternative, it does not answer the original question. – Suncat2000 Mar 09 '22 at 20:56

score 12 · Answer 3 · answered Feb 24 '09 at 11:26

The only way to add headers to a request from inside a browser is use the XmlHttpRequest setRequestHeader method.

Using this with "GET" request will download the resource. The trick then is to access the resource in the intended way. Ostensibly you should be able to allow the GET response to be cacheable for a short period, hence navigation to a new URL or the creation of an IMG tag with a src url should use the cached response from the previous "GET". However that is quite likely to fail especially in IE which can be a bit of a law unto itself where the cache is concerned.

Ultimately I agree with Mehrdad, use of query string is easiest and most reliable method.

Another quirky alternative is use an XHR to make a request to a URL that indicates your intent to access a resource. It could respond with a session cookie which will be carried by the subsequent request for the image or link.

Václav Kužel · Answer 4 · 2021-09-10T09:03:37.993

In 2021, this can be accomplished with Service Workers.

First, you have to register a Service Worker on your page.

// index.html
window.addEventListener('load', function () {
    navigator
        .serviceWorker
        .register('/service-worker.js');
});

In the Service Worker a request is captured, modified and forwarded by calling the WindowOrWorkerGlobalScope.fetch() method.

// service-worker.js
self.addEventListener('fetch', function (event) {
    event.respondWith(async function () {
        let headers = new Headers()
        headers.append("X-Custom-Header", "Random value")
        return fetch(event.request, {headers: headers})
    }());
});

Please note that some web browsers do not show modified requests in the developer console. In that case requests can be observed with tools like tcpdump, Wireshark or in a server's logs.

Adding custom HTTP headers using JavaScript

4 Answers4

Linked