Tópicos Avançados¶

Visão Geral¶

Esta seção cobre recursos avançados do Complyr para cenários complexos de implementação, incluindo interceptação de requisições, detecção automática de cookies, rastreamento cross-domain, e otimização de performance.

Os tópicos avançados são destinados a desenvolvedores que precisam de controle granular sobre o comportamento do sistema de consentimento, integração profunda com aplicações complexas, ou otimizações específicas de performance e UX.

Tópicos Disponíveis¶

1. Request Interception¶

Aprenda a interceptar e controlar requisições HTTP baseadas em consentimento do usuário.

Características: - Bloqueio automático de scripts third-party - Interceptação de fetch e XMLHttpRequest - Controle granular por domínio e propósito - Fallback strategies para recursos bloqueados

Casos de Uso: - Bloquear Google Analytics até consentimento de analytics - Prevenir carregamento de Facebook Pixel sem consentimento de marketing - Controlar third-party SDKs baseado em consentimento

Nível de Complexidade: ⭐⭐⭐⭐

2. Form Scanning¶

Detecção automática de campos de formulário e categorização de dados pessoais.

Características: - Scan automático de formulários HTML - Detecção de campos sensíveis (email, CPF, telefone) - Categorização automática de dados LGPD - Alertas de compliance

Casos de Uso: - Auditar formulários de checkout - Identificar campos sem consentimento adequado - Gerar relatórios de compliance LGPD

Nível de Complexidade: ⭐⭐⭐

3. Cookie Detection¶

Sistema avançado de detecção e categorização automática de cookies.

Características: - Scan automático de todos os cookies - Categorização baseada em domínio e nome - Detecção de cookies third-party - Relatórios de uso de cookies

Casos de Uso: - Auditar cookies do site automaticamente - Descobrir cookies third-party desconhecidos - Gerar declaração de cookies LGPD

Nível de Complexidade: ⭐⭐

4. Data Collection¶

Coleta estruturada de dados de usuários com consentimento explícito.

Características: - API de coleta de dados com consentimento - Vinculação de dados ao consentimento do usuário - Exportação de dados (direito de portabilidade LGPD) - Exclusão de dados (direito ao esquecimento)

Casos de Uso: - Coletar preferências de usuário - Implementar direito de portabilidade (Art. 18, V da LGPD) - Implementar direito ao esquecimento (Art. 18, VI da LGPD)

Nível de Complexidade: ⭐⭐⭐⭐

5. Cross-Domain Tracking¶

Sincronização de consentimento entre múltiplos domínios e subdomínios.

Características: - Compartilhamento de consentimento entre domínios - Sincronização cross-domain automática - Suporte a iframes e subdomínios - Fallback para domínios bloqueados

Casos de Uso: - Sincronizar consentimento entre site.com e app.site.com - Compartilhar estado entre domínios diferentes - Manter consentimento em SPAs com múltiplos domínios

Nível de Complexidade: ⭐⭐⭐⭐⭐

6. Caching & Performance¶

Estratégias de cache e otimização de performance para o sistema de consentimento.

Características: - Cache de consentimento no localStorage - Lazy loading do banner - Otimização de requisições API - Service Worker integration

Casos de Uso: - Reduzir tempo de carregamento inicial - Melhorar Core Web Vitals - Otimizar para conexões lentas

Nível de Complexidade: ⭐⭐⭐

Comparação de Recursos¶

Pré-requisitos¶

Antes de implementar recursos avançados, certifique-se de ter:

• Instalação básica do Complyr funcionando
• Conhecimento de JavaScript ES6+
• Familiaridade com Promises e async/await
• Compreensão de LGPD e conceitos de consentimento
• Ambiente de teste/staging para validação
• DevTools do navegador configurado

Roadmap de Implementação¶

Fase 1: Fundamentos (Semana 1-2)¶

1. Cookie Detection - Comece aqui para entender quais cookies seu site usa
2. Caching - Otimize performance básica antes de adicionar complexidade

Fase 2: Controle de Dados (Semana 3-4)¶

1. Form Scanning - Audite formulários e identifique gaps de compliance
2. Data Collection - Implemente coleta estruturada de dados

