Hide Referrer on Click

Hide Referrer on click

Updated code:

This code is a proof of concept only. Navigation away from the parent page is cancelled and the target url is messaged to an iframe. The iframe loads a dara url, which counts as a "null" origin document. When the frame receives the message, it redirects the user to the target url with a "null" referrer. Since the frame has a null origin, it cannot be messaged directly. As a result, another web page could potentially intercept the message via their own anonymous iframe. In production, you should still use rel="noreferrer" on your links, in case your users have disabled javascript, or a javascript error occurs on your page. In the case of old browsers with JS disabled, the referrer could still be exposed. This example may only be loaded after the body of the web page, so any clicks before the page has fully loaded may not be processed by the script.

An improved workflow would include generating an encryption key, adding it inside the iframe, encrypting the target url before messaging it, then decrypting it inside the iframe. That way you wouldn't need to worry about third-party snooping.

(function($) {

  var frame = $('<iframe sandbox="allow-scripts allow-top-navigation" src="data:text/html;charset=utf-8,<scr\ipt>window.addEventListener(\'message\', function(event){ if(event.origin == \'' + window.origin + '\') top.window.location = event.data; });</scr\ipt>" style="displayyyy: none !important;">').appendTo('body');

  $('a').click(function(event) {

    frame[0].contentWindow.postMessage( event.target.href, '*' );
    return false;

  });

})(jQuery);

Original post:

Here's my attempt at a fallback solution using a blank iframe. I haven't gotten it to work, but I'm sharing it in case anybody else want to fiddle with it. Technically the frame is cross-origin, so you can't just click a link in the frame. My thought was to use postMessage to make the frame click itself.

https://jsfiddle.net/skibulk/0oebphet/39/

(function($){

  var frame = $('<iframe src="about:blank" style="displayyyy: none !important;">').appendTo('body');

  $('a[rel~=noreferrer]').click(function(event){

    var win = frame[0].contentWindow;
    win.$ = $;

    frame
    .contents()
    .find('body')
    .append(event.target.outerHTML)
    .append( "<scr\ipt> window.addEventListener('message', function(event){ document.append(event.data); $('a').click(); }); </scr\ipt>" );

    win.postMessage('Hi','*');
    return false;

  });

})(jQuery);

What is the most reliable way to hide / spoof the referrer in JavaScript?

I have found a solution which works in Chrome and Firefox. I've implemented the code in a Userscript, Don't track me Google.

Demo (tested in Firefox 9 and Chrome 17): http://jsfiddle.net/RxHw5/

Referrer hiding for Webkit (Chrome, ..) and Firefox 37+ (33+*)

Webkit-based browsers (such as Chrome, Safari) support <a rel="noreferrer">^spec.

Referrer hiding can fully be implemented by combining this method with two event listeners:

mousedown - On click, middle-click, right-click contextmenu, ...
keydown (Tab Tab Tab ... Enter).

Code:

function hideRefer(e) {
   var a = e.target;
   // The following line is used to deal with nested elements,
   //  such as: <a href="."> Stack <em>Overflow</em> </a>.
   if (a && a.tagName !== 'A') a = a.parentNode;
   if (a && a.tagName === 'A') {
      a.rel = 'noreferrer';
   }
}
window.addEventListener('mousedown', hideRefer, true);
window.addEventListener('keydown', hideRefer, true);

* rel=noreferrer is supported in Firefox since 33, but support was limited to in-page links. Referrers were still sent when the user opened the tab via the context menu. This bug was fixed in Firefox 37^{[bug 1031264]}.

Referrer hiding for old Firefox versions

