Вы можете очищать то, что захватывает OpenReplay, как на глобальном, так и на детальном уровне. Любые скрытые или игнорируемые данные не будут захвачены в источнике. Иными словами, эти данные никогда не покинут браузер пользователя.

Данные можно очищать на уровне трекера, при настройке OpenReplay.

1. Нажмите на Tracking Code вашего проекта в разделе «Preferences > Projects».
2. Параметры записи данных должны появиться прямо перед фрагментом кода:

• Inputs: Игнорировать, скрывать или записывать все значения, вводимые вашими пользователями.
• Do not record any numeric text: Игнорировать числовые значения, содержащиеся в текстовых элементах.
• Do not record email addresses: По умолчанию все адреса электронной почты, содержащиеся в текстовых элементах, скрываются и не отображаются в записях. Вы можете отключить это, сняв флажок.

3. Изменение параметров записи данных влияет на фрагмент кода. Обязательно скопируйте и вставьте обновлённый скрипт в ваше веб-приложение.

Существует набор параметров, связанных с конфиденциальностью, которые можно передать в конструктор:

• obscureTextEmails?: boolean Скрывает адреса электронной почты в текстовых элементах. Адреса будут преобразованы в случайную цепочку звёздочек. По умолчанию: true.
• obscureTextNumbers?: boolean Скрывает числа в текстовых элементах. Числа будут преобразованы в случайную цепочку звёздочек. По умолчанию: false.
• obscureInputEmails?: boolean Скрывает адреса электронной почты в полях ввода. Значения адресов будут преобразованы в случайную цепочку звёздочек. По умолчанию: true.
• obscureInputNumbers?: boolean Скрывает числа в полях ввода. Числовые значения будут преобразованы в случайную цепочку звёздочек. По умолчанию: false.
• obscureInputDates?: boolean Скрывает даты в полях ввода. Значения дат будут преобразованы в случайную цепочку звёздочек. По умолчанию: false.
• defaultInputMode?: 0 | 1 | 2 Режим захвата по умолчанию для значений ввода. Соответственно: обычный, скрытый или игнорируемый. По умолчанию: 1 (скрытый).

Очищенные текст, адреса электронной почты и числа скрываются или удаляются до отправки данных на серверы OpenReplay. Поэтому изменения, применённые к указанным выше параметрам, не могут иметь обратной силы и будут применяться только к вновь собранным данным.

Вы также можете очищать данные на уровне кода для большей детализации. Это полезно для скрытия или игнорирования элементов DOM и полей ввода.

• data-openreplay-obscured для маскирования текстового содержимого тегов <input>, <img> и других HTML-элементов (например, <div>) за исключением <svg> и <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 для скрытия содержимого тегов <input>, <img>, <svg> и других HTML-элементов (например, <div>) за исключением <canvas>. Содержимое элемента (включая его дочерние компоненты) удаляется, но его свойства и аргументы сохраняются, как в этом примере:

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

В результате трекер запишет следующий DOM:

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

• Функция domSanitizer: (node: Element) => SanitizeLevel позволяет избежать необходимости инструментировать каждый HTML-компонент, который требуется очистить. SanitizeLevel может быть Plain (0), Obscured (1) или Hidden (2). Эта функция передаётся в конструктор трекера. Ниже приведён пример скрытия всех HTML-элементов с определённым именем CSS-класса:

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

Примечание: Все очищенные элементы маскируются/скрываются на уровне источника (трекера), поэтому конфиденциальные данные никогда не попадают на экземпляр OpenReplay.

Вы можете использовать SDK OpenReplay для очистки сетевых данных и состояния приложения.

Захват запросов/ответов может фиксировать крайне конфиденциальную или приватную информацию, которую ваше приложение может отправлять/получать. Обязательно правильно скрывайте ваши сетевые данные.

Используйте параметр sanitizer для скрытия конфиденциальных данных в запросах/ответах Fetch/XHR. Подробнее см. в параметрах сети.

Также ознакомьтесь с этим пошаговым руководством о том, как захватывать и очищать сетевые запросы.

Для очистки данных GraphQL необходимо клонировать ключевые переменные и результаты операции перед вызовом трекера. Подробнее см. в разделе как очищать записанные данные в GraphQL.

Удаляйте конфиденциальные данные из хранилища состояния вашего фронтенда с помощью SDK OpenReplay.

Используйте параметры actionFilter, actionTransformer и stateTransformer для скрытия конфиденциальных действий и поддеревьев из вашего хранилища. Подробнее см. в документации плагина redux.

Используйте параметры filter, transformer и mutationTransformer для скрытия конфиденциальных мутаций и поддеревьев из вашего хранилища. Подробнее см. в документации плагина vuex.

Используйте параметры filter, transformer и mutationTransformer для скрытия конфиденциальных мутаций и поддеревьев из вашего хранилища. Подробнее см. в документации плагина zustand.

Используйте параметры filter, transformer и mutationTransformer для скрытия конфиденциальных мутаций и поддеревьев из вашего хранилища. Подробнее см. в документации плагина pinia.

Используйте параметры actionFilter, actionTransformer и stateTransformer для скрытия конфиденциальных действий и поддеревьев из вашего хранилища. Подробнее см. в документации плагина ngrx.

Мы постоянно улучшаем наши функции, связанные с конфиденциальностью, поэтому дайте нам знать, если вам нужно что-то, что мы пока не поддерживаем. Если у вас возникли трудности с очисткой данных, обратитесь к нам в наш Slack или посетите наш Форум и получите помощь от нашего сообщества.