CSS Privacy – I know where you have been

September 20, 2009

Problog

This post cover the following topics:

  • CSS hover pseudo-class
  • Setting a visited link color
  • Getting an elemtn’s color using CSS
  • Knowing where users have been using CSS
  • Web mind reader joke

One of the greatest things about CSS is that it gives you almost full control about the way elements are being presented on the browser.  Sometime as you will see in this post it might be too much control, or at least  provide information that may conflict with privacy issues.

CSS allows you to specify Pseudo-classes which are used to add special effects to some selectors.  One of these classes is the Anchor Pseudo-classes which allows you to set the style for links in the page according to different states:


a:link {color:#FF0000}      /* unvisited link */
a:visited {color:#00FF00}  /* visited link */
a:hover {color:#FF00FF}  /* mouse over link */
a:active {color:#0000FF}  /* selected link */

By setting the a:visited you can specify the color that a visited link will appear on the browser. While the default for visited links is the purple color, developers can change this color to whatever suits their design scheme.

The browser saves a history list of all the visited links and when it tries to render a new link it checks in its internal list whether or not this link has been visited once before.  The user can empty this link by cleaning the browser history, for example in IE6: Tools–>Internet Options…–>Clear History.

Getting an Element’s Color

While CSS lets you set the color for every element it also lets you read the color that every element has.

Actually, getting the style from an element is not such an easy task if you are considering cross-browser support. Since you can easily use an open javascript library – like jQuery – I wouldn’t get into too much details of how to do it, but will give just a few points:

  • IE – you can use the element.currentStyle[style name]
  • W3C – document.defaultView.getComputedStyle(element).getPropertyValue

I Know Where You’ve Been

Using the link visited style with the option to read each element color will allow you to know if a certain link has been viewed by the user.

The following is a simple implementation that shows you how to use this technique:

So how it works?


function isUrlVisited(url)
{
	if( url.indexOf("http://" ) == -1 ) url = "http://" + url;

	var a = document.createElement("a");
	$(a).attr("href",url);
	$(a).text(url);
	$(a).attr("class","hiddenLink");
	$(document.body).append(a);
	var color = new Color($(a).css("color"));
	$(a).remove();

	delete a;
	if( color.getHex() == '#ff0000') return true;
	return false;

}

The isUrlVisited function gets a URL as a parameter. I then create a new link element and set i’s href attribute to the URL parameter. In the CSS file i created a pseudo-class for the visited links called “hiddenLink” . In this class i simply set the color of a visited link to the color red.

After that I append the new link to the document body and I get the color of the new link. Since i saw that colors are not consistence across browsers i created a small utility class – Color.js – which is responsible to represent colors in javascript across browsers.

I then compare the color i got with the color red and if there is a match it means that the browser remember this link since the user has visited there.

So while the browser tries to prevent the developer from obtaining any privacy information – it doesn’t allow developers to get the history of the browser – using this technique, theoretically you can ask about any URL and see if the user has been there.

The Web Mind Reader Prank

Using this technique i’ve created the web mind reader page in order to fool a few friends of mine. Basically i told them that i’ve developed an unique algorithm that read people minds, and all they have to do is to think about links they visited and my page will show it to them.

I used a popular URL list in order to see if the user has been in some of these popular URLs and display them in case they did.

Using some popular lists of URLs and the above technique anybody can check to which URLs somebody has browsed to.

You can check the web mind reader page and send it to your friends as a joke.

Bookmark and Share
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • E-mail this story to a friend!
  • FriendFeed
  • LinkedIn
  • StumbleUpon
  • Twitter

posted in Blog by Amir Harel

4 Comments to "CSS Privacy – I know where you have been"

  1. Alex Dobson wrote:

    Creative thinking – simple & very clever… snoop-tastic!

  2. Alex Dobson wrote:

    Creative thinking – simple & very clever… snoop-tastic!

  3. CARL wrote:


    Medicamentspot.com. Canadian Health&Care.Special Internet Prices.No prescription online pharmacy.Best quality drugs. Low price drugs. Order pills online

    Buy:Wellbutrin SR.Zocor.Seroquel.SleepWell.Aricept.Female Pink Viagra.Zetia.Buspar.Cozaar.Ventolin.Amoxicillin.Lipitor.Nymphomax.Prozac.Benicar.Lipothin.Lasix.Female Cialis.Acomplia.Advair….

  4. ANTONIO wrote:


    CheapTabletsOnline.com. Canadian Health&Care.Best quality drugs.Special Internet Prices.No prescription online pharmacy. Low price pills. Order drugs online

    Buy:Accutane.Synthroid.Zyban.Prednisolone.Zovirax.Human Growth Hormone.Mega Hoodia.Arimidex.Actos.Nexium.100% Pure Okinawan Coral Calcium.Petcam (Metacam) Oral Suspension.Valtrex.Prevacid.Retin-A.Lumigan….

 
Powered by Wordpress and MySQL. Theme by openark.org