Traitement des données personnelles

Le tag Contentsquare intègre un masquage des données personnelles avant que les données ne quittent le navigateur, avec des options configurables pour le Session Replay, les URLs, les erreurs d'API, les éléments cliqués et les identifiants utilisateur.

Masquage automatique

Le tag détecte et remplace automatiquement certains types de données personnelles avant que toute information ne quitte le navigateur. Cette opération s'effectue sans aucune configuration.

Les types de données personnelles détectés dépendent du canal de données.

Ce qui est détecté

Type de données personnelles	Jeton de remplacement	Mode de détection
Adresses e-mail	`CS_ANONYMIZED_EMAIL`	Correspondance de motif pour les adresses e-mail, y compris les formes encodées en URL (`%40`, `%2540`)
Tokens JWT	`CS_ANONYMIZED_JWT`	Correspondance structurelle sur le format JWT standard (`eyXxx.eyXxx.Xxx` — trois segments encodés en base64)
Valeurs de tokens OAuth	`CS_ANONYMIZED_TOKEN`	Paramètres de requête nommés `id_token`, `access_token`, `refresh_token` ou `auth_token`, quel que soit le format
Numéros de carte bancaire	`CS_ANONYMIZED_PII`	Motifs de numéros Visa/Mastercard à 16 chiffres, validés par l'algorithme de Luhn

Où chaque type est masqué

Chaque type de données personnelles n'est masqué que dans des canaux de données spécifiques. Le tableau suivant présente la couverture complète.

Canal de données	E-mails	Tokens JWT	Tokens OAuth	Cartes bancaires
URLs (URL de la page, referrer)	✅	✅	✅	—
Contenu HTML / DOM (Session Replay)	✅	—	—	✅
Messages d'erreur JavaScript	✅	—	—	—
Noms de fichier d'erreur JavaScript	✅	✅	✅	—
URLs d'erreur d'API	✅	✅	✅	—
Messages d'erreur personnalisée	✅	—	—	—
Messages d'erreur personnalisée (URLs intégrées)	✅	✅	✅	—
Custom Variables (nom et valeur)	✅	—	—	—
Dynamic Variables (nom et valeur chaîne)	✅	—	—	—
Transactions e-commerce (identifiant transaction)	✅	—	—	—

De plus, les protections suivantes propres à chaque type de données sont toujours appliquées :

Erreurs JavaScript : les valeurs de champs de formulaire (motifs comme value="...") sont supprimées.
Erreurs personnalisées : les numéros de téléphone et les motifs de noms (par exemple firstName=, lastName=) sont également supprimés.
Erreurs d'API : la chaîne de requête est entièrement retirée de l'URL collectée, en plus du masquage indiqué ci-dessus.
Texte des éléments cliqués : si le texte d'un bouton ou d'un lien cliqué contient une adresse e-mail ou un numéro de carte bancaire, le texte entier est supprimé et n'est pas collecté.

Données envoyées telles quelles (sans masquage automatique)

Les données suivantes sont transmises sans masquage automatique. Supprimez toute donnée personnelle de ces canaux avant de les envoyer à Contentsquare.

Canal de données	Détails
Événements de page	Le nom de l'événement est envoyé tel quel
Événements externes	Le nom de l'événement est envoyé tel quel
Propriétés utilisateur	Les clés et les valeurs sont envoyées telles quelles (tronquées à 255 caractères uniquement)
Valeurs entières de Dynamic Variables	Les valeurs entières ne font pas l'objet d'un traitement d'anonymisation
Données personnelles non-email dans les chaînes Custom/Dynamic Variables	Les numéros de carte bancaire, numéros de téléphone, tokens JWT et autres données sensibles (autres que les e-mails) ne sont pas détectés dans les valeurs de Custom ou Dynamic Variables

Données personnelles et HTML (Session Replay)

Une session sera enregistrée pour le Session Replay si :

La fonctionnalité Session Replay est activée pour votre compte.
Le seuil défini par le paramètre Session Replay Collection Rate n'est pas dépassé.

Pour que le contenu HTML soit envoyé, toutes les conditions suivantes doivent être vérifiées :

