How do I access the HTTP request header fields via JavaScript?

Question

I want to capture the HTTP request header fields, primarily the Referer and User-Agent, within my client-side JavaScript. How may I access them?

---

Google Analytics manages to get the data via JavaScript that they have you embed in you pages, so it is definitely possible.

Related:
Accessing the web page's HTTP Headers in JavaScript

Collinsia

The original question was whether HTTP Headers can be accessed in javascript. Posted that question seperately, for clarity. #220731 – Tomfoolery

Answer 1

If you want to access referrer and user-agent, those are available to client-side Javascript, but not by accessing the headers directly.

To retrieve the referrer, use document.referrer.
To access the user-agent, use navigator.userAgent.

As others have indicated, the HTTP headers are not available, but you specifically asked about the referer and user-agent, which are available via Javascript.

Permeable

Do you have a reference where I could find all the available values? – Collinsia

I don't care if it is indirectly available, so don't read too much into my ignorant phrasing of the question. – Collinsia

@GrantWagner : I need to know if the Originheader is set. – Predestinate

Answer 2

Almost by definition, the client-side JavaScript is not at the receiving end of a http request, so it has no headers to read. Most commonly, your JavaScript is the result of an http response. If you are trying to get the values of the http request that generated your response, you'll have to write server side code to embed those values in the JavaScript you produce.

It gets a little tricky to have server-side code generate client side code, so be sure that is what you need. For instance, if you want the User-agent information, you might find it sufficient to get the various values that JavaScript provides for browser detection. Start with navigator.appName and navigator.appVersion.

Manor

Answer 3

This can be accessed through Javascript because it's a property of the loaded document, not of its parent.

Here's a quick example:

<script type="text/javascript">
document.write(document.referrer);
</script>

The same thing in PHP would be:

<?php echo $_SERVER["HTTP_REFERER"]; ?>

Word

Answer 4

Referer and user-agent are request header, not response header.

That means they are sent by browser, or your ajax call (which you can modify the value), and they are decided before you get HTTP response.

So basically you are not asking for a HTTP header, but a browser setting.

The value you get from document.referer and navigator.userAgent may not be the actual header, but a setting of browser.

Koenig

I just came on this question because I need to know if the Originheader is set. – Predestinate

Answer 5

One way to obtain the headers from JavaScript is using the WebRequest API, which allows us to access the different events that originate from http or websockets, the life cycle that follows is this: WebRequest Lifecycle

So in order to access the headers of a page it would be like this:

    browser.webRequest.onHeadersReceived.addListener(
     (headersDetails)=> {
      console.log("Request: " + headersDetails);
    },
    {urls: ["*://hostName/*"]}
    );`

The issue is that in order to use this API, it must be executed from the browser, that is, the browser object refers to the browser itself (tabs, icons, configuration), and the browser does have access to all the Request and Reponse of any page , so you will have to ask the user for permissions to be able to do this (The permissions will have to be declared in the manifest for the browser to execute them)

And also being part of the browser you lose control over the pages, that is, you can no longer manipulate the DOM, (not directly) so to control the DOM again it would be done as follows:

    browser.webRequest.onHeadersReceived.addListener(
        browser.tabs.executeScript({
        code: 'console.log("Headers success")',
    });
});

or if you want to run a lot of code

    browser.webRequest.onHeadersReceived.addListener(
        browser.tabs.executeScript({
        file: './headersReveiced.js',
    });
});

Also by having control over the browser we can inject CSS and images

Documentation: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onHeadersReceived

Rowden

Answer 6

I would imagine Google grabs some data server-side - remember, when a page loads into your browser that has Google Analytics code within it, your browser makes a request to Google's servers; Google can obtain data in that way as well as through the JavaScript embedded in the page.

Krispin

No, Google's code is JavaScript embedded in my static html, in my case on sourceforge.net. There is zero possibility of server-side execution. – Collinsia

Or do you mean on their server? – Collinsia

I mean their server - your browser makes a request to their server when the page loads. – Krispin

This request leaves your browser and hits their servers, sending data, baby: google-analytics.com/urchin.js – Krispin

I just re-read my response - I said Google's server right there, why would you think I meant something else? – Krispin

Wrong, the referrer for the Google Analytics script is the page which has it embedded. – Klansman

It's likely that 11 some-odd years ago @JasonBunting meant the request (including IP address along with all headers from the requestee, which would be the end user) as read by the webserver at Google could be programmatically associated with the data collected via the JS script. Why am I writing this. – Curzon

@Curzon - why are you writing this? :) Who knows? I can't recall anything about this, but you know - over 10 years ago I was not who I am now. :) – Krispin

Answer 7

var ref = Request.ServerVariables("HTTP_REFERER");

Type within the quotes any other server variable name you want.

Issi

How this is related to JavaScript? – Eckman

FYI: This is ASP but it isn't Javascript. – Polychromy