HartleySan HartleySan - 2 months ago 12
Javascript Question

How does Google mask the real URLs of links on search results pages?

The following I tested on the latest versions of Chrome and Firefox, and IE11, and the results were the same.

If you do a Google search and then mouse over a link on the search results page, the link shown in the bottom-left corner of the browser window is not the same as the actual

href
of the
a
element.

In all three browsers I tested this on, if you inspect the link in the element inspector though, you can easily see the real link (which is to
www.google.com
), and while the inspector is open, if you mouse over the link again, then you'll see the real URL link in the bottom-left corner of the browser window.

I have two questions regarding this behavior?


  1. While perhaps a bit naive to ask, why does Google do this?

  2. How does Google do this? Because I saw this behavior in Chrome, Firefox and IE11, I'm thinking that this is some JavaScript-controlled behavior (as opposed to some browser-controlled behavior), but I've never heard of this being possible in JavaScript. If it is possible in JavaScript, how do you do it?



Thank you.

Answer

Look at the initial markup:

<a onmousedown="return rwt(this,'','','','3','AFQjCNF8xnW_qOvuZURbtcZUvB6zhKtRQw','35cXyZwuoZY8hBY1VfDr8Q','0CEAQFjAC','','',event)"
      href="http://en.wikipedia.org/wiki/How_Do_You_Do_It%3F">
   <em>How Do You Do It</em>? - Wikipedia, the free encyclopedia
</a>

Initially the href attribute shows the "real" URL. But when you click on the link, the rwt function changes the attribute value to

http://www.google.de/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&ved=0CEAQFjAC&url=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHow_Do_You_Do_It%253F&ei=8nSMUqXtLKfe4QSzwIDADQ&usg=AFQjCNF8xnW_qOvuZURbtcZUvB6zhKtRQw&sig2=35cXyZwuoZY8hBY1VfDr8Q&bvm=bv.56643336,d.bGE

To answer your question: they use the onmousedown attribute to change the link's href attribute when you click on it. Barmar points out why they do it.