Firefox did not support rel="noreferrer" until version 33 `^{[bug 530396]} (or 37, if you wish to hide the referrer for context menus as well).

A data-URI + <meta http-equiv=refresh> can be used to hide the referrer in Firefox (and IE). Implementing this feature is more complicated, but also requires two events:

click - On click, on middle-click, Enter
contextmenu - On right-click, Tab Tab ... Contextmenu

In Firefox, the click event is fired for each mouseup and hitting Enter on a link (or form control). The contextmenu event is required, because the click event fires too late for this case.

Based on data-URIs and split-second time-outs:

When the click event is triggered, the href attribute is temporarily replaced with a data-URI. The event finished, and the default behaviour occurs: Opening the data-URI, dependent on the target attribute and SHIFT/CTRL modifiers.

Meanwhile, the href attribute is restored to its original state.

When the contextmenu event is triggered, the link also changes for a split second.

The Open Link in ... options will open the data-URI.
The Copy Link location option refers to the restored, original URI.
☹ The Bookmark option refers to the data-URI.
☹ Save Link as points to the data-URI.

Code:

// Create a data-URI, redirection by <meta http-equiv=refresh content="0;url=..">
function doNotTrack(url) {
   // As short as possible. " can potentially break the <meta content> attribute,
   // # breaks the data-URI. So, escape both characters.
   var url = url.replace(/"/g,'%22').replace(/#/g,'%23');
   // In case the server does not respond, or if one wants to bookmark the page,
   //  also include an anchor. Strictly, only <meta ... > is needed.
   url = '<title>Redirect</title>'
       + '<a href="' +url+ '" style="color:blue">' +url+ '</a>'
       + '<meta http-equiv=refresh content="0;url=' +url+ '">';
   return 'data:text/html,' + url;
}
function hideRefer(e) {
   var a = e.target;
   if (a && a.tagName !== 'A') a = a.parentNode;
   if (a && a.tagName === 'A') {
      if (e.type == 'contextmenu' || e.button < 2) {
         var realHref = a.href; // Remember original URI
         // Replaces href attribute with data-URI
         a.href = doNotTrack(a.href);
         // Restore the URI, as soon as possible
         setTimeout(function() {a.href = realHref;}, 4);
      }
   }
}
document.addEventListener('click', hideRefer, true);
document.addEventListener('contextmenu', hideRefer, true);

Combining both methods

Unfortunately, there is no straightforward way to feature-detect this feature (let alone account for bugs). So you can either select the relevant code based on navigator.userAgent (i.e. UA-sniffing), or use one of the convoluted detection methods from How can I detect rel="noreferrer" support?.

Remove http referer

As of 2015 this is how you prevent sending the Referer header:

Just add this to the head section of the web page:

 <meta name="referrer" content="no-referrer" />

This works both for links and for Ajax requests made by JavaScript code on the page.

Other valid meta options include:

<meta name="referrer" content="unsafe-url" />
<meta name="referrer" content="origin" />
<meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="referrer" content="origin-when-cross-origin" />

• See if it works for your browser here: http://caniuse.com/#feat=referrer-policy

• See specs here: http://w3c.github.io/webappsec/specs/referrer-policy/

Also note that browsers now send the Origin header (with CORS requests and POST requests, see here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) which includes domain and port, and, as far as I know, cannot be removed. If you use <meta name="referrer" content="origin" /> the referrer will contain similar information to the Origin header, which is already good from a privacy point of view, since it will hide the exact page the user is in.

Update:

If you want to remove the referrer by using JavaScript only, you may add the appropriate meta tag dynamically just before making the Ajax request. This JavaScript will add <meta name="referrer" content="no-referrer" /> to head section of the web page:

var meta = document.createElement('meta');
meta.name = "referrer";
meta.content = "no-referrer";
document.getElementsByTagName('head')[0].appendChild(meta);

How To Prevent Capturing Referral - Disable Referral or Hide Referral

<meta name="referrer" content="no-referrer"/>

If you put above code on your page all outgoing links (user clicks) will not send referrer information

Documentation

If you want to hide/fake your GA referrer data (GA script on your site) you can use dr parameter

Hide referral information when my site users click on external links

By using the noreferrer tag on your links, you can prevent Amazon from learning their traffic is coming from your site, and you don't need to set up a proxy, vpn, or cookie redirects.

HTTP generally sends the referring page along with its request for the new page as part of the HTTP referer section of the request header, and that's how sites track where their visitors come from. So for example, a user would click through to Amazon.com from Dealsite.com, and the request would include an HTTP referer telling Amazon.com that the user was linked from Dealsite.com.

To prevent web sites like Amazon from learning that their traffic came from your site, prevent your links from sending the HTTP referer. In HTML5, just add rel="noreferrer" to your links, and then referral information will not be sent to the site that was linked. The noreferrer link type is only suppported in new browsers, so I suggest using the knu's noreferrer polyfill to make sure it works on older browsers too.

So far this will prevent referrer information from being sent from 99.9% of your users - the only users that will send referral information will be users that are both using old browsers and have JavaScript disabled. To make it 100%, you could require users have JavaScript enabled to be able to click on those particular links.

How to not send a referrer from a link in html

Check out this section on Wiki on referrer hiding.

Most major browsers do not send the referrer header when they are instructed to redirect using the "Refresh" HTTP header. However, this method of redirection is discouraged by the W3C.

Hide Referrer on Click