Puedes sanear lo que OpenReplay captura a nivel global y/o 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 Tracking Code 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 reproducciones. Puedes desactivar esto 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 se convertirán en una cadena aleatoria de asteriscos. Predeterminado: true.
• obscureTextNumbers?: boolean Oculta los números en elementos de texto. Los números se convertirán en una cadena aleatoria de asteriscos. Predeterminado: false.
• obscureInputEmails?: boolean Oculta los correos electrónicos en los campos de entrada. Los valores de correo se convertirán en una cadena aleatoria de asteriscos. Predeterminado: true.
• obscureInputNumbers?: boolean Oculta los números en los campos de entrada. Los valores numéricos se convertirán en una cadena aleatoria de asteriscos. Predeterminado: false.
• obscureInputDates?: boolean Oculta las fechas en los campos de entrada. Los valores de fecha se convertirán en una cadena aleatoria de asteriscos. Predeterminado: false.
• defaultInputMode?: 0 | 1 | 2 Modo de captura predeterminado para los valores de entrada. Respectivamente: plano, ocultado o ignorado. 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 recopilados a partir de ese momento.

También puedes sanear tus datos a nivel de código para obtener una mayor granularidad. Esto resulta ú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 (es decir, <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 (es decir, <div>) con la excepción de <canvas>. El contenido del elemento (incluidos sus componentes secundarios) se elimina, pero sus props y argumentos se conservan, 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 el siguiente DOM grabado por el tracker:

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

• La función domSanitizer: (node: Element) => SanitizeLevel evita 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 tienen 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) para que los datos sensibles nunca lleguen 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 podría estar enviando/recibiendo. Asegúrate de redactar correctamente tus datos de red.

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

Además, revisa 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 de tu almacén de estado del 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 de 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 de 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 de 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 de 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 de ngrx para obtener más detalles.

Estamos mejorando constantemente nuestras funciones relacionadas con la privacidad, así que cuéntanos si necesitas algo que aún no admitimos. Si tienes problemas para sanear tus datos, ponte en contacto con nosotros en nuestro Slack o consulta nuestro Foro y obtén ayuda de nuestra comunidad.