Session Replay — Masking & PII

Hierarquia block/mask/ignore, classes CSS Atlas, proteções hardcoded e config para iGaming.

PII nunca sai do browser. O masking acontece ANTES do payload entrar no Worker de compressão. Mesmo que o operador desabilite todas as proteções custom, as regras hardcoded (password, cc-*, cpf/cnpj/ssn) permanecem ativas.

Hierarquia

rrweb (motor de gravação) trabalha com 3 níveis. Atlas expõe todos via config + classes CSS:

Nível	Efeito	Quando usar
BLOCK	Subárvore inteira vira placeholder cinza no replay	Vídeo, iframes de terceiros, dados ultra-sensíveis
MASK	Texto/inputs viram ***** no replay	Maioria dos campos de cadastro/KYC
IGNORE	Input value não é capturado, mas eventos (focus/blur/change) sim	Campos onde quero saber que houve digitação mas não o conteúdo

Classes CSS Atlas

Adicione no HTML do operador para ativar masking sem mexer no config JS:

Classe	Nível	Efeito
ig-no-capture	BLOCK	Subárvore inteira removida do replay
ig-mask	MASK	Texto mascarado com *
ig-ignore-input	IGNORE	Input value omitido
ig-no-rageclick	(Tipo 1)	Não dispara rage.click para esse elemento

<!-- Subárvore inteira escondida -->
<div class="ig-no-capture">
  <video src="/cassino/blackjack-live.mp4"></video>
</div>

<!-- Texto mascarado mas estrutura visível -->
<span class="ig-mask">CPF: 123.456.789-00</span>

<!-- Input registra digitação sem capturar valor -->
<input type="text" name="security_question" class="ig-ignore-input" />

Proteções hardcoded

Não podem ser desabilitadas por config. O recorder verifica cada <input> em runtime:

// src/replay/masking.ts (extraído do SDK)
const HARDCODED_NAME_PATTERNS = [
  /password/i, /passwd/i, /pwd/i,
  /(^|\s)cc(\s|$)/i, /credit[\s_\-]?card/i, /card[\s_\-]?number/i,
  /cardnum/i, /cvv/i, /cvc/i, /\bcsc\b/i,
  /\bssn\b/i, /\bcpf\b/i, /\bcnpj\b/i,
  /document[\s_\-]?number/i, /security[\s_\-]?code/i,
];

Cobertura por categoria:

• Inputs de senha: <input type="password"> sempre mascarado, independente de nome ou classe.
• Cartão de crédito: campos com autocomplete começando em cc- ou nome contendo creditCard, cardNumber, cardnum, cvv, cvc, csc.
• Documentos BR: cpf, cnpj, document_number.
• Documentos US: ssn, security_code.
• Geral: current-password, new-password via autocomplete.

Matching é case-insensitive e normaliza separadores (_, -, .) para espaço — user_ssn, CardNumber, document-number são todos detectados.

Configuração recomendada (iGaming)

window.iGamingSDK.init({
  // ... core config ...
  sessionReplay: {
    enabled:    true,
    sampleRate: 0.1,

    masking: {
      // Mascarar TODOS os inputs por padrão. iGaming = muito KYC/financial.
      maskAllInputs: true,

      // NÃO mascarar texto livre — operador quer ver navegação do jogador.
      maskAllText: false,

      // Seletor para esconder áreas inteiras (alerts financeiros, balances).
      blockSelector: '.player-balance, .deposit-history, .withdraw-form',

      // Seletor para mascarar texto sem esconder estrutura.
      maskTextSelector: '.player-name, .transaction-amount',

      // Inputs onde queremos saber que houve interação mas não o valor.
      ignoreSelector: 'input[name="2fa-code"], input[name="security-answer"]',

      // Classes CSS customizadas (defaults: ig-no-capture / ig-mask / ig-ignore-input).
      blockClass:  'app-no-capture',
      maskClass:   'app-mask',
      ignoreClass: 'app-ignore',

      // Por tipo de input HTML.
      maskInputOptions: {
        password: true,   // sempre true (hardcoded), aceita explícito
        email:    true,
        tel:      true,
        number:   false,  // valores numéricos genéricos: visíveis
        search:   false,
        text:     false,
        textarea: false
      },

      // Função custom — última palavra. Retorna o valor masked OR o original
      // (rrweb-record vai usar o resultado direto no DOM clonado).
      maskInputFn: (text, el) => {
        // Mascarar apenas CPF (regex 11 dígitos).
        if (/^\d{11}$/.test(text)) {
          return '***.***.***-**';
        }
        return text; // resto: passa direto
      }
    }
  }
});

Sempre comece restritivo, depois relaxe. Em produção, é mais fácil liberar campos específicos do que descobrir que dados PII vazaram para o replay. Atlas recomenda começar com maskAllInputs: true + blockSelector amplo, e remover restrições conforme operações de compliance aprovam.

Como auditar

# 1. Inspecionar o replay no Dashboard
# Dashboard → Web Analytics → Replays → abrir um replay → ativar overlay "Masked"

# 2. Validação programática
# Operador deve testar campos PII conhecidos antes de habilitar em prod.
# Atlas oferece smoke endpoint que retorna o payload rrweb DECRIPTOGRAFADO:
curl -X POST https://api.atlas.io/v1/replays/preview \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"replay_id": "rp_xxx", "include_masked_preview": true}'
# (Apenas roles compliance/admin podem chamar este endpoint.)

# 3. Auditoria contínua via ClickHouse
SELECT actor_role, COUNT(*) as views
FROM atlas.audit_replay_views
WHERE event_time >= now() - INTERVAL 1 DAY
GROUP BY actor_role
ORDER BY views DESC;

O que NÃO é capturado (mesmo sem config)

• password inputs (sempre hardcoded)
• <input type="file"> content — apenas filename é registrado
• Request bodies e headers (a menos que network.recordBody: true, opt-in)
• Authorization/Cookie headers (hardcoded blocklist)
• Query params sensíveis em URLs (token, access_token, cpf, etc) — veja Network & Console

Próximos passos

Triggers

Gravar SÓ sessões críticas com urlMatchRegex ou eventMatch.

Network & Console

Política metric-only + scrubURL.