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

View Basic 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)

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 previous Spyjax post.

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

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

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

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

翻译自: https://davidwalsh.name/jquery-spyjax

相关资源：jdk-8u281-windows-x64.exe