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 · 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

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

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

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

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

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

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

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

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

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

User · 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

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

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

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

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

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

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

[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