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, tout le texte et les saisies sont remplacés par des astérisques côté agent browser avant que les données ne soient transmises à New Relic. Voici un exemple de ce à quoi ressemble un replay 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é.

Types de paramètres de confidentialité

Session Replay offre deux modes de confidentialité dans les paramètres de votre application :

• Default privacy settings (recommended): Ce mode masque tout le contenu de la page en remplaçant tout le texte et les saisies par des astérisques (*)

• Custom privacy settings: Ce mode offre un contrôle granulaire sur deux domaines distincts :

  • Text-masking and blocking: contrôle le texte statique, les étiquettes, les boutons, et le contenu général de la page. Vous les gérez à l'aide des champs Mask selectors et Block selectors.

  • User input masking: contrôle les éléments de formulaire interactifs. Vous les gérez à l'aide de cases à cocher pour des types d'entrée spécifiques, tels que le texte, l'e-mail, les nombres et les dates.

    Important

    Décocher toutes les cases à cocher User input masking démasque uniquement les entrées de formulaire. Votre texte statique (comme les étiquettes et les boutons) reste masqué sauf si vous configurez également le champ Mask selectors.

Masquer des informations personnelles spécifiques

Pour afficher tout le texte statique (comme les étiquettes, les boutons et les en-têtes) et masquer uniquement les entrées sensibles spécifiques de l'utilisateur (comme les numéros de carte de crédit ou de sécurité sociale), suivez ces étapes :

1. Allez à one.newrelic.com > All Capabilities > Browser.

2. Sélectionnez votre application de navigateur.

3. Dans le menu de gauche, cliquez sur Application settings.

4. Dans la section Privacy settings, sélectionnez Custom privacy settings.

5. Dans la section Text-masking and blocking, effacez les champs Mask selectors et Block selectors. Cela démasquera tout le texte statique sur votre site, comme les étiquettes et les boutons.

6. Dans la section User input masking :

   1. Désélectionnez toutes les cases à cocher pour supprimer le masquage de tous les champs de saisie utilisateur.
   2. Cochez les cases correspondant aux types de saisie spécifiques que vous souhaitez masquer. Cela garantira que seules ces saisies utilisateur spécifiques sont masquées, tandis que toutes les autres saisies restent visibles.

7. Redéployez votre application pour appliquer les modifications.

Après le redéploiement, tout le texte statique s’affiche normalement, tandis que seuls vos éléments spécifiquement marqués restent masqués. Pour des informations supplémentaires :

• Pour masquer les détails de saisie utilisateur, consultez la section masquer le texte sensible
• Pour afficher le texte statique, consultez la section démasquer le texte statique
• Pour ignorer le contenu de saisie utilisateur, consultez la section ignorer la saisie utilisateur

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.

Unmask texte statique

Par défaut, tout le texte statique est masqué lorsque vous utilisez les paramètres recommandés. Si vous souhaitez démasquer explicitement des éléments de texte statique spécifiques, vous pouvez ajouter la classe nr-unmask ou l’attribut data-nr-unmask à cet élément spécifique. Cela est utile lorsque vous souhaitez conserver le masquage global activé, mais que certains éléments doivent rester visibles.

Pour démasquer des éléments de texte spécifiques, utilisez l’une des options suivantes :

• Dans la plateforme New Relic : sur la page Application settings, ajoutez des sélecteurs CSS au champ Mask selectors. Pour démasquer tout le texte statique, effacez ce champ.

• Dans votre code : ajoutez la classe CSS nr-unmask ou l'attribut data-nr-unmask à vos éléments HTML.

  Par exemple, pour afficher un nom de produit tandis que les autres textes restent masqués à l’aide de :

  • Une classe CSS en ligne :

  <p>Product Name: <span class="nr-unmask">Premium Widget</span></p>

  Copier
  • Un attribut de données en ligne :

  <p>Product Name: <span data-nr-unmask>Premium Widget</span></p>

  Copier

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 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>