Make browser submit additional HTTP-Header if click on hyperlink

Question

Is there a way to make the webbrowser submit additional HTTP header if the user clicks on a link?

Background: In our environment every http-request has a unique ID on the server side. See https://serverfault.com/questions/797609/apache-x-request-id-like-in-heroku

If your web application receives a http-request, I would like to know which page was the page before. The http referrer is not enough, since the user could use several tabs in his browser.

I would like to avoid to put the ugly request-id into every GET request which gets send from the browser to the server. Up to now our URLs are nice.

My prefered solution would be some JavaScript magic which adds the request-id of the current page into the next http request.

Steps in detail:

1. browser access URL http://example.com/search
2. web server receives http request with request ID 123
3. web server sends content of the URL to the browser (a search page). The page includes the request ID 123 somewhere
4. the user searches for "foobar".
5. the web browser submits a http request to the server and includes the previous request id somehow.
6. web server receives second http request (ID 456) and can access the value of the first request (ID 123) somehow.
7. Web server can store the relation "123 --> 456" in a database for later analysis.

My goal is to track the relations "123 --> 456". Above solution is just a strategy to get to the goal. Other strategies are welcome.

We use the web framework django. But AFAIK this does matter in this context.

the user could use several tabs in his browser

I elaborate what that means for a matching solution. The sequence of requests which come from one user does not solve the issue.

One use with several tabs:

1. user looks at page A in tab1
2. user looks at page B in tab2
3. user follows a link on page A to page C
4. user follows a link on page C to page D
5. user follows a link on page B (tab2) to page E.

I want to know see two sequences:

A -> C -> D

And

B -> E

Answer 1

The only modern 'sane' option here is to use a ServiceWorker.

A ServiceWorker can intercept HTTP requests for a domain you control and decorate it with more headers.

A ServiceWorker works 'outside' of a browser tab, and if multiple tabs are open with the same website, the same serviceworker will be used for all of them.

A full tutorial on how to accomplish that is definitely too much for this answer box, but intercepting and doing stuff with HTTP requests is a big use-case, so off-site sources will usually have this as an example.

I would say that this is kind of a bad idea. If you think you need this, maybe you can handle this in a different way. A common way to do this might be using cookies instead.

Answer 2

We can modify request headers using:

• .setRequestHeader() method of XMLHttpRequest() object (in same or allowed origins).
• Editing the headers in browser console or using some complement (it is not practical).
• Performing the request from the server side e.g using CURL, wget, or some library (client->serverProxy->url with custom headers ).

It is not possible (using javascript) to change the headers sent by browser in a request like <a href=""></a> because at least now, the http content negotiation is a browser's inner capability (except in part using XMLHttpRequest in same or allowed origins).

Then, in my opinion, as @Evert said you have two practical ways (a third in fact) to achieve your goal, performing a server proxy or using cookies. Here you have a very simple way using window.localStorage:

LocalStorage example

if (!localStorage.getItem("ids")) {//<-- the place in which we store the behavior
  localStorage.setItem("ids", 'somevalue')
} else {
  var ids = JSON.parse(localStorage.getItem("ids"));
  ids.ids.push(id);//<-- we add some value
  localStorage.setItem("ids", JSON.stringify(ids));  
}

Full example here: https://jsfiddle.net/hy4rzob9/ press run several times and you'll see that we store each visit, of course, in your implementation you have to replace the random number for a unique identifier of each page.

LocalStorage example with several tabs

Taking into account the update, we could store the history using also document.referrer with localStorage with something like this:

var session = Math.random();

if(!localStorage.getItem("routes")){//<-- first time
    var routes = {};
routes[session] = [document.location.href];

localStorage.setItem("routes", JSON.stringify(routes))

}else{

    var routes = JSON.parse(localStorage.getItem("routes"));

    if(!document.referrer){
        routes[session] = [document.location.href];//<-- new root
    }else{

        for(let ses in routes){
             if(routes[ses].includes(document.referrer)){
                routes[ses].push(document.location.href); 
             }
        }
    }

    localStorage.setItem("routes", JSON.stringify(routes))


}

var r = JSON.parse(localStorage.getItem("routes"));

console.log(r);

Full example here https://codesandbox.io/s/qk99o4vy7q, to emulate your example open this https://qk99o4vy7q.codesandbox.io/a.html (represents A) and open in a new tab https://qk99o4vy7q.codesandbox.io/b.html (represents B), navigate in both tabs and see the console. This example won't work if we share some referrer, because we can't differentiate between referrers if we attach nothing in the URL. A -> C -> D and B -> E will work, but A -> C -> D and B -> E -> A won't.

Ping example

There is other way, that is easy but has a limitation in browser compatibility, that is using ping attribute of <a> like this:

<a href="https://www.google.com/" ping="trackPing.py">Link to track</a>

ping Contains a space-separated list of URLs to which, when the hyperlink is followed, POST requests with the body PING will be sent by the browser (in the background). Typically used for tracking.

Open the console -> network, delete all, run the snippet and click in the link, if your browser supports it, you will see that the browser send a POST request to trackPing.py (I guess doesn't exist in SO), that post is void but you could track the environmental variables such as request.environ['REMOTE_ADDR'] or something.