Vous pouvez nettoyer ce qu’OpenReplay capture, à la fois à 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 nettoyées au niveau du tracker, lors de la configuration d’OpenReplay.

1. Cliquez sur le Tracking Code de votre projet dans ‘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 affecte l’extrait de code. Veillez à 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 adresses e-mail dans les éléments de texte. Les adresses e-mail seront converties en une chaîne aléatoire d’astérisques. Valeur 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. Valeur par défaut : false.
• obscureInputEmails?: boolean Masque les adresses e-mail dans les champs de saisie. Les valeurs d’e-mail seront converties en une chaîne aléatoire d’astérisques. Valeur par défaut : true.
• 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. Valeur par défaut : false.
• defaultInputMode?: 0 | 1 | 2 Mode de capture par défaut pour les valeurs saisies. Respectivement : brut, masqué ou ignoré. Valeur par défaut : 1 (masqué).

Le texte, les e-mails et les nombres nettoyés 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 nettoyer 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 (c.-à-d. <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 (c.-à-d. <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 aura pour résultat l’enregistrement du DOM suivant par le tracker :

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

• La fonction domSanitizer: (node: Element) => SanitizeLevel pour éviter d’avoir à instrumenter chaque composant HTML qui doit être nettoyé. 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 ayant 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 nettoyés sont masqués/expurgés au niveau de la source (tracker), de sorte que les données sensibles n’atteignent jamais l’instance OpenReplay.

Vous pouvez utiliser le SDK OpenReplay pour nettoyer 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. Veillez à bien expurger 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 nettoyer les requêtes réseau.

Pour nettoyer 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 nettoyer les données enregistrées dans GraphQL pour plus de détails.

Épurez les données sensibles du magasin d’état de votre 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 nettoyer vos données, contactez-nous sur notre Slack ou consultez notre Forum et obtenez de l’aide de notre communauté.