L'utilisateur n'a pas opt-out.
La session est trackée.
Le navigateur est compatible.
La session est marquée comme "Enregistrée par le Session Replay", via le cookie _cs_s

Options d'enregistrement du Session Replay

Lorsque le Session Replay est activé et que la session utilisateur est enregistrée, le contenu HTML de la page est envoyé après chaque pageview (naturelle ou artificielle) et chaque mise à jour du DOM (seuls les éléments mis à jour sont envoyés).

Le paramètre Page Masking contrôle la quantité de contenu collectée sur la page.

Le Masquage de Page est désactivé

Les protections suivantes s'appliquent quel que soit l'état du Masquage de Page : Contentsquare ne collecte jamais le texte saisi par les utilisateurs dans les champs <input> ou <textarea>.

La valeur des éléments <input> de type text, email, password, search, tel, url et les éléments <input> sans attribut type sont remplacés par des points avant l'envoi du HTML.
Tous les chiffres des éléments <input> avec un type number sont remplacés par 0.
Le contenu des éléments <textarea> est remplacé par des points avant l'envoi du HTML.
Le contenu des éléments <script> est supprimé.
À part les exceptions ci-dessus, tout le contenu HTML est envoyé, l'élément <head> compris.
Le contenu de tous les éléments marqués avec le data attribute data-cs-mask est supprimé (voir la section Tagger les éléments du DOM).

Le Masquage de Page est activé

Les protections suivantes s'appliquent quel que soit l'état du Masquage de Page : Contentsquare ne collecte jamais le texte saisi par les utilisateurs dans les champs <input> ou <textarea>.

La valeur des éléments <input> de type text, email, password, search, tel, url et les éléments <input> sans attribut type sont remplacés par des points avant l'envoi du HTML.
Tous les chiffres des éléments <input> avec un type number sont remplacés par 0.
Le contenu des éléments <textarea> est remplacé par des points avant l'envoi du HTML.
Le contenu des éléments <script> est supprimé.
Le contenu de tous les éléments marqués avec le data attribute data-cs-mask est supprimé (voir la section Tagger les éléments du DOM).
Le contenu de tous les éléments marqués avec le data attribute data-cs-capture est collecté et affiché sauf s'il s'agit d'un élément <input> ou <textarea>.
Tous les caractères du texte inclus dans les éléments envoyés sont remplacés par "A".
Les attributs non liés au layout sont supprimés. Seuls id, class, style, src, srcset, href, rel et type sont conservés.

Masquer le contenu des pages d'après leur URL

Lorsque votre site affiche des données personnelles sur un ensemble de pages défini, vous pouvez décider d'appliquer le Masquage de Page sur ces pages seulement, afin de ne pas avoir à masquer ces données sur l'ensemble du site. Ces options doivent être configurées par votre Success Manager.

Deux options sont disponibles :

Anonymiser toutes les pages sauf... : Toutes les pages sont masquées à l'exception de celles correspondant à une expression régulière définie avec votre Success Manager.
Désanonymiser toutes les pages sauf... : Tout le contenu des pages collectées est affiché en clair à l'exception des pages correspondant à une expression régulière définie avec votre Success Manager.

Bloquer l'enregistrement de certaines pages (Session Replay)

Utilisez la commande excludeURLforReplay pour bloquer l'enregistrement de certaines pages d'après leur URL. Cette commande est utile dans plusieurs cas :

