Configurer les paramètres de confidentialité

La confidentialité de l'utilisateur est une considération essentielle lors de l'enregistrement de la relecture de session. Bien que les paramètres par défaut soient conçus pour protéger les informations sensibles, vous devrez peut-être ajuster la configuration de la confidentialité pour répondre à des besoins spécifiques. Cette section explique comment masquer, bloquer ou ignorer certaines données pour se conformer aux normes de confidentialité tout en conservant la fonctionnalité de Session Replay.

Par défaut, tous les textes et entrées sont remplacés par des astérisques. Voici un exemple de ce à quoi ressemble une rediffusion avec la confidentialité par défaut :

Si ce paramètre est approprié, passez à l’étape suivante.

Si vous devez personnaliser le contenu ou la saisie utilisateur capturé, vous disposez d'options permettant de masquer, de bloquer ou d'ignorer des classes et des attributs spécifiques du contenu ou de la saisie utilisateur. Assurez-vous de vérifier auprès de votre équipe de confidentialité avant de modifier les paramètres de confidentialité.

Gérer CSS multi-origine pour le replay de session

Les paramètres CSS multi-origines vous permettent de contrôler si les ressources CSS sont récupérées à partir d'un domaine distant lors de l'initialisation du replay de session. Ceci est essentiel pour garantir que les replays reflètent avec précision le style de votre site Web. Vous pouvez gérer l'accès CSS inter-origines soit via la plateforme New Relic, soit en mettant à jour manuellement votre code HTML.

Vous pouvez gérer le CSS multi-origines en utilisant l'une des deux méthodes suivantes :

• Utilisation de la plateforme New Relic
• Ajout d'un attribut anonyme à votre fichier HTML

Utilisation de la plateforme New Relic

Par défaut, l'option Fetch cross-origin CSS when session replay starts est activée pour le replay de session sur la plateforme New Relic. Vous pouvez modifier ce paramètre à partir de la page Application settings en activant ou en désactivant l'option Fetch cross-origin CSS when session replay starts .

Ajout anonymous

Ajoutez l’attribut crossorigin="anonymous" à vos éléments <link rel="stylesheet"> dans votre code HTML. Cet attribut indique au navigateur d'autoriser l'accès inter-origines pour ces fichiers CSS spécifiques, permettant à notre agent de navigateur d'enregistrer et d'intégrer les informations de style.

Par exemple:

<link
  rel="stylesheet"
  href="assets.yoursite.com/styles.css"
  crossorigin="anonymous"
/>

masquer le texte sensible

Vous pouvez masquer le texte sensible, ce qui signifie que le texte sera remplacé par des astérisques (*). Par exemple, vous pouvez masquer l’ID de compte d’un utilisateur qui s’affiche dans une URL.

Pour spécifier quelle entrée doit être masquée, vous avez plusieurs options :

• Sur la page Application settings , ajoutez vos propres sélecteurs CSS ou cochez les cases de masquage. Notez que l'utilisation de sélecteurs de masque ne masquera pas l'entrée utilisateur, donc si vous devez masquer l'entrée utilisateur, nous vous recommandons d'utiliser des sélecteurs de blocs.

  

• Ajoutez notre classe CSS nr-mask ou attribut data-nr-mask au code HTML de votre page Web.

  Par exemple, pour masquer l'affichage d'un identifiant de compte dans l'URL, ajoutez nr-mask au <div> contenant l'identifiant de compte :

  <div>Account ID: <span class="nr-mask">99881123</span></div>

Ces options utilisent un astérisque (*) pour masquer tout le texte de cet élément, masquant le texte réel mais révélant le nombre de caractères saisis. Cependant, les astérisques ne sont pas des numéros valides, donc le masquage des champs spécifiques au type de numéro tels que les numéros de téléphone ou de carte de crédit entraînera un champ vide lors d'une relecture.

Bloquer le contenu du site

Vous pouvez bloquer des sections entières de contenu sur votre site, ce qui signifie que la section apparaîtra comme un espace réservé vide dans Session Replay. Par exemple, si vous avez une image sur votre page Web À propos de nous et que vous n'avez pas besoin qu'elle soit capturée, vous pouvez bloquer la classe contenant l'image.

Pour bloquer des classes ou des attributs spécifiques, vous avez plusieurs options :

• Sur la page Paramètres de l’application, ajoutez vos sélecteurs CSS dans le champ *Sélecteurs de blocs .

  

• Ajoutez manuellement notre classe CSS nr-block ou notre attribut data-nr-block au code HTML de votre page Web. Par exemple, si vous souhaitez bloquer le texte et les images non pertinents de Session Replay, ajoutez nr-block à <div class>:

  <html>
    <head>
      <title>Sample image and text</title>
    </head>
    <body>
      <div class="image-text-container nr-block">
        <img src="https://example.com/image.png" alt="Image description" />
      </div>
    </body>
  </html>

  Copier

Ignorer la saisie de l'utilisateur

Vous pouvez ignorer les modifications apportées à un champ de saisie utilisateur, ce qui signifie que le champ de saisie sera toujours affiché dans la relecture, mais vous n'afficherez pas les modifications apportées à la valeur. Par exemple, vous pouvez ignorer la classe contenant les champs d’adresse e-mail ou de carte de crédit. Les champs de saisie du mot de passe sont toujours masqués. 

Pour ignorer la saisie, ajoutez la classe CSS nr-ignore au nom de classe du champ de saisie. Par exemple, si vous souhaitez ignorer les informations sensibles sur une page de facturation, ajoutez class="nr-ignore" à <input type>:

<div class="sensitive-information">
  <h2>Sensitive Information</h2>
  <p>
    Credit card number:
    <input type="number" class="nr-ignore" id="creditCardNumber" />
  </p>
  <p>
    Expiration date:
    <input type="number" class="nr-ignore" id="expirationDate" />
  </p>
  <p>CVV code: <input type="number" class="nr-ignore" id="cvvCode" /></p>
</div>