Приватность данных

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

Некоторые типы данных никогда не собираются:

Токены аутентификации и cookie-файлы в сетевых запросах
Информация, введенная в формы

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

Обзор

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

Пароли и данные аутентификации
Персональные данные (email, телефон, ИНН)
Платёжная информация (номера карт, CVV)
API-ключи и токены
Другая конфиденциальная информация

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

Автоматическая защита

По умолчанию автоматически маскируются следующие данные:

Поля ввода

Автоматически маскируются значения полей:

<input type="password">, <input type="email">, <input type="tel"> — по типу
Поля с атрибутом name или id, содержащим ключевые слова:
- Аутентификация: password, passwd, pwd, secret, pin, otp
- Контактные данные: email, phone, tel, mobile
- Идентификация: ssn, passport, license, national_id, tax_id, inn, snils
- Платёжные данные: card, credit, debit, payment, billing, visa, mastercard, amex, discover, maestro, mir
- Реквизиты карт: cvv, cvc, cvn, expir
- Банковские реквизиты: iban, swift, bic, routing, account
- Токены и ключи: token, apikey, api_key, auth, private
Поля с классами: password, passwd, email, phone, ssn, credit, card, payment, sensitive, private, secret, masked, hidden, secure, confidential

Поиск по подстроке

Поиск ключевых слов работает по подстроке. Например, card покроет cardnumber, card_number, creditcard. А expir покроет expiry, expiration.

<!-- Эти поля будут автоматически замаскированы -->
<input type="password" name="user_password">
<input type="email" name="user_email">
<input type="tel" name="phone_number">
<input class="credit-card-input" name="card">

URL-параметры

Автоматически маскируются query-параметры в URL, содержащие:

Аутентификация: password, passwd, pwd
Токены и ключи: token, key, secret, apikey, api_key
Сессии: auth, credential, session, access
OAuth/OIDC: code, nonce

До:  https://example.com/api?token=abc123&user=john
После: https://example.com/api?token=***&user=john

Добавление своих параметров (sensitiveUrlParams)

Вы можете расширить список маскируемых URL-параметров через опцию sensitiveUrlParams:

window.reportOptions = {
  captureKey: 'YOUR_CAPTURE_KEY',
  sensitiveUrlParams: ['my_secret_param', 'internal_id', 'ref_code']
};

Эти параметры будут добавлены к стандартному списку, а не заменят его.

HTTP-заголовки

Автоматически маскируются HTTP-заголовки в сетевых запросах:

Стандартные: authorization, www-authenticate, cookie
Токены и ключи: token, secret, apikey, api-key, api_key
Сессии и подписи: signature, credential, session
Служебные: idempotency-key, idempotence-key
Облачные провайдеры: x-amz-* (AWS), x-goog-* (Google Cloud), x-ms-* (Azure), cf-access-* (Cloudflare), ocp-apim-* (Azure API Management)

Также маскируются заголовки со значениями, начинающимися с Bearer или Basic .

Добавление своих заголовков (sensitiveHeaders)

Вы можете расширить список маскируемых HTTP-заголовков через опцию sensitiveHeaders:

window.reportOptions = {
  captureKey: 'YOUR_CAPTURE_KEY',
  sensitiveHeaders: ['x-my-custom-header', 'x-internal-token']
};

Эти заголовки будут добавлены к стандартному списку, а не заменят его.

HTML-атрибуты для маскировки

Вы можете явно указать элементы, которые нужно замаскировать или скрыть, используя data-атрибуты.

data-capture-mask

Маскирует содержимое элемента, заменяя текст на ***.

<!-- Текст будет заменён на *** -->
<span data-capture-mask>Секретный текст</span>

<!-- Значение поля будет замаскировано -->
<input data-capture-mask type="text" value="secret123">

<!-- Весь блок будет замаскирован -->
<div data-capture-mask>
  <p>Конфиденциальная информация</p>
  <p>Номер договора: 12345</p>
</div>

Наследование

Вместо добавления атрибута на каждый элемент можно добавить его на родительский контейнер:

<!-- Вместо этого (на каждый input) -->
<input data-capture-mask>
<input data-capture-mask>
<input data-capture-mask>

<!-- Можно так (один раз на контейнер) -->
<div data-capture-mask>
  <input>
  <input>
  <input>
</div>

data-capture-hide

Полностью скрывает элемент из отчёта.

<!-- Элемент не попадёт в отчёт -->
<div data-capture-hide>
  <p>Эта информация не будет захвачена</p>
</div>

<!-- Скрыть изображение -->
<img data-capture-hide src="private-photo.jpg">

<!-- Скрыть секцию с платёжными данными -->
<section data-capture-hide class="payment-form">
  <input type="text" name="card_number">
  <input type="text" name="cvv">
</section>

Разница между mask и hide

Атрибут	Результат	Когда использовать
`data-capture-mask`	Элемент виден, содержимое заменено на `***`	Когда важно показать наличие данных
`data-capture-hide`	Элемент полностью отсутствует	Когда элемент не должен быть виден вообще

Примеры использования

Пример 1: Форма авторизации

<form id="login-form">
  <div>
    <label>Email</label>
    <!-- Автоматически замаскируется (type="email") -->
    <input type="email" name="email">
  </div>

  <div>
    <label>Пароль</label>
    <!-- Автоматически замаскируется (type="password") -->
    <input type="password" name="password">
  </div>

  <div>
    <label>Код 2FA</label>
    <!-- Явная маскировка -->
    <input data-capture-mask type="text" name="otp_code">
  </div>

  <button type="submit">Войти</button>
</form>

Пример 2: Платёжная форма

<!-- Скрываем всю платёжную секцию -->
<section data-capture-hide class="payment-section">
  <h3>Платёжные данные</h3>

  <input type="text" name="card_number" placeholder="Номер карты">
  <input type="text" name="expiry" placeholder="MM/YY">
  <input type="text" name="cvv" placeholder="CVV">
</section>

<!-- Или маскируем отдельные поля -->
<section class="payment-section">
  <h3>Платёжные данные</h3>

  <input data-capture-mask type="text" name="card_number">
  <input data-capture-mask type="text" name="expiry">
  <input data-capture-mask type="text" name="cvv">
</section>

Пример 3: Профиль пользователя

<div class="user-profile">
  <h2>Профиль</h2>

  <!-- Имя можно показать -->
  <p>Имя: <span>Иван Иванов</span></p>

  <!-- Телефон маскируем -->
  <p>Телефон: <span data-capture-mask>+7 999 123-45-67</span></p>

  <!-- Паспортные данные скрываем полностью -->
  <div data-capture-hide class="passport-data">
    <p>Серия и номер: 1234 567890</p>
    <p>Дата выдачи: 01.01.2020</p>
  </div>
</div>

Совместимость

Функции приватности работают во всех поддерживаемых браузерах:

Chrome 80+
Firefox 75+
Safari 14+
Edge 80+

Обзор​

Автоматическая защита​

Поля ввода​

URL-параметры​

Добавление своих параметров (sensitiveUrlParams)​

HTTP-заголовки​

Добавление своих заголовков (sensitiveHeaders)​

HTML-атрибуты для маскировки​

data-capture-mask​

data-capture-hide​

Разница между mask и hide​

Примеры использования​

Пример 1: Форма авторизации​

Пример 2: Платёжная форма​

Пример 3: Профиль пользователя​

Рекомендации по безопасности​

Совместимость​