邪恶的AJAX：使用jQuery的Spyjax-白红宇

Last year I wrote a popular post titled AJAX For Evil: Spyjax when I described a technique called "Spyjax":

去年，当我描述一种称为“ Spyjax”的技术时，我写了一篇热门文章《 AJAX For Evil：Spyjax》：

Spyjax, as I know it, is taking information from the user's computer for your own use — specifically their browsing habits. By using CSS and JavaScript, I can inject anchor links into the page and tell whether you've been to the link's URL. How? Quite easy actually.

据我所知，Spyjax正在从用户计算机中获取信息供您自己使用-特别是他们的浏览习惯。通过使用CSS和JavaScript，我可以在页面中注入锚链接，并告诉您是否访问过链接的URL。怎么样？实际上很容易。

I've taken the time to demonstrate this technique using jQuery.

我花了一些时间来使用jQuery演示这种技术。

CSS (The CSS)

a.checkme			{ color:#00ff00; }a.checkme:visited	{ color:#ff0000; }

The most important part of the CSS is the difference in ":link" and ":visited" color; the method by which we can tell if a site has been visited is by its link color being the ":visited" color.

CSS最重要的部分是“：link”和“：visited”颜色的区别；我们可以通过链接颜色为“：visited”(访问)颜色来判断网站是否已被访问的方法。

jQuery JavaScript (The jQuery JavaScript)

//when the page is ready$(document).ready(function() {	//the list of domains to check and an array which will store hits	var domains = ['davidwalsh.name','css-tricks.com','scriptandstyle.com','cnn.com','digg.com'];	var visited = [];	//for every domain...	$.each(domains,function() {		//inject a link into page		var a = $('').attr({			href: 'http://' + this,			'class': 'checkme'		}).appendTo(document.body);		//check the color of the link		if($(a).css('color') == '#ff0000' || $(a).css('color') == 'rgb(255, 0, 0)') { //either format of color			$(a).addClass('highlight');			visited.push(this);		}		//remove from the page -- no longer need the links		a.remove();	});	if(visited.length) {		//save via ajax!  shady!		//display items on the page based on "hits"	}});

We start by injecting a bunch of hidden links into the page (unbeknownst to the user). For each link we've injected into the page, our jQuery JavaScript grabs the link color -- if the link's color matches the designated ":visited" link color we set via CSS, we've found a site the user's been to. Of course we can do anything we want with that information, including saving it via AJAX. Why? Well, if we know a user has been to Digg.com, maybe we show the Digg "share" icon instead of the Reddit icon.

首先，将一堆隐藏的链接注入到页面中(用户不知道)。对于我们注入到页面中的每个链接，我们的jQuery JavaScript都会获取链接颜色-如果该链接的颜色与我们通过CSS设置的指定“：visited”链接颜色相匹配，那么我们已经找到了用户访问过的网站。当然，我们可以使用该信息做任何想要的事情，包括通过AJAX保存它。为什么？好吧，如果我们知道某个用户访问过Digg.com，也许我们会显示Digg“共享”图标而不是Reddit图标。

MooTools JavaScript (The MooTools JavaScript)

var domains = ['davidwalsh.name','css-tricks.com','scriptandstyle.com','cnn.com','digg.com'];var visited = [];domains.each(function(url) {	var anchor = new Element('a', {		href: 'http://' + url,		'class': 'checkme',		html: url	}).inject(document.body);	if(anchor.getStyle('color') == '#ff0000') {		visited.push(url);	}	anchor.dispose();});

The above code accomplishes the same task using MooTools as outlined in my .

上面的代码使用MooTools完成了我概述的相同任务。

What are your thoughts on Spyjax? Harmless? Major privacy violation? You tell me!

您对Spyjax有什么想法？无害？严重侵犯隐私？你告诉我！

翻译自: