Vous pouvez assainir ce qu’OpenReplay capture à un niveau global et/ou granulaire. Toute donnée masquée ou ignorée ne sera pas capturée à la source. Autrement dit, ces données ne quitteront jamais le navigateur de l’utilisateur.

Les données peuvent être assainies au niveau du tracker, lors de la configuration d’OpenReplay.

1. Cliquez sur le Tracking Code de votre projet sous « Preferences > Projects ».
2. Les options d’enregistrement des données devraient apparaître juste avant l’extrait de code :

• Inputs : Pour ignorer, masquer ou enregistrer toutes les valeurs saisies par vos utilisateurs.
• Do not record any numeric text : Pour ignorer les valeurs numériques contenues dans les éléments de texte.
• Do not record email addresses : Par défaut, toutes les adresses e-mail contenues dans les éléments de texte sont masquées et n’apparaîtront pas dans les rejeux. Vous pouvez désactiver cela en décochant la case.

3. La modification des options d’enregistrement des données a un impact sur l’extrait de code. Assurez-vous de copier/coller le script mis à jour dans votre application web.

Il existe un ensemble d’options liées à la confidentialité que vous pouvez passer au constructeur :

• obscureTextEmails?: boolean Masque les e-mails dans les éléments de texte. Les e-mails seront convertis en une chaîne aléatoire d’astérisques. Par défaut : true.
• obscureTextNumbers?: boolean Masque les nombres dans les éléments de texte. Les nombres seront convertis en une chaîne aléatoire d’astérisques. Par défaut : false.
• obscureInputEmails?: boolean Masque les e-mails dans les champs de saisie. Les valeurs d’e-mail seront converties en une chaîne aléatoire d’astérisques. Par défaut : true.
• obscureInputNumbers?: boolean Masque les nombres dans les champs de saisie. Les valeurs numériques seront converties en une chaîne aléatoire d’astérisques. Par défaut : false.
• obscureInputDates?: boolean Masque les dates dans les champs de saisie. Les valeurs de date seront converties en une chaîne aléatoire d’astérisques. Par défaut : false.
• defaultInputMode?: 0 | 1 | 2 Mode de capture par défaut pour les valeurs saisies. Respectivement : brut, masqué ou ignoré. Par défaut : 1 (masqué).

Le texte, les e-mails et les nombres assainis sont masqués ou supprimés avant l’envoi des données aux serveurs d’OpenReplay. Par conséquent, les modifications appliquées aux options ci-dessus ne peuvent pas être rétroactives et ne s’appliqueront qu’aux données nouvellement collectées.

Vous pouvez également assainir vos données au niveau du code pour une meilleure granularité. Cela est utile pour masquer ou ignorer des éléments du DOM et des champs de saisie.

• data-openreplay-obscured pour masquer le contenu textuel des balises <input>, <img> et d’autres éléments HTML (par exemple <div>) à l’exception de <svg> et <canvas>.

<!--Obscuring input fields-->
<form action="/action_page.php">
  Name: <input type="text" name="fname" data-openreplay-obscured><br>
  <input type="submit" value="Submit">
</form>
<!--Obscuring a div element-->
<div style="background-color:lightblue" data-openreplay-obscured>
  <h3>This is a sensitive information</h3>
  <p>This is an important paragraph</p>
  <img src="important_image.jpg">
</div>

• data-openreplay-hidden pour expurger le contenu des balises <input>, <img>, <svg> et d’autres éléments HTML (par exemple <div>) à l’exception de <canvas>. Le contenu de l’élément (y compris ses composants enfants) est supprimé, mais ses props et arguments sont conservés, comme dans cet exemple :

<div style="background-color:lightblue" data-openreplay-hidden>
  <div>This is a sensitive information</div>
  <svg>An important chart</svg>
</div>

Cela donnera le DOM suivant enregistré par le tracker :

<div style="background-color:lightblue" data-openreplay-hidden>
</div>

• La fonction domSanitizer: (node: Element) => SanitizeLevel évite d’avoir à instrumenter chaque composant HTML qui doit être assaini. SanitizeLevel peut être Plain (0), Obscured (1) ou Hidden (2). Cette fonction est passée au constructeur du tracker. Voici un exemple d’expurgation de tous les éléments HTML possédant un nom de classe CSS spécifique :

// Import SanitizeLevel enum
import Tracker, { SanitizeLevel } from "@openreplay/tracker";

const tracker = new Tracker({
  projectKey: PROJECT_KEY,
  domSanitizer: (node: Element) => {
    const elementClassNames = node.classList

    if (elementClassNames.contains('to_be_redacted_class')) {
      return SanitizeLevel.Hidden
    }

    if (node.id === 'sensitiveData') {
      return SanitizeLevel.Obscured
    }

    return SanitizeLevel.Plain
  }
})
tracker.start()

Remarque : Tous les éléments assainis sont masqués/expurgés au niveau de la source (tracker) afin que les données sensibles n’atteignent jamais l’instance OpenReplay.

Vous pouvez utiliser le SDK OpenReplay pour assainir les données réseau et l’état de l’application.

La capture des requêtes/réponses peut consigner des informations hautement sensibles ou privées que votre application pourrait envoyer/recevoir. Assurez-vous d’expurger correctement vos données réseau.

Utilisez l’option sanitizer pour expurger les données sensibles des requêtes/réponses Fetch/XHR. Consultez les options réseau pour plus de détails.

Consultez également ce tutoriel étape par étape sur la façon de capturer et assainir les requêtes réseau.

Pour assainir les données GraphQL, vous devez cloner les variables clés et les résultats de l’opération avant d’appeler le tracker. Découvrez comment assainir les données enregistrées dans GraphQL pour plus de détails.

Nettoyez les données sensibles de votre magasin d’état frontend à l’aide du SDK OpenReplay.

Utilisez les options actionFilter, actionTransformer et stateTransformer pour expurger les actions et sous-arbres sensibles de votre magasin. Consultez la documentation du plugin redux pour plus de détails.

Utilisez les options filter, transformer et mutationTransformer pour expurger les mutations et sous-arbres sensibles de votre magasin. Consultez la documentation du plugin vuex pour plus de détails.

Utilisez les options filter, transformer et mutationTransformer pour expurger les mutations et sous-arbres sensibles de votre magasin. Consultez la documentation du plugin zustand pour plus de détails.

Utilisez les options filter, transformer et mutationTransformer pour expurger les mutations et sous-arbres sensibles de votre magasin. Consultez la documentation du plugin pinia pour plus de détails.

Utilisez les options actionFilter, actionTransformer et stateTransformer pour expurger les actions et sous-arbres sensibles de votre magasin. Consultez la documentation du plugin ngrx pour plus de détails.

Nous améliorons constamment nos fonctionnalités liées à la confidentialité, alors faites-nous savoir si vous avez besoin de quelque chose que nous ne prenons pas encore en charge. Si vous rencontrez des difficultés pour assainir vos données, contactez-nous sur notre Slack ou consultez notre Forum et obtenez de l’aide auprès de notre communauté.