[Tracking] – Comment peuvent être pistés les activités d’un internaute

 

Coucou les amis !

Ravi de pouvoir vous offrir un article qui je l'espère vous plaira !
Souvent on vous parle du tracking, du jeux de pistage auquel se livre un certain nombre d'entreprises, afin de déterminer quel contenu sera le plus percutant pour vous.

Tout cela à pour but de mieux vous connaitre. Ainsi une entreprise va se rendre compte d'un certain nombre de comportements similaires parmi ses internautes, puis en tirer des conclusions.

Je ne sais pas s'il existe des solutions open source, ou des démonstrations de "tracking", mais j'ai souhaité vous partager un script que j'ai rapidement écrit, et qui vous permettra de voir chacun de vos fait et geste.
Vous pourrez ensuite vraiment avoir une idée de ce que peuvent percevoir de grandes plateformes comme Google, Amazon, AliExpress, Facebook, ...

 

Cas annexes d'utilisation

Protéger

Comme évoquer dans mon introduction, il y a le tracking publicitaire et commercial, mais il y a une autre forme de tracking "utile".
Dans le cas où vous auriez des enregistrements de l'activité de vos utilisateurs, vous pourriez très facilement déterminer lorsqu'une manipulation d'un internaute est volontaire ou non :

Piratage, Fraude, ....

Vous pourriez avec la date et l'heure, visualiser comme au travers d'une caméra l'activité des personnes à un moment précis.

Attaquer

Bien entendu, les motivations ne sont pas toujours de se sécuriser ou de vendre plus de boite de friandise. Certains utilisent ce genre d'outils au travers d'un malware afin de vous espionner et de connaitre tous vos faits et gestes.

 

Le script

 

Voilà le gros script qu'il faudra insérer sur votre plateforme.

/*
*		 User Activity Tracking
*		(c) Dyrk.org 2019 - 2020
*
*
*/

var  userActivityTracker = {
		 mouse : [],
		 t : (new Date()).getTime(),
		 lastCursorPosition:null,
		/*
		*
		*	Effectuer une action de la souris
		*
		*/
		drawPixel :function(color, x,y, size, el){
			px = document.createElement('div');
			px.setAttribute('style', 'z-index:999999999;opacity:0.5;background:'+color+';height:'+size+'px;width:'+size+'px; position:absolute;left:'+x+'px;top:'+y+'px;border-radius:20px');
			document.getElementsByTagName('html')[0].appendChild(px);
			if (el.click) el.target.click();
			setTimeout((function(el){ el.parentNode.removeChild(el); }).bind(null, px), 2500);
		},
		/*
		*
		*	Effectuer une saisie clavier
		*
		*/	
		writeKeyboard : function(target){
				var  	s 		= new XMLSerializer(), 
						items 	= document.getElementsByTagName(target.identifier.type),
						search 	= decodeURIComponent(atob(target.identifier.matchHTML));
				for (var i in items){
					if (typeof items[i] != 'object') continue;
					var strTmp = s.serializeToString(items[i]);
					if (strTmp == search){
						items[i].value += target.recordValue;
					}
				}
		},
		/*
		*
		*	Effectuer un scroll
		*/
		scroll :function(e){
			document.getElementsByTagName('html')[0].scrollTo(e.scrollLeft , e.scrollTop)
		},
		/*
		*
		*	Télécharger l'activité de l'utilisateur
		*/
		downloadUserWay : function(){
			var a = document.createElement('a');
			a.setAttribute('href', 'data:text/csv,'+encodeURIComponent(JSON.stringify(userActivityTracker.mouse)));
			a.setAttribute('download', 'recorder.txt');
			a.click();
		},
		
		/*
		*
		*	Rejouer l'activité de l'utilisateur
		*
		*/
		drawUserWay : function(){
			document.getElementsByTagName('html')[0].scrollTo(0 , 0);
			userActivityTracker.mouse.map (e=>{
				switch (e.recordType){
					case 'mouse':
						setTimeout(userActivityTracker.drawPixel.bind(null, e.color, e.positionX, e.positionY,e.size, e), e.time);
					break;
					case 'keyboard' :
						setTimeout(userActivityTracker.writeKeyboard.bind(null, e), e.time);
					break;
					case 'scroll' :
						setTimeout(userActivityTracker.scroll.bind(null, e), e.time);
					break;
				}
			});
		},
		/*
		*
		*	Démarrer un enregistrement de l'activité de l'utilisateur
		*	@time : durée d'enregistrement
		*
		*/
		initRecord : function(time){
			var listener = [], x = document.getElementsByTagName('html')[0];
			document.getElementsByTagName('html')[0].scrollTo(0 , 0);
			//Met en place tous les listeners
			listener.push(x.addEventListener('mousemove', function(e){
				e.color 	= '#000';
				e.size  	=  5;
				e.recordType = 'mouse';
				e.positionX	= 	e.pageX ;
				e.positionY	=	e.pageY;
				e.time		= (new Date()).getTime() - userActivityTracker.t;
				userActivityTracker.mouse.push(e);
				userActivityTracker.lastCursorPosition = e;
			}));
			listener.push(x.addEventListener('click', function(e){
				e.color 	= '#452FFE';
				e.size  	=  15;
				e.recordType= 'mouse';
				e.click		= true;
				e.positionX	= 	e.pageX ;
				e.positionY	=	e.pageY;
				e.time		= (new Date()).getTime() - userActivityTracker.t;
				userActivityTracker.mouse.push(e);
				lastCursorPosition = e;
			}));
			listener.push(x.addEventListener('keyup', function(e){
				var s = new XMLSerializer(), str = s.serializeToString(e.target),
				type = e.target.nodeName;
				e.identifier = {matchHTML: btoa(encodeURIComponent(str)), type:type};
				e.recordType = 'keyboard';
				e.recordValue = e.key;
				e.time		= (new Date()).getTime() - userActivityTracker.t;
				userActivityTracker.mouse.push(e);
			}));
			listener.push(window.addEventListener('scroll', function(e){
				e.recordType = 'scroll';
				e.scrollTop  = document.getElementsByTagName('html')[0].scrollTop;
				e.scrollLeft  = document.getElementsByTagName('html')[0].scrollLeft;
				e.time		= (new Date()).getTime() - userActivityTracker.t;
				userActivityTracker.mouse.push(e);
				if (userActivityTracker.lastCursorPosition) userActivityTracker.mouse.push(userActivityTracker.lastCursorPosition);
			}));
			
			//Fonction qui met fin à l'enregistrement
			setTimeout( function(){ 
				listener.map (function(e){ clearInterval(e); })
				console.log("enregistrement terminé");
				//userActivityTracker.downloadUserWay();
				//userActivityTracker.drawUserWay();
			}, time);
	}
};

 