Fase 3: Interceptação (Semana 5-6)¶

1. Request Interception - Adicione controle granular de requisições
2. Cross-Domain - Sincronize consentimento entre domínios (se aplicável)

Arquitetura Avançada¶

graph TD
    A[Complyr SDK] --> B[Request Interceptor]
    A --> C[Form Scanner]
    A --> D[Cookie Detector]
    A --> E[Data Collector]
    A --> F[Cross-Domain Sync]
    A --> G[Cache Manager]

    B --> H[Consent API]
    C --> H
    D --> H
    E --> H
    F --> H
    G --> I[LocalStorage]

    H --> J[Backend API]
    J --> K[Database]

    L[User Consent] --> H
    H --> M[Analytics Blocked?]
    M -->|No| N[Allow Request]
    M -->|Yes| O[Block Request]

    P[Form Submit] --> C
    C --> Q[Scan Fields]
    Q --> R[Categorize Data]
    R --> S[Require Consent?]

    T[Cookie Set] --> D
    D --> U[Categorize Cookie]
    U --> V[Check Consent]
    V -->|Granted| W[Allow Cookie]
    V -->|Denied| X[Block Cookie]

Padrões de Implementação¶

Pattern 1: Lazy Initialization¶

Carregue recursos avançados apenas quando necessários:

// Carregar request interceptor apenas se consentimento for necessário
document.addEventListener('complyr:loaded', async () => {
  const consent = await window.complyr.getConsent();

  if (consent.status === 'NONE' || consent.status === 'PARTIAL') {
    // Usuário ainda não deu consentimento completo
    const { RequestInterceptor } = await import('./advanced/request-interceptor.js');
    const interceptor = new RequestInterceptor(consent);
    interceptor.enable();
  }
});

Pattern 2: Progressive Enhancement¶

Adicione funcionalidades avançadas sem quebrar implementação básica:

// Funcionalidade básica sempre funciona
window.complyr.identify('email', 'user@example.com');

// Funcionalidade avançada opcional
if (window.complyr.advanced && window.complyr.advanced.formScanner) {
  window.complyr.advanced.formScanner.scan();
}

Pattern 3: Graceful Degradation¶

Garanta funcionamento mesmo se recursos avançados falharem:

try {
  // Tentar usar cross-domain sync
  await window.complyr.crossDomain.sync();
} catch (error) {
  console.warn('Cross-domain sync failed, using local consent only', error);
  // Continuar com consentimento local
}

Monitoramento e Debug¶

Console Debug¶

Habilite logs detalhados para recursos avançados:

// Habilitar debug mode
localStorage.setItem('complyr_debug', 'true');

// Verificar request interception
window.complyr.advanced.requestInterceptor.getLogs();

// Verificar cookie detection
window.complyr.advanced.cookieDetector.getDetectedCookies();

// Verificar form scanning
window.complyr.advanced.formScanner.getScanResults();

Performance Monitoring¶

// Medir impacto de performance
const start = performance.now();

await window.complyr.initialize();

const end = performance.now();
console.log(`Complyr initialization took ${end - start}ms`);

// Monitorar request blocking
window.complyr.advanced.requestInterceptor.on('block', (request) => {
  console.log('Blocked request:', request.url, request.reason);
});

Considerações de Segurança¶

Content Security Policy (CSP)¶

Recursos avançados podem requerer ajustes no CSP:

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' https://app.complyr.com.br;
  connect-src 'self' https://app.complyr.com.br;
  img-src 'self' data: https:;
  style-src 'self' 'unsafe-inline';
">

Cross-Origin Requests¶

Para cross-domain sync, configure CORS adequadamente:

// No servidor
Access-Control-Allow-Origin: https://seusite.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Authorization

Data Encryption¶

Dados sensíveis devem ser encriptados:

// Complyr já faz hash SHA-256 automaticamente de:
// - Email
// - CPF
// - Telefone
// Mas você pode adicionar encriptação extra se necessário

const sensitiveData = 'user-sensitive-data';
const encrypted = await crypto.subtle.encrypt(
  { name: 'AES-GCM', iv: iv },
  key,
  new TextEncoder().encode(sensitiveData)
);

Casos de Uso Avançados¶

