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.

First of all, sorry for my english.

Edit:

After reading your edit, I realised that my answer didn’t fit at all, because of the tabs.

It is not possible to modify directly the way the browser makes a get request. Knowing that, your posibilities are:

• Use GET parameters. I know you try to avoid this.
• As @Evert said, use ServiceWorkers. It is the cleanest way to modify a request before it leaves the browser.
• The last approach (an an easy one) is similar to @Emeeus’s, but instead of using localStorage, whose values are shared between tabs, you should use sessionStorage, whose values are tab-independant. Also, instead of store the entire route, you should store just a random ID. This ID will work as the identification of the chain of requests for an specific tab. Then, once your webserver returns each Request-ID for example using <meta name="request_id" content="123" /> you just need to make a request via ajax to an specific tracking endpoint and store:
  • chain_id (stored in sessionStorage)
  • request_id (stored in head > meta)
  • timestamp (generated in webserver)
  • session_id (accesible from webserver). You can avoid this, but it is still useful for checking purposes.

The request to store the route is made after you page is loaded, instead of before. This approach is quite similar to how Analytics works.

// generate an unique code and store it in sessionStorage.
if (!sessionStorage.getItem('chain_id')) { 
    sessionStorage.setItem('chain_id', 'a7835e0a-3ee9-e981-...');
}

// Then, if you use JQuery:
$(document).ready(function() {
    $.ajax({
        type: "POST",
        url: 'your/tracking/endpoint/',
        data: {
            'chain_id': sessionStorage.getItem('chain_id'),
            'request_id': document.querySelector("meta[name='request_id']").getAttribute('content'),
        }
    });
});

Note: It is preferable to don’t use JQuery to handle tracking requests neither wait until document is fully loaded. It is just an example.

And that’s all. You have the relation between user-agent, the chain, the request and the timestamp of the request, so if you need to know what request was made before or after a given one, you just need to lookup in the database using the Chain-ID and the timestamp as filters.

The django model for your requests could be.

from django.db import models
from django.contrib.sessions.models import Session


class Request(models.Model):
    session = models.ForeignKey(Session)
    chain_id = models.Charfield(max_length=100)
    request_id = models.WhatEverField...
    request_url = models.URLField(max_length=200)
    created = models.DateTimeField(auto_now_add=True)

I hope it helps.

I don’t know if this will help, but I think maybe Ajax will do,
like set additional header inside onclick event listener, as for request id, if it’s not something that sensitive then you could use cookie for the container, or maybe something much better …