Search code examples
javascriptmouseeventtrackingreferrerspoofing

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

Normally, the referrer is traceable through:

  • JavaScript's document.referrer
  • The request headers, e.g. PHP's $_SERVER['HTTP_REFERER']

I have set up a Codepad demo which shows these properties, for testing purposes.

#Requirements:

  1. The original referrer should effectively be hidden, at least for all mouse events.
  2. Cross-browser support (at least Chrome and Firefox).
  3. Stand-alone, without any external content (plugins, libraries, redirection pages, ...).
  4. No side-effects: Links should not be rewritten, history entries should be preserved.

The solution will be used to hide the referrer when following a link of <a href="url">.

##Exact description of the use-case As described in this question on Webapps, links at Google Search are modified on click. Consequently,

  1. Google is able to track your search behaviour (Privacy-- )
  2. The page request is slightly delayed.
  3. The linked page cannot track your Google search query (Privacy++ )
  4. Dragged/Copied URLs look like http://google.com/lotsoftrash?url=actualurl.

I'm developing a Userscript (Firefox) / Content script (Chrome) (code), which removes Google's link-mutilating event. As a result, points 1, 2 and 4 are dealt with.

Point 3 remains.

  • Chrome: <a rel="noreferrer">
  • Firefox: data-URIs. I have created a sophisticated approach to implement this feature for left- and middle-clicks, while still enforcing point 4. However, I'm struggling with the right-click method.
Solution

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