Enregistrement

Ensuite, vous pourrez démarrer un enregistrement d'une certaine durée avec la ligne de code suivante :

userActivityTracker.initRecord(30000);

Ici, je demande d'enregistrer 30 secondes d'activité.

Une fois l'enregistrement terminé, si vous souhaitez admirer votre activité, il vous suffit d'utiliser la fonction suivante :

userActivityTracker.drawUserWay();

Vous pouvez télécharger l'activité de l'utilisateur avec la ligne de code ci-dessous :

userActivityTracker.downloadUserWay();

 

Toute l'activité de l'utilisateur est enregistré dans une variable "mouse" :

  • déplacement de la souris
  • clics
  • scroll
  • saisi de texte

Rejouer un enregistrement

Pour rejouer un enregistrement, il faut vous rendre sur la page où l'enregistrement a été réalisé.
Récupérer le contenu du fichier que vous aurez récupéré avec la fonction "downloadUserWay()"
et l'injecter dans la variable "mouse"

userActivityTracker.mouse = JSON.parse('  Contenu du fichier généré par la fonction downloadUserWay ');

Une fois que vous avez fait l'étape ci-dessus, il ne vous reste plus qu'à lancer le scénario avec la ligne de code suivante :

userActivityTracker.drawUserWay();

 

 

La vidéo

Comme d'habitude, n'hésitez pas à mettre un petit commentaire, vous abonner, ou bien mettre un petit  j'aime pour motiver le petit gars derrière le clavier ;)

Bon visionnage !!!

 

 

Conclusion

 

Pour les personnes un peu néophytes et tombées là par hasard, vous aurez pu avoir un petit avant-goût des outils qu'utilisent certaines grandes entreprises pour mieux vous cibler et vous vendre plus facilement de la crème pour les pieds ;)
Quant aux autres personnes, j'espère vous avoir donné ici des outils qui vous permettront d'améliorer la qualité de vos plateformes, et des idées d'utilisations plus "conventionnelles".

 

Partagez ce contenu

One comment

  • Bonjour Dyrk,

    Article très intéressant, qui peut même rendre un peu parano sur les bords.

    Qu’est-ce qui empêcherait une entité mal intentionnée d’exfiltrer des informations sensibles (type login/password), puisqu’il est possible de « keylogger » les actions utilisateur de la page web ? Comment l’utilisateur lambda pourrait s’en prévenir?

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *