Traduit de l'anglais à l'aide de l'IA
Veuillez noter que cet article a été traduit à l'aide de la technologie IA. Bien que nous travaillions à maintenir l'exactitude, certains détails peuvent ne pas refléter parfaitement le texte original. Si vous avez des doutes sur une information, veuillez vous référer à la version anglaise.
Vous serez assisté avec le masquage pendant votre processus d'implémentation de Contentsquare. Ce document détaille comment notre processus d'automasquage et de masquage fonctionne pour prévenir les fuites de données dans vos Replays de Session.
FAQ sur les données personnelles
Qu'est-ce que les données personnelles ?
Les données personnelles sont toute représentation d'informations qui permet d'inférer raisonnablement l'identité d'un individu auquel les informations s'appliquent par des moyens directs ou indirects.
Exemples de données personnelles :
- un nom et un prénom ;
- une adresse personnelle ;
- une adresse e-mail telle que name.surname@company.com ;
- un numéro de carte d'identité ;
- données de localisation (par exemple, la fonction de données de localisation sur un téléphone mobile) ;
- une adresse de protocole Internet (IP) ;
- un identifiant de cookie ;
- l'identifiant publicitaire de votre téléphone ;
- données détenues par un hôpital ou un médecin, qui pourraient être un symbole identifiant de manière unique une personne.
Que dit le RGPD sur la collecte de données personnelles ?
Les réglementations RGPD interdisent la collecte et le stockage de données personnelles, exigeant que vous masquiez ces données sur votre site comme condition préalable à l'utilisation de la fonctionnalité Replay de Session de Contentsquare.
Quelles données personnelles sont automatiquement filtrées par le tag CS ?
Le tag de suivi web CS est préemballé avec des fonctionnalités de sécurité clés pour empêcher la collecte d'informations personnelles :
- il ne capture pas les valeurs des champs de formulaire pré-remplis (input ou textarea)
- il ne collecte pas ce que l'utilisateur tape (l'événement keyUp est suivi, tandis que le keyCode lui-même n'est pas collecté)
- il ne stocke pas l'adresse IP (supprimée après traitement).
- il supprime toute chaîne formatée comme un e-mail qu'elle apparaisse dans le HTML, l'URL ou une variable personnalisée ou dynamique avant qu'elle ne soit envoyée à nos serveurs.
Vous pouvez trouver toute notre documentation technique sur la gestion des données personnelles ici.
Quelles données personnelles pourraient encore fuir malgré le filtrage automatique ?
Le Replay de Session de Contentsquare repose sur la capture et le téléchargement du contenu HTML complet de la page que l'utilisateur navigue, ce qui peut involontairement conduire à la collecte de données personnelles si les données personnelles apparaissent en dehors des paramètres de filtrage automatique décrits ci-dessus.
La situation la plus courante non couverte par les fonctionnalités de sécurité par défaut est les données personnelles qui apparaissent sous forme de texte sur la page (nœuds de texte). Bien que moins courantes, les données personnelles peuvent également apparaître à l'intérieur des valeurs des attributs de certains éléments. Chacun de ces scénarios est unique à chaque page et chaque site, et en tant que tel, ne permet pas un automasquage universel « taille unique ».
Qu'est-ce que le masquage des données ?
Le masquage aide à prévenir les fuites de données et garantit que toutes les données collectées dans la Relecture de Session de Contentsquare ne contiendront aucune donnée personnelle comme défini ci-dessus. Le masquage se produit généralement pendant le processus d'implémentation de Contentsquare décrit ci-dessous, voici les différentes méthodes pour le masquage automatique du contenu textuel et le masquage d'éléments spécifiques du site.
Masquage automatique du texte contenant des données personnelles
Contentsquare offre la capacité de masquer automatiquement le contenu textuel de n'importe quelle page de site en remplaçant tout le texte par la lettre "A" pour prévenir les fuites de données. Le masquage automatique n'a pas besoin d'être universel. Lors de votre implémentation de Contentsquare, il est recommandé de masquer automatiquement l'ensemble de votre site, puis de désactiver les pages ou éléments spécifiques que vous devez visualiser sans masquage.Vous pouvez également masquer automatiquement uniquement des pages spécifiques où des données personnelles sont connues pour exister (par exemple, le processus de paiement) tout en laissant d'autres pages non masquées.
Comment fonctionne le masquage automatique
Alors que la Relecture de Session collecte :
- Le contenu textuel est masqué, chaque caractère individuel est remplacé par "AAA".
- Les caractères dans les champs de saisie et les champs de mot de passe sont remplacés par "•".
- Chaque caractère de champ numérique est remplacé par "0".
- Les espaces sont conservés.
- Les images et les ressources statiques sont conservées.
- La plupart des valeurs des attributs HTML sont vidées, sauf "id", "class", "style", "src", "srcset", "href", "rel" et "type".
Avant le masquage automatique | Après le masquage automatique |
Comment activer le masquage automatique
Masquage automatique spécifique à la page (liste noire)
- Si vous souhaitez activer le masquage automatique pour une seule page ou un groupe de pages uniquement, assurez-vous de lister les URL spécifiques que vous souhaitez masquer automatiquement.
Masquage automatique sur l'ensemble du site avec exceptions de pages (liste blanche)
- Si vous souhaitez activer le masquage automatique sur l'ensemble de votre site web et exclure uniquement une ou un groupe de pages, assurez-vous de lister les URL que vous souhaitez démasquer.
Comment mettre en liste blanche les aria-labels
Si vous souhaitez voir les aria-labels dans la Relecture de session, vous devrez d'abord mettre en liste blanche les Attributs HTML dans la Console.
Cela se trouve dans la section "Collecte de données" pour la Relecture de session sous le champ "Attribut HTML".
Activer ou désactiver le masquage automatique sur des pages spécifiques
- Définir des regex (contactez votre CSM si vous avez besoin d'aide avec cette méthode)
- Définir des opérateurs (vous pouvez utiliser cette méthode dans l'onglet Automasking de la Console - contactez votre CSM si vous avez besoin d'aide avec cette méthode)
Utiliser des regex pour spécifier les pages masquées automatiquement
- Définir la regex pour les URL à démasquer.
- Allez dans Paramètres '⚙️ ' > Console.
- Allez dans l'onglet Modules & Fonctionnalités .
- Sur la ligne Relecture de session, cliquez sur Collecter.
- Activez le masquage automatique de la session (s'il n'est pas déjà activé).
- Sélectionnez l'option Masquer toutes les pages sauf .
- Sélectionnez l'onglet RegEx et cliquez sur Appliquer.
- Cliquez sur Nouvelle règle et créez votre RegEx.
- Testez et enregistrez votre RegEx.
Optionnel : Si ce n'est pas activé par défaut, vous pouvez sélectionner l'option Ignorer la sensibilité à la casse .
Utiliser des opérateurs pour spécifier les pages automasquées
- Allez à Paramètres '⚙️ ' > 'Console'.
- Allez à l'onglet 'Automasquage' .
- Activez 'Session automasquage' (si ce n'est pas déjà sélectionné).
- Sélectionnez soit l'option 'Automasquer toutes les pages sauf' ou 'Désautomasquer toutes les pages sauf' .
- Sélectionnez l'onglet 'Opérateurs' et cliquez sur 'Appliquer'.
- Cliquez sur 'Nouvelle règle'.
- Définissez votre liste de règles en définissant des opérateurs.
Exclure des sections spécifiques de l'automasquage
Lors de l'utilisation de l'automasquage, vous pouvez également choisir d'exclure des sections/éléments spécifiques de certaines pages de l'automasquage.
Contentsquare propose deux méthodes pour y parvenir :
1. Ajouter l'attribut “data-cs-capture” à l'élément parent de la section de page en question. L'attribut data-cs-capture doit être ajouté comme dans l'exemple ci-dessous.
<div class="product"data-cs-capture>
<h2> Titre qui ne doit pas être masqué </h2>
<div> Contenu qui ne doit pas être masqué </div>
</div>
2. Utiliser une commande javascript
Chaque élément répertorié doit être identifié par son sélecteur CSS, puis ajouté à la setCapturedElementsSelector commande.
Par exemple, si le HTML que vous souhaitez désautomasquer ressemble à ceci :
<div class="product" id="captureMe">
<h2> Titre qui ne doit pas être masqué </h2>
<div> Contenu qui ne doit pas être masqué </div>
</div>
Le code suivant va le démasquer (l'exemple ci-dessous n'utilise qu'un seul sélecteur CSS, mais vous pouvez passer autant de sélecteurs CSS séparés par des virgules que nécessaire) :
window._uxa = window._uxa|| []; window._uxa.push(["setCapturedElementsSelector", ".capture-me, #captureMe"]);
⚠️ Cette commande doit être exécutée AVANT le chargement de la balise de suivi elle-même et peut être ajoutée à la balise Contentsquare en tant que code personnalisé si vous utilisez une balise HTML/JS personnalisée dans votre gestionnaire de balises, ou en tant que conteneur HTML/JS personnalisé séparé qui doit être invoqué AVANT la balise principale Contentsquare.
Masquer des éléments spécifiques du site contenant des données personnelles
En plus d'utiliser l'automasking (avec ou sans démasquage sélectif de sections spécifiques ou de pages entières), Contentsquare propose un moyen de masquer les données personnelles qui ne nécessite pas d'automasking, qui fonctionne de manière similaire à la méthode de démasquage sélectif décrite ci-dessus, mais supprime tout le texte et les nœuds HTML contenus dans l'élément ciblé(s), tout en laissant tout le reste non masqué.
Commencer avec le masquage d'éléments
1. Demandez aux développeurs de votre équipe de vous aider à décider quelle méthode de masquage fonctionne le mieux pour votre site et de compléter le processus technique de masquage décrit dans cet article.
2. Parcourez chaque page qui est suivie par la balise de suivi principale CS, et identifiez et listez chaque élément qui pourrait contenir des données personnelles.
3. Sélectionnez l'une des deux méthodes de masquage d'éléments :
-
Implémentez une seule ligne de code qui appelle tous les éléments précédemment étiquetés à des fins de masquage et supprime toute donnée personnelle de vos replays de session.
- Recommandé pour les sites où des éléments individuels ont déjà été étiquetés pour masquer des données personnelles avec un autre fournisseur, car la ligne unique peut facilement appeler toutes les balises existantes.
-
Étiquetez individuellement chaque élément contenant des données personnelles avec un attribut spécifique de données supprimera également les données personnelles de vos replays.
- Recommandé pour les sites qui n'ont jamais étiqueté d'éléments contenant des données personnelles.
Comment activer le masquage d'éléments
Utilisation de la méthode de code en une seule ligne
Voici la ligne de commande que votre développeur devra exécuter avant la balise de suivi principale CS.
window._uxa = window._uxa |||[];
window._uxa.push (['setPIISelectors', {PII Object});
Exemple :
Voici un exemple de la façon dont la ligne de commande fonctionnera pour appeler tous les éléments précédemment étiquetés dans le contexte du code d'un site.
- Vous pouvez voir que les éléments étiquetés pour le masquage sont appelés (par la ligne de commande indiquée ci-dessus) en utilisant ses sélecteurs CSS, pour supprimer les attributs définis (données personnelles) de l'élément.
PIISelectors: [".css-selector, #css-selector"], // Éléments DOM à masquer
Attributes: [
{
selector: "select#month option, select#year option", // Sélecteur CSS
attrName: 'id' // Nom de l'attribut à masquer
},
{
selector: ".link-page-7", // Sélecteurs CSS
attrName: ['href', 'name' ] // Tableau des noms d'attributs à masquer
}
]
Note : Cette ligne de code masquera à la fois le HTML initial et tout changement dynamique qui peut être capturé par Change Monitor et peut être combiné avec la méthode de masquage automatique de texte de Session Replay.
Utilisation de la méthode d'étiquetage des éléments
Pour cette méthode, vous allez étiqueter chaque élément individuellement, en le marquant directement dans le balisage DOM de votre code source à l'aide de l'attribut de données spécifique : data-cs-mask, qui le supprimera de vos replays de session.
Exemple :
Balisage DOM
<div class="name" data-cs-mask>
John Doe
<a href= "logout.html">Déconnexion</a>
</div>
Ce que Session Replay collectera
<div class="name" data-cs-mask></div>
Note : Pour utiliser cette méthode, vous / votre équipe de développement aurez besoin de la capacité de modifier le DOM de votre site.
Méthode d'étiquetage :
Type d'attribut DOM | Attribut de données |
Valeur d'attribut DOM | data-cs-mask |
La valeur peut-elle être modifiée | non |
Qu'est-ce qui est supprimé |
innerHTML : le contenu textuel + tous les nœuds à l'intérieur de l'élément marqué seront supprimés du HTML. Événements sur le HTML supprimé — Événements (clic, survol, etc.) seront toujours collectés et envoyés à nos serveurs même s'ils ciblent des éléments HTML supprimés. Ils seront visibles dans l'application utilisant un arrière-plan en direct. |
Quand est-ce supprimé | Avant d'envoyer les collections aux serveurs |
Exemple :
Voici un exemple de ce à quoi ressemblerait votre Session Replay si l'automasking pour le texte est activé (‘aaaaa’ comme décrit ci-dessus) en même temps que le processus de masquage des éléments (comme décrit ci-dessous). Les éléments masqués apparaîtront comme des ‘Zones cachées’ grises.