Puedes sanear lo que OpenReplay captura tanto a nivel global como a nivel granular. Cualquier dato ocultado o ignorado no se capturará en el origen. Es decir, esos datos nunca saldrán del navegador del usuario.

Los datos se pueden sanear a nivel del tracker, al configurar OpenReplay.

1. Haz clic en el Código de seguimiento de tu proyecto en ‘Preferences > Projects’.
2. Las opciones de grabación de datos deberían aparecer justo antes del fragmento de código:

• Inputs: Para ignorar, ocultar o grabar todos los valores de entrada de tus usuarios.
• Do not record any numeric text: Para ignorar los valores numéricos contenidos en elementos de texto.
• Do not record email addresses: De forma predeterminada, todos los correos electrónicos contenidos en elementos de texto se ocultan y no aparecerán en las repeticiones. Puedes desactivarlo desmarcando la casilla.

3. Cambiar las opciones de grabación de datos afecta al fragmento de código. Asegúrate de copiar y pegar el script actualizado en tu aplicación web.

Hay un conjunto de opciones relacionadas con la privacidad que puedes pasar al constructor:

• obscureTextEmails?: boolean Oculta los correos electrónicos en elementos de texto. Los correos electrónicos se convertirán en una cadena aleatoria de asteriscos. Valor predeterminado: true.
• obscureTextNumbers?: boolean Oculta los números en elementos de texto. Los números se convertirán en una cadena aleatoria de asteriscos. Valor predeterminado: false.
• obscureInputEmails?: boolean Oculta los correos electrónicos en los campos de entrada. Los valores de correo electrónico se convertirán en una cadena aleatoria de asteriscos. Valor predeterminado: true.
• obscureInputDates?: boolean Oculta las fechas en los campos de entrada. Los valores de fecha se convertirán en una cadena aleatoria de asteriscos. Valor predeterminado: false.
• defaultInputMode?: 0 | 1 | 2 Modo de captura predeterminado para los valores de entrada. Respectivamente: plano, ocultado o ignorado. Valor predeterminado: 1 (ocultado).

El texto, los correos electrónicos y los números saneados se ocultan o se suprimen antes de enviar los datos a los servidores de OpenReplay. Por lo tanto, los cambios aplicados a las opciones anteriores no pueden ser retroactivos y solo se aplicarán a los datos recién recopilados.

También puedes sanear tus datos a nivel de código para una mayor granularidad. Esto es útil para ocultar o ignorar elementos del DOM y campos de entrada.

• data-openreplay-obscured para enmascarar el contenido de texto de las etiquetas <input>, <img> y otros elementos HTML (p. ej. <div>), con la excepción de <svg> y <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 para redactar el contenido de las etiquetas <input>, <img>, <svg> y otros elementos HTML (p. ej. <div>), con la excepción de <canvas>. El contenido del elemento (incluidos sus componentes hijos) se elimina, pero se conservan sus props y argumentos, como en este ejemplo:

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

Esto dará como resultado que el tracker grabe el siguiente DOM:

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

• Función domSanitizer: (node: Element) => SanitizeLevel para evitar tener que instrumentar cada componente HTML que necesita ser saneado. SanitizeLevel puede ser Plain (0), Obscured (1) o Hidden (2). Esta función se pasa al constructor del tracker. A continuación se muestra un ejemplo de cómo redactar todos los elementos HTML que tengan un nombre de clase CSS específico:

// 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()

Nota: Todos los elementos saneados se enmascaran/redactan a nivel del origen (tracker), de modo que los datos sensibles nunca llegan a la instancia de OpenReplay.

Puedes usar el SDK de OpenReplay para sanear los datos de red y el estado de la aplicación.

La captura de solicitudes/respuestas puede registrar información altamente sensible o privada que tu aplicación pueda estar enviando/recibiendo. Asegúrate de redactar correctamente tus datos de red.

Usa la opción sanitizer para redactar datos sensibles de la solicitud/respuesta de Fetch/XHR. Consulta las opciones de red para obtener más detalles.

Además, consulta este tutorial paso a paso sobre cómo capturar y sanear solicitudes de red.

Para sanear los datos de GraphQL, necesitas clonar las variables clave y los resultados de la operación antes de llamar al tracker. Consulta cómo sanear los datos grabados en GraphQL para obtener más detalles.

Depura los datos sensibles del almacén de estado de tu frontend usando el SDK de OpenReplay.

Usa las opciones actionFilter, actionTransformer y stateTransformer para redactar acciones y subárboles sensibles de tu almacén. Consulta la documentación del plugin redux para obtener más detalles.

Usa las opciones filter, transformer y mutationTransformer para redactar mutaciones y subárboles sensibles de tu almacén. Consulta la documentación del plugin vuex para obtener más detalles.

Usa las opciones filter, transformer y mutationTransformer para redactar mutaciones y subárboles sensibles de tu almacén. Consulta la documentación del plugin zustand para obtener más detalles.

Usa las opciones filter, transformer y mutationTransformer para redactar mutaciones y subárboles sensibles de tu almacén. Consulta la documentación del plugin pinia para obtener más detalles.

Usa las opciones actionFilter, actionTransformer y stateTransformer para redactar acciones y subárboles sensibles de tu almacén. Consulta la documentación del plugin ngrx para obtener más detalles.

Mejoramos constantemente nuestras funciones relacionadas con la privacidad, así que dinos si necesitas algo que aún no admitimos. Si tienes problemas para sanear tus datos, contáctanos en nuestro Slack o visita nuestro Foro y obtén ayuda de nuestra comunidad.