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  39 s HTTP Headers in JavaScript

User · Accepted Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

var ref   Request ServerVariables  HTTP REFERER      Type within the quotes any other server variable name you want

User · Answer

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

User · Answer

var ref   Request ServerVariables  HTTP REFERER      Type within the quotes any other server variable name you want

User · Answer

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

User · Answer

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   gt          console log  quot Request   quot    headersDetails               urls    quot     hostName   quot             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  quot Headers success quot                  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

User · Answer

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

User · Answer

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   gt          console log  quot Request   quot    headersDetails               urls    quot     hostName   quot             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  quot Headers success quot                  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This can be accessed through Javascript because it s a property of the loaded document  not of its parent   Here s a quick example    lt script type  text javascript  gt  document write document referrer    lt  script gt    The same thing in PHP would be    lt  php echo   SERVER  HTTP REFERER      gt

User · Answer

This can be accessed through Javascript because it s a property of the loaded document  not of its parent   Here s a quick example    lt script type  text javascript  gt  document write document referrer    lt  script gt    The same thing in PHP would be    lt  php echo   SERVER  HTTP REFERER      gt

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

Examples related to javascript

Examples related to http

Examples related to http-headers