Comment masquer les données personnelles

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

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

1. Définir la regex pour les URL à démasquer.
2. Allez dans Paramètres '⚙️ ' > Console.
3. Allez dans l'onglet Modules & Fonctionnalités .
4. Sur la ligne Relecture de session, cliquez sur Collecter.
5. Activez le masquage automatique de la session (s'il n'est pas déjà activé).
6. Sélectionnez l'option Masquer toutes les pages sauf .
7. Sélectionnez l'onglet RegEx et cliquez sur Appliquer.
8. Cliquez sur Nouvelle règle et créez votre RegEx.
9. 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

1. Allez à  Paramètres '⚙️ ' > 'Console'.
2. Allez à l'onglet 'Automasquage' .
3. Activez 'Session automasquage' (si ce n'est pas déjà sélectionné).
4. Sélectionnez soit l'option 'Automasquer toutes les pages sauf' ou 'Désautomasquer toutes les pages sauf' .
5. Sélectionnez l'onglet 'Opérateurs' et cliquez sur 'Appliquer'.
6. Cliquez sur 'Nouvelle règle'.
7. 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
      }
   ]

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 : 

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.