Make browser submit additional HTTP-Header if click on hyperlink

http link header
http request header format
add custom header to http request
how to send headers from browser
how to send request headers
how to add http headers in html
get http headers
http custom header

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

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.

Link, The HTTP Link entity-header field provides a means for serialising one or more links in HTTP headers. It is semantically equivalent to the HTML  Hyperlinks from Office to Internet Explorer or to another Web browser If this issue occurs when you click hyperlinks in Office documents that either directly open HTML Web content or are redirected to HTML content, client users can avoid the problem by enabling a registry key to send the hyperlink navigation to the browser instead of directly binding to the hyperlink from Office.

Why doesn't the HTML\DOM specification allow hyperlinks to set an , The Accept (and the more useful Accept-Encoding ) headers should not If you do a HTTP call from JavaScript, your JavaScript code is the But for HTML link the browser is the client and therefore it gets to choose. If because most resources just have their format and don't make much sense in another. These values use instructions that you can send to a browser in the HTTP header, but changing the HTTP header for a document is harder than embedding the instructions into the web page itself. To instruct a browser to redirect users from one page to another, here’s what you need to do in particular: Use

Playing with Referer Header, If you want to control your personal browser not to pass the Referer to site2.com , you Use a Data URL ('data:') to hide the actual page the link is coming from: <a add the appropriate meta tag dynamically just before making the Ajax request. Also note that browsers now send the Origin header which includes domain  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more How to add HTTP header to URL

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

HTTP Headers for Dummies, For example, when you opened this article page, your browser HTTP headers are the core part of these HTTP requests and GET /tutorials/other/top-20-mysql-​best-practices/ HTTP/1.1 did the browser send If-Modified-Since header? and click on an article link, this header is sent to my browser:  When a web page asks for authorization, the browser opens a login window. When you enter a username and password in this window, the browser sends another HTTP request, but this time it contains this header. Authorization: Basic bXl1c2VyOm15cGFzcw== The data inside the header is base64 encoded.

HTTP and Forms :: Eloquent JavaScript, As we saw in the example, a browser will make a request when we enter a URL in When you click the Send button, the form is submitted, meaning that the The browser will automatically add some request headers, such as “Host” text input to the OK button, rather than going through the help link first: Linking Documents. A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag.

Introductory HTTP - Beginner-friendly book on HTTP, For that, we can use an HTTP tool and just like the browser did when we entered a These other requests are to make sure the page displays properly on your GET requests are initiated by clicking a link or via the address bar of a browser. HTTP headers allow the client and the server to send additional information  Yes, you can make a button not submit a form by adding an attribute of type of value button: <button type="button"><button>

Web Development with Node and Express: Leveraging the JavaScript Stack, The HTTP protocol defines a collection of request methods (often referred to as HTTP When you type a URL into a browser (or click a link), the browser issues an HTTP Request. Headers. The URL isn't the only thing that's passed to the server It will also send informa‐tion about the user agent (the browser, operating  To customize the ScreenTip that appears when you rest the pointer over the hyperlink, right-click the link, click Edit Hyperlink, click ScreenTip in the top-right corner of the dialog box, and enter the text you want. Remove or turn off hyperlinks. Create a hyperlink in Publisher. Create a hyperlink in OneNote. Hyperlinks in Word for the web.

Comments
  • just append the id to all link (GET param) or use ajax?
  • @appleapple 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.
  • oh, miss that sentence. BTW, I don't think a nice URL is important. at least you can redirect to a cleaner one.
  • Thanks this is thorough!
  • Does this work is the user has several browser tabs? I elaborated the question to illustrate my concerns.
  • @guettli I've updated the answer, see this this codesandbox.io/s/qk99o4vy7q I've also specified how to emulate your case.
  • The solution needs to work for several browser tabs. I elaborated the question. Please tell me if something is not clear. Thank you.
  • The need to use several browser tabs independently, complicates your question a little. I'm going to edit my answer.
  • I am unsure if AJAX will can intercept the http request if a user follows the href of a link. This creates a GET request from the browser to the server. I know no way to add additional headers via AJAX.
  • Send it using POST reuest like : onclick(function(){ //set header //post to destination //retrive next data, attach to cookie, then redirect user to clicked url })