How do I send "origin" as the referrer for the favicon.ico file when clicking on an image?

I have a simple image preview that, when clicked, takes you to a full size image:

<html>
  <head>
    <meta name="referrer" content="origin">
  </head>
  <body>
    <a href="/myimage.jpg">
      <img src="/myimage.jpg" title="my image" border="0" />
    </a>
  </body>
</html>

The problem: in addition to the request for the image, the browser will also request the favicon.ico. The request headers for the image is: Referer: https://example.com/ (as expected). However, for the request for the favicon.ico file, this header is the full url of the referring page: Referer: https://example.com/where-I-was.

How do I set the Referer header for the favicon.ico request to simply the origin? I don't want it the full url to show in my nginx logs. Thx!

Solution

Option 1

Use the referrerpolicy HTML attribute on the link tag - see docs on MDN.

<a href="/myimage.jpg" referrerpolicy="origin">

Option 2

Use the webRequest API to rewrite the Referer header - see the MDN page on it here. Simply set the header to whatever you want it to be - seems like you might be interested in the window.location object.

Sample code - modified from the MDN page:

var targetURL = "http://example.com/favicon.ico";

var protocol = window.location.protocol;
var hostname = window.location.hostname;
var port = window.location.port;

var origin = protocol + '//' + hostname + (port ? ':' + port : '');

function rewriteUserAgentHeader(e) {
  e.requestHeaders.forEach(function(header){
    if (header.name.toLowerCase() == "referer") {
      header.value = origin;
    }
  });
  return {requestHeaders: e.requestHeaders};
}

browser.webRequest.onBeforeSendHeaders.addListener(
  rewriteUserAgentHeader,
  {urls: [targetURL]},
  ["blocking", "requestHeaders"]
);