Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

How do Chrome, Safari, Firefox or other browsers know you've visited the destination URL of a redirecting link?

I've always found it interesting that the browsers know the URL a redirecting URL lands on and apply the visited styling to the link.

To understand what I'm asking:

  • Type a random keyword into Google.
  • Find a blue link in the search result. Do not click on it.
  • Copy the destination URL (usually written in green beneath the link).
  • Open a new window/tab and paste the destination URL in the address bar and hit Enter.
  • Go back to the Google search results and immediately the link becomes visited and turns purple.

However, the link is to some google.com/url... page. Is there something Google puts in their markup to tell the browser what URL to affiliate the link's history with or something? Do browsers just read the Google search results a certain way?

share|improve this question
    
It is the browser which connects to a URL, and gets the redirected one. No mistery there. –  vonbrand Mar 31 '13 at 2:20

1 Answer 1

up vote 6 down vote accepted

If you pay attention to the status bar while hovering the link, you'll see that it initially points to the "clean" URL.

Only when you click on the link (with any of the three mouse buttons), a JavaScript event gets triggered that changes the link's destination to Google's URL redirection.

To verify my claim, just right-click any of the purple links and close the context menu. Unless you already visited the site from within Google's search results, you'll see that it changes colors.1

I don't know exactly how Google injects the redirection URL2, but the general idea is this:

// define a function `f' that changes a link's clean URL to a redirection URL
var f = function () {
    // prepend `http://www.google.com/url?rct=j&url=' to the link's target
    this.href = 'http://www.google.com/url?rct=j&url=' + escape(this.href);
    // don't invoke this function anymore when clicking the link
    this.removeEventListener('click', f);
    // don't invoke this function anymore when right-clicking the link
    this.removeEventListener('contextmenu', f);
}

// save all <a> tags in an array `a'
var a = document.getElementsByTagName('a');

// for each <a> tag in the array `a'
for (var i = 0; i < a.length; i++) {
    // execute function `f' when clicking the link
    a[i].addEventListener('click', f);
    // execute function `f' when right-clicking the link
    a[i].addEventListener('contextmenu', f);
}

You can try this jsFiddle to see how it works.


1 Tested on Chromium 25 (Ubuntu 12.10) and Chrome 26 (Windows 7)

2 Minimized JavaScript is a bit difficult to read.

share|improve this answer
    
I don't think that's what it is. That also appears to be a very OS-specific explanation. However, you did point me in some direction. I discovered that in Google Ads, advertisers can display whatever URL the choose and when you hover over an advertisement you get Go to display URL in the status bar, but the destination URL is completely different. I think browsers are tailored around Google's search results to use the green URLs for the history. –  henryaaron Apr 9 '13 at 23:50
    
No part of my answer is OS specific. I mentioned the exact version (which happens to include the OS) since the re-rendering of link colors might vary, but the general result is exactly the same in, e.g., the current version of Chrome on Windows 7. If you don't believe me: 1. Follow the steps I've outlined in my answer with JavaScript enabled. 2. Google something with JavaScript disabled. You'll see that, without JavaScript, no clean URLs get displayed in the status bar, since there's no way to change the URL when clicking the link. –  Dennis Apr 10 '13 at 0:08
    
I know the Google serves up a completely different page when JavaScript is disabled on your machine. But nonetheless this makes sense. Can you explain what kind of JavaScript technique would enable you to tamper with the status bar? –  henryaaron Apr 10 '13 at 3:33
    
It's not the status bar that's being tampered with; it's the link's URL. The link initially points to the clean URL, but that URL gets modified when clicking it. I've added a fiddle to illustrate. –  Dennis Apr 10 '13 at 16:38
    
Wow. This is the case! I'm very shocked. Google couldn't find a better way to keep track of their analytics? I mean if you're using JavaScript to do this, you might as well track the triggered links through inline JavaScript and not have the whole redirection system. Now I understand, thanks for being patient with me. –  henryaaron Apr 14 '13 at 2:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.