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

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

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

* Токены аутентификации и 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`.

```html
<!-- Эти поля будут автоматически замаскированы -->
<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`

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

```

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

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

```javascript
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`:

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

```

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

***

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

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

### data-capture-mask

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

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

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

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

```

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

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

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

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

```

### data-capture-hide

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

```html
<!-- Элемент не попадёт в отчёт -->
<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: Форма авторизации

```html
<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: Платёжная форма

```html
<!-- Скрываем всю платёжную секцию -->
<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: Профиль пользователя

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

```

***

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

1. **Используйте принцип минимальных привилегий** — маскируйте всё, что может быть чувствительным, даже если вы не уверены.

2. **Тестируйте в dev-окружении** — перед деплоем проверьте, что все чувствительные данные действительно маскируются.

3. **Комбинируйте методы** — используйте как автоматическую защиту, так и явные data-атрибуты.

4. **Регулярно проверяйте отчёты** — убедитесь, что в отчётах нет утечек конфиденциальных данных.

5. **Документируйте для команды** — создайте внутренние гайдлайны по использованию data-атрибутов маскировки.

***

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

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

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

***