Caso 1: E-commerce com Múltiplos Domínios¶

Cenário: Loja online com shop.com e checkout em checkout.shop.com

Solução: 1. Configure cross-domain sync entre domínios 2. Implemente request interception para bloquear pixels third-party 3. Use form scanning para auditar checkout 4. Ative caching para melhorar performance

Recursos Usados: - Cross-Domain Tracking - Request Interception - Form Scanning - Caching

Caso 2: SaaS com Coleta de Dados Complexa¶

Cenário: Aplicação SaaS que coleta preferências detalhadas de usuários

Solução: 1. Implemente data collection API para coletar preferências 2. Use form scanning para detectar campos sensíveis 3. Configure request interception para APIs third-party 4. Implemente cache inteligente para reduzir latência

Recursos Usados: - Data Collection - Form Scanning - Request Interception - Caching

Caso 3: Portal de Notícias com Ads¶

Cenário: Site de notícias com múltiplas redes de anúncios

Solução: 1. Configure cookie detection para descobrir todos os cookies de ads 2. Implemente request interception para bloquear ads sem consentimento 3. Use caching agressivo para não afetar performance 4. Configure cross-domain se tiver subdomínios (e.g., esportes.site.com)

Recursos Usados: - Cookie Detection - Request Interception - Caching - Cross-Domain Tracking (opcional)

Troubleshooting Avançado¶

Problema: Request Interception não funciona¶

Sintomas: - Scripts third-party carregam mesmo sem consentimento - Console mostra requisições não bloqueadas

Diagnóstico:

// Verificar se interceptor está ativo
console.log('Interceptor active:', window.complyr.advanced?.requestInterceptor?.isActive());

// Verificar regras de bloqueio
console.log('Block rules:', window.complyr.advanced?.requestInterceptor?.getRules());

Soluções: 1. Verifique se o interceptor foi inicializado antes do carregamento dos scripts 2. Confirme que as regras de bloqueio estão corretas 3. Verifique CSP não está bloqueando o interceptor

Problema: Cross-Domain Sync não sincroniza¶

Sintomas: - Consentimento não sincroniza entre domínios - Usuário precisa consentir novamente em cada domínio

Diagnóstico:

// Verificar configuração cross-domain
console.log('Cross-domain config:', window.complyr.crossDomain?.getConfig());

// Testar sincronização manual
await window.complyr.crossDomain.sync();

Soluções: 1. Verifique se ambos os domínios têm o mesmo Workspace ID 2. Confirme que CORS está configurado corretamente 3. Verifique se cookies third-party estão habilitados no navegador

Problema: Performance degradada após recursos avançados¶

Sintomas: - Tempo de carregamento aumentou significativamente - Core Web Vitals pioraram

Diagnóstico:

// Medir performance de cada recurso
const metrics = window.complyr.advanced.getPerformanceMetrics();
console.log('Performance metrics:', metrics);

Soluções: 1. Ative lazy loading para recursos não críticos 2. Otimize regras de request interception (evite regex complexos) 3. Reduza frequência de form scanning 4. Configure cache mais agressivo

Contribuindo com Recursos Avançados¶

Se você desenvolveu um recurso avançado customizado que pode beneficiar outros usuários:

1. Documente claramente o caso de uso e implementação
2. Teste em múltiplos browsers e cenários
3. Compartilhe no GitHub Discussions
4. Considere contribuir para o core do Complyr

Recursos Adicionais¶

• Documentação da API - Referência completa da API
• Security Best Practices - Práticas de segurança
• Performance Optimization - Otimização de performance
• GitHub Repository - Código-fonte e issues

Próximos Passos¶

Comece explorando os recursos avançados na ordem sugerida:

1. Cookie Detection - Descubra cookies automaticamente
2. Caching - Otimize performance
3. Form Scanning - Audite formulários
4. Data Collection - Colete dados com consentimento
5. Request Interception - Controle requisições
6. Cross-Domain - Sincronize entre domínios

Importante: Recursos avançados requerem cuidado especial com performance e compatibilidade. Sempre teste em ambiente de staging antes de implementar em produção.

Precisa de ajuda? Entre em contato com nosso suporte em suporte@complyr.com.br.