Des données personnelles ont été exposées.
Vous souhaitez bloquer l'enregistrement de parties complètes de votre site.
Certains enregistrements pour le Session Replay causent des problèmes de performance (lorsque la page contient un nombre important d'images ou de vidéos, par exemple) — vous pouvez bloquer leur enregistrement jusqu'à la résolution du problème.

window._uxa = window._uxa || [];
window._uxa.push(["excludeURLforReplay", "URL_REGEX"]);

Cette commande s'applique à la pageview courante et doit être exécutée à chaque fois que le tag est chargé.

Cette commande ne bloque pas les pageviews pour les pages concernées — elle bloque uniquement l'enregistrement pour le Session Replay.

Supprimer du contenu ou des données personnelles du HTML enregistré

Deux méthodes sont à votre disposition :

Utiliser le Contentsquare Personal Data Selector
Tagger les éléments du DOM

Personal Data Selector

Chaque élément du DOM à masquer est identifié par un sélecteur CSS. Ces sélecteurs sont envoyés à l'API Contentsquare sous la forme d'un objet JavaScript. Le contenu de ces éléments sera supprimé de l'enregistrement.

Tag Configurator Template: Element Masking Utilisez le Tag Configurator pour implémenter le Masquage d'Éléments via une interface visuelle.

L'objet contenant les sélecteurs CSS pour le texte et les attributs doit être envoyé à l'API Contentsquare comme dans l'exemple ci-dessous, avant le chargement du Tag principal :

window._uxa = window._uxa || [];
window._uxa.push(['setPIISelectors', PIIObject]);

La structure du PIIObject est la suivante :

PIISelectors : Liste des sélecteurs CSS séparés par des virgules, qui permet aux éléments correspondants du DOM d'être masqués par le tag.
Attributes : Cette clé permet de supprimer les attributs définis sur les éléments du DOM qui correspondent aux sélecteurs CSS. Vous pouvez utiliser un tableau de noms d'attributs comme dans l'exemple ci-dessus.

L'utilisation des deux clés PII Selectors et Attributes n'est pas obligatoire : vous pouvez utiliser des sélecteurs d'éléments complets, des sélecteurs d'attributs spécifiques, ou les deux, au sein du même objet :

{
  PIISelectors: [".css-selector, selector"], // Éléments du DOM à masquer
  Attributes: [
      {
          selector: "select#month option, select#year option", // Sélecteurs CSS
          attrName: 'id' // Nom de l'attribut à masquer
      },
      {
          selector: ".link-page-7", // Sélecteurs CSS
          attrName: ['href','name'] // Noms des attributs à masquer en tableau
      }
  ]
};

Tagger les éléments du DOM

Pour exclure du contenu HTML de la page à enregistrer, ajoutez l'attribut data-cs-mask sur les éléments concernés :

Content before
<p data-cs-mask>emailaddress@sentitivedata.com</p>
Content after

Leur contenu est supprimé dans le navigateur avant d'être envoyé vers Contentsquare :

Content before
<p data-cs-mask>emailaddress@sentitivedata.com</p>
Content after

Vous pouvez également ajouter l'attribut data-cs-mask avec du JavaScript à condition de le faire avant l'envoi d'une pageview.

Événements sur des éléments HTML supprimés — Les événements (click, hover, etc.) seront toujours collectés et envoyés vers les serveurs Contentsquare même si les éléments visés ont été supprimés. Ils seront visibles dans l'application en utilisant Live Resources (tel que nommé sur la plateforme).

Afficher du contenu dans une page HTML intégralement masquée

Deux méthodes sont à votre disposition :

Utiliser le Contentsquare Personal Data Selector
Tagger les éléments du DOM

Personal Data Selector

Chaque élément du DOM à afficher est identifié par un sélecteur CSS. Ces sélecteurs sont envoyés à l'API Contentsquare sous la forme d'un objet JavaScript. Le contenu de ces éléments sera affiché dans le Session Replay.

Tag Configurator Template: Element Unmasking Utilisez le Tag Configurator pour implémenter le Démasquage d'Éléments via une interface visuelle.

La chaîne de caractères contenant les sélecteurs CSS séparés par des virgules, pour le texte et les attributs, doit être envoyée à l'API Contentsquare, avant le chargement du Tag principal, comme dans l'exemple ci-dessous :

window._uxa = window._uxa || [];
window._uxa.push(["setCapturedElementsSelector", "#capture-me, .show-me"]);

Tagger les éléments du DOM

Pour afficher un élément HTML dans une page intégralement masquée, ajoutez l'attribut data-cs-capture sur les éléments HTML :

Sensitive Content before
<p data-cs-capture>some piece of text that is not sensitive</p>
Sensitive Content after

Le contenu de cet élément est capturé tel quel :

AAAA AAAA AA
<p data-cs-capture>some piece of text that is not sensitive</p>
AAA AAA AA

Vous pouvez également ajouter cet attribut avec du JavaScript à condition de le faire avant l'envoi d'une pageview.

Tester le Session Replay

Prérequis

Avoir installé Google Chrome.
Télécharger l'extension Chrome Contentsquare Tracking Setup Assistant ↗.
Masquer des éléments du replay en utilisant les sélecteurs CSS ou l'attribut data-cs-mask — les éléments <input> ne sont pas capturés par défaut, à l'exception des listes déroulantes, qui doivent être masquées.
Activer le masquage complet de la session.
Si vous avez déjà fourni une liste de vos adresses IP internes/de bureau pour qu'elles soient ajoutées à la liste d'exclusion, informez votre Success Manager Contentsquare afin de suspendre temporairement cette liste d'exclusion. Sinon, les sessions de test depuis ces IPs ne seront pas collectées par Contentsquare.

Durant les tests

Démarrez un parcours sur votre site web, comprenant les éléments qui seront masqués.
Dans l'extension Contentsquare Tracking Setup Assistant, sélectionnez Turn off automasking afin que le masquage 'AAA' ne s'applique pas à votre session locale.
Sélectionnez Collected for Session Replay pour activer l'enregistrement du replay pour votre session.

Un bouton Play apparaît à côté de l'URL de la page. Cliquez sur l'icône et conservez l'onglet ouvert. Le replay généré sera disponible à ce lien 30 minutes après la fin de vos tests.
Sélectionnez Trigger testing pageEvent pour créer l'événement de page SR Testing identifiant votre session courante.
Assurez-vous que les éléments à masquer sont visibles tout au long de votre parcours de test. Si nécessaire, saisissez des informations personnelles fictives. Vous pourrez vérifier qu'elles ont bien été masquées dans le replay.
Lorsque vous avez terminé le parcours, fermez l'onglet de session ou supprimez vos cookies.
Disponibilité du replay
Le replay est disponible 30 minutes après la fin de vos tests :
- Au lien généré et accessible via le bouton Play.
- Sur la plateforme Contentsquare ↗, en filtrant les replays contenant l'événement de page SR Testing.
Regardez le replay en portant attention à tous les endroits où des données personnelles pourraient apparaître :

❌ Si des données personnelles sont visibles, mettez à jour votre masquage et recommencez les tests.
✅ Si aucune donnée personnelle n'est présente, votre implémentation est conforme en matière de confidentialité.

Que faire ensuite ?

Si vous êtes dans la phase d'implémentation initiale de votre projet, informez votre Success Manager des résultats afin qu'il/elle puisse les vérifier, puis désactiver le Masquage de Page pour vous permettre d'utiliser le Session Replay complet.

Si vous avez passé la phase d'implémentation et que vos tests sont réussis, vous pouvez mettre à jour les règles de Masquage de Page directement depuis la Console Contentsquare si vous êtes Admin, depuis l'onglet Masquage de Page.

Pour plus d'informations, consultez l'article du centre d'aide ↗.

Suivre les requêtes Session Replay

Le contenu HTML est envoyé via une requête à l'un des endpoints ci-dessous, selon la région où vos données sont stockées :

https://k.aeu1.contentsquare.net/{apiVersion}/recording
https://k.aus1.contentsquare.net/{apiVersion}/recording
https://k.eu1.az.contentsquare.net/{apiVersion}/recording
https://k.us1.az.contentsquare.net/{apiVersion}/recording
https://k.ba.contentsquare.net/{apiVersion}/recording
https://k.bf.contentsquare.net/{apiVersion}/recording
https://k.aa.contentsquare.net/{apiVersion}/recording
https://k.af.contentsquare.net/{apiVersion}/recording

La requête est envoyée lorsque la 2e valeur du cookie _cs_s (état de l'enregistrement du replay) est 3 (enregistré) ou 5 (enregistré après un événement spécifique) ou lorsque ETR est activé sur le projet. Cette requête contient l'intégralité du DOM.

Le tag sérialise les éléments image contenant des données encodées en base64. Pour masquer ces images dans les replays, utilisez la commande setPIISelectors :

const PIIobject = {
  PIISelectors: ["[src^='data:image']"]
};

window._uxa.push(['setPIISelectors', PIIobject]);

Utilisez le cookie _cs_debug pour inspecter les données décodées :

Les sessions enregistrées avec le flag compressionDisabled sont exclues du pipeline Session Replay.

Depuis la console de votre navigateur, exécutez ce script pour créer le cookie :
```
document.cookie = "_cs_debug=compressionDisabled"
```
Rechargez la page.
Dans l'onglet Réseau, cherchez https://k- contentsquare, sélectionnez la requête, et vérifiez le payload.

Bloquer des données personnelles dans les URLs

Des données personnelles peuvent apparaître ailleurs que dans le contenu HTML.

Pour une page donnée, vous devez également masquer les données personnelles qui peuvent se trouver dans :

Le path de la page courante
Les paramètres de l'URL
Le referrer de la prochaine page visitée

Des données non masquées peuvent être exposées dans le module Error Analysis.

Supprimer des données personnelles dans l'URL de la page courante

Pour supprimer des données personnelles dans l'URL de la page courante, réécrivez l'URL du pageview avant que le Tag ne la collecte, en utilisant la commande setPath.

La commande setPath prend en paramètre le nouveau chemin exact à collecter en tant qu'URL.

window._uxa = window._uxa || [];
window._uxa.push([
  'setPath', <NEW_PATH_TO_COLLECT>
]);

Exécutez cette commande sur toutes les pages dont l'URL contient des données personnelles, avant le chargement du Tag principal. Seul le chemin (path) doit être configuré, pas l'URL complète.

Exemple

window._uxa = window._uxa || [];
window._uxa.push(["setPath", "/users/CS_ANONYMIZED_USER_ID"]);

URL avant masking	URL après masking
`https://www.contentsquare.com/users/jon.snow`	`https://www.contentsquare.com/users/CS_ANONYMIZED_USER_ID`
`https://www.contentsquare.com/cartpage/users/jon.snow`	`https://www.contentsquare.com/users/CS_ANONYMIZED_USER_ID`

Supprimer des données personnelles dans les paramètres d'URL

Lorsque des données personnelles apparaissent dans les paramètres de requête d'une URL, utilisez la commande setQuery pour remplacer la query string dans l'URL par une version masquée.

window._uxa = window._uxa || [];
window._uxa.push([
  'setQuery',
  <ANONIMYZED_QUERY_STRING>
]);

La commande setQuery prend en paramètre la nouvelle query string exacte à afficher dans l'URL. Cette commande spécifie au Tag de remplacer tout ce qui suit le caractère ? dans l'URL par des valeurs masquées.

Exécutez cette commande sur toutes les pages dont l'URL contient des données personnelles, avant le chargement du Tag principal. Seule la query string doit être configurée, pas l'URL complète.

Exemple

window._uxa = window._uxa || [];
window._uxa.push(["setQuery", "?user_id=CS_ANONYMIZED_USER_NAME&address=CS_ANONYMIZED_ADDRESS"]);

URL avant masking	URL après masking
`https://www.mysite.com/us/makeup/valentines-day/?user_id=jon.snow&address=castle.black`	`https://www.mysite.com/us/makeup/valentines-day/?user_id=CS_ANONYMIZED_USER_NAME&address=CS_ANONYMIZED_ADDRESS`
`https://www.mysite.com/us/makeup/valentines-day/?campaign=valentinesday_feb_2021&user_id=jon.snow&address=castle.black`	`https://www.mysite.com/us/makeup/valentines-day/?user_id=CS_ANONYMIZED_USER_NAME&address=CS_ANONYMIZED_ADDRESS`

Personnalisez le masking selon le type de paramètre à remplacer, afin que le résultat soit explicite :

CS_ANONYMIZED_USER_ID
CS_ANONYMIZED_EMAIL
CS_ANONYMIZED_ADDRESS

...et ainsi de suite.

Masquer les données personnelles dans le referrer

Même lorsqu'elles sont masquées dans les URLs et les paramètres de requête, les données personnelles se propagent dans la page suivante du parcours utilisateur via le referrer ↗ du navigateur. Pour ce cas d'usage, utilisez les commandes préfixées referrer: ci-dessous.

Dans l'URL

Prenons l'exemple de ce parcours :

L'utilisateur navigue de https://www.example.com/users/123456/products/ABCDEF vers https://www.example.com/.
Un pageview est envoyé sur https://www.example.com/.
La valeur du referrer dans le navigateur et dans la requête pageview est https://www.example.com/users/123456/products/ABCDEF.

Pour masquer les données personnelles dans l'URL du referrer, utilisez la commande referrer:maskUrl :

var referrers = [
  "https://www.example.com/users/:USER_ID/products/:PRODUCT_ID",
  "https://www.example.com/account/cancelOrder/:ORDER_ID",
  "https://www.example.com/order/:ORDER_ID/merge/:ORDER_ID",
];
window._uxa = window._uxa || [];
for (var i = 0; i < referrers.length; i++) {
  window._uxa.push(["referrer:maskUrl", referrers[i]]);
}

La valeur du referrer dans les requêtes pageview sera :

https://www.example.com/users/CS_ANONYMIZED_USER_ID/products/CS_ANONYMIZED_PRODUCT_ID
https://www.example.com/account/cancelOrder/CS_ANONYMIZED_ORDER_ID
https://www.example.com/order/CS_ANONYMIZED_ORDER_ID/merge/CS_ANONYMIZED_ORDER_ID

Dans les paramètres de la requête

Prenons l'exemple de ce parcours :

L'utilisateur navigue de https://www.example.com/confirmation?firstname=jon&lastname=snow vers https://www.example.com/.
Un pageview est envoyé sur https://www.example.com/.
La valeur du referrer dans le navigateur et dans la requête pageview est https://www.example.com/confirmation?firstname=jon&lastname=snow.

Pour masquer les données personnelles dans les paramètres de la requête du referrer, utilisez la commande referrer:removeQueryString :

window._uxa = window._uxa || [];
window._uxa.push(["referrer:removeQueryString"]);

La valeur du referrer dans la requête pageview pour la page https://www.example.com/ sera :

https://www.example.com/?

Supprimer des données personnelles dans les erreurs d'API

Utilisez la commande networkRequest:maskUrls pour réécrire l'URL avant que le Tag ne collecte l'URL de l'erreur d'API.

Tag Configurator Template: Network requests mask URLs Utilisez le Tag Configurator pour implémenter le masquage des URLs de requête réseau via une interface visuelle.

La commande reçoit en paramètre un ou plusieurs patterns de masking à appliquer aux URLs contenant des données personnelles. Ces patterns peuvent correspondre à l'URL complète de la page ou à une partie seulement.

window._uxa = window._uxa || [];
window._uxa.push([
  'networkRequest:maskUrls',
  <PATTERN>
]);

Les patterns incluent des fragments d'URL à masquer, passés comme des variables préfixées par :. Ces variables sont remplacées par CS_ANONYMIZED_{FRAGMENT} :

:user_id devient CS_ANONYMIZED_USER_ID
:address devient CS_ANONYMIZED_ADDRESS
:email devient CS_ANONYMIZED_EMAIL

Exécutez cette commande sur toutes les pages contenant des données personnelles et qui appellent l'API Contentsquare, avant le chargement du Tag principal.

Exemple

window._uxa.push([
  "networkRequest:maskUrls",
  ["order/:order_id/merge/:order_id", "order/:order_id/item", "cancelOrder/:order_id"]
]);

URL avant masking	URL après masking
`https://api.net/order/:order_id/merge/:order_id`	`https://api.net/order/CS_ANONYMIZED_ORDER_ID/merge/CS_ANONYMIZED_ORDER_ID`
`https://api.net/order/:order_id/item`	`https://api.net/order/CS_ANONYMIZED_ORDER_ID/item`
`https://www.api.nl/nl/ajax/nfs/account/cancelOrder/:order_id`	`https://www.api.nl/nl/ajax/nfs/account/cancelOrder/CS_ANONYMIZED_ORDER_ID`

Supprimer des données personnelles dans les éléments cliqués

Lorsque la collecte des éléments cliqués est activée et que la session utilisateur est enregistrée, le Tag collecte le contenu textuel des boutons et des liens cliqués dans le cadre des autres données d'analyse (voir /events request).

Le Masquage de Page est désactivé

L'élément cliqué est collecté à moins qu'il ne soit masqué via l'attribut data-cs-mask.

Le Masquage de Page est activé

L'élément cliqué n'est pas collecté à moins qu'il ne soit capturé via l'attribut data-cs-capture.

Vous pouvez aussi masquer des éléments précis sur la page. Ce masquage est prioritaire sur la configuration du Masquage de Page. Pour plus d'informations, voir la section Personal Data Selector.

Controlled Exposure

Le tag Contentsquare ne collecte pas le texte saisi dans les champs de type input ou textarea.

Si vous avez besoin d'afficher les données personnelles d'un utilisateur, telles que les adresses de livraison, les noms, les numéros de téléphone, les adresses e-mail, ou le texte saisi dans un champ de formulaire, utilisez le mode collecte et chiffrement.

Avec le mode collecte et chiffrement, vous pouvez collecter, stocker et afficher le texte d'un champ input, d'un champ textarea ou de tout autre élément d'une page qui est habituellement masqué par le tag, avant qu'il ne soit envoyé aux serveurs de Contentsquare.

Le chiffrement des données est incompatible avec le masquage d'éléments spécifiques via l'attribut data-cs-mask ou via le Personal Data Selector et l'API setPIISelectors.

Cela implique que :

Les attributs data-cs-mask et data-cs-encrypt ne doivent jamais être utilisés sur le même élément HTML.
L'attribut data-cs-mask ne doit pas être utilisé sur un élément conteneur qui viserait indirectement un autre élément à chiffrer.
Si vous avez déjà une méthode de masquage des données personnelles activée sur votre projet, vérifiez qu'aucun élément portant l'attribut data-cs-encrypt n'est ciblé par ces méthodes, en prenant en compte les règles d'héritage du DOM.
Si vous souhaitez masquer un élément par défaut mais être capable de le chiffrer et de l'exposer dans les Session Replays, vous devez uniquement avoir l'attribut data-cs-encrypt sur cet élément au niveau le plus granulaire, et non data-cs-mask.

Collecte et chiffrement des données personnelles du HTML collecté

Il existe deux méthodes pour collecter et chiffrer les données personnelles à partir du HTML collecté :

Utiliser le Contentsquare Encryption Selector
Tagger les éléments du DOM

Encryption Selector

Chaque élément du DOM à collecter et à chiffrer est identifié par son sélecteur CSS. Ces sélecteurs sont transmis à l'API par l'intermédiaire d'un objet JavaScript. Le contenu de l'élément identifié est alors chiffré et collecté pour les Session Replays.

L'objet suivant, qui contient des sélecteurs CSS pour le texte, doit être transmis à l'API comme suit, avant de déclencher le tag principal :

window._uxa = window._uxa || [];
window._uxa.push(["setEncryptionSelectors", "#cart, .total-items"]);

Tagger les éléments du DOM

L'attribut data-cs-encrypt peut être ajouté à un champ de saisie, à un champ textuel ou à tout autre élément. Au lieu d'être masqué, le texte présent dans l'élément tagué est chiffré, stocké et mis à disposition pour être exposé dans des conditions spécifiques.

Le processus de chiffrement s'effectue sur la propriété innerText de l'élément tagué. Il ne s'applique pas aux éléments imbriqués : le texte de l'élément imbriqué ne sera ni masqué ni chiffré. Veillez à ajouter l'attribut data-cs-encrypt sur les éléments les plus granulaires qui doivent être collectés.

<h2 class="welcoming">
  Welcome back
  <span class="user_name" data-cs-encrypt>John Doe</span>
</h2>

Vous pouvez également ajouter l'attribut data-cs-encrypt avec JavaScript, à condition de le faire avant l'envoi d'une pageview.

Chiffrement des données

Pour utiliser Controlled Exposure, obtenez une combinaison de clés de chiffrement :

Clé publique : utilisée par le Tracking Tag pour chiffrer les données.
Clé privée : utilisée par l'application pour le déchiffrement.

Comment générer la paire de clés

Option 1 : Avec un script Google Chrome

Copiez le script suivant :

function arrayBufferToString(buffer) {
  const byteArray = new Uint8Array(buffer);
  let byteString = "";
  for (let i = 0; i < byteArray.byteLength; i += 1) {
    byteString += String.fromCodePoint(byteArray[i]);
  }
  return byteString;
}

crypto.subtle
  .generateKey(
    {
      name: "RSA-OAEP",
      hash: "SHA-256",
      modulusLength: 4096,
      publicExponent: new Uint8Array([1, 0, 1]),
    },
    true,
    ["encrypt", "decrypt"],
  )
  .then((keysObject) => {
    crypto.subtle.exportKey("pkcs8", keysObject.privateKey).then((result) => {
      const privateKey = btoa(arrayBufferToString(result));
      console.log(`Private key: `, privateKey);
    });
    crypto.subtle.exportKey("spki", keysObject.publicKey).then((result) => {
      const publicKey = btoa(arrayBufferToString(result));
      console.log(`Public key: `, publicKey);
    });
  });

Collez le script dans la console Chrome.
Appuyez sur Entrée.

Option 2 : Avec OpenSSL ou OpenSSH

Sur Linux/Mac, vous pouvez utiliser OpenSSL :

openssl genpkey -out mykey.pem -algorithm RSA -pkeyopt rsa_keygen_bits:4096
openssl rsa -in mykey.pem -pubout > mykey.pub

Sur Windows vous devrez installer WSL ↗.

Comment ajouter une clé publique

Allez dans la Console Contentsquare > Choisissez votre compte > Choisissez votre projet > Allez dans l'onglet "Encryption management".
Sélectionnez "Store public key".
Collez votre clé publique.
Sélectionnez "Store key".

Démasquer le texte à l'écran dans Contentsquare

Sélectionnez l'icône de clé et choisissez "Unmask on-screen text".
Saisissez la clé privée et sélectionnez "decrypt" (tous les replays seront exposés).

User identifier

Avec la fonctionnalité User Identifier, vous pouvez rechercher des replays appartenant à des utilisateurs spécifiques grâce à un identifiant unique. Vous pouvez ainsi chercher et accéder à toutes les sessions associées à un utilisateur donné, par exemple john@gmail.com, sur la plage de dates sélectionnée. Cette fonctionnalité est particulièrement utile en cas de commentaires ou de plaintes d'utilisateurs.

L'identifiant utilisateur peut être toute valeur permettant d'identifier un utilisateur de façon unique : nom d'utilisateur, numéro de compte, adresse e-mail, numéro de téléphone, ID CRM ou ID de programme de fidélité. Il est immédiatement haché et encodé dans un format à sens unique avant d'être envoyé à Contentsquare.

Lorsque vous filtrez les Session Replays avec un User Identifier dans Contentsquare, le même algorithme de hachage est utilisé et les deux hashs sont comparés pour associer l'identifiant à ses replays.

Implémentation du User Identifier

Choisir le bon User Identifier : Optez pour un identifiant unique tel que l'adresse e-mail, le nom d'utilisateur ou le numéro de compte, accessible depuis le front-end.
Collecte des User Identifiers : Pour collecter le User Identifier, envoyez un événement de page via la commande trackPageEvent, avec le préfixe @user-identifier@ :
```
window._uxa = window._uxa || [];
window._uxa.push(["trackPageEvent", "@user-identifier@user_email"]);
```
Ou si vous tirez l'identifiant de votre data layer :
```
window._uxa = window._uxa || [];
window._uxa.push(["trackPageEvent", "@user-identifier@" + dataLayer.Name]);
```
La valeur du User Identifier est limitée à 100 caractères.