Como exibir resultados da consulta de CPF de forma segura na interface

Exibir resultados de consulta de CPF com segurança na interface significa aplicar mascaramento parcial nos dados retornados pela API, fazer o tratamento no backend antes de enviar ao frontend, e usar headers HTTP que impedem cache em páginas com dados sensíveis — garantindo conformidade com a LGPD sem prejudicar a usabilidade do usuário.

Introdução

Quando uma aplicação consulta um CPF via API, recebe dados pessoais como nome completo, gênero e data de nascimento. Exibir esses dados diretamente na tela, sem nenhum tratamento, pode criar vulnerabilidades de segurança e violar princípios da LGPD. Ao mesmo tempo, esconder completamente os resultados prejudica a usabilidade, pois o usuário precisa de feedback visual para confirmar que a consulta foi bem-sucedida.

Se sua aplicação utiliza a CPFHub.io para consultar CPFs, este guia mostra como exibir os dados retornados pela API de forma segura, aplicando as técnicas recomendadas pela OWASP para proteção de dados sensíveis na interface.

Os riscos de exibir dados sem tratamento

Exibir o nome completo e a data de nascimento de forma aberta na interface cria riscos concretos:

• Shoulder surfing -- Alguém ao lado do usuário pode ver dados pessoais na tela, especialmente em ambientes públicos ou de atendimento.

• Screenshots e compartilhamento -- Capturas de tela podem ser salvas e compartilhadas inadvertidamente, expondo dados de terceiros.

• Logs de front-end -- Dados exibidos no DOM podem ser capturados por extensões de navegador, ferramentas de monitoramento ou scripts de terceiros.

• Cache do navegador -- Dados renderizados podem ficar no cache local do navegador após a sessão.

• Violação da LGPD -- A exposição desnecessária de dados pessoais pode ser considerada tratamento inadequado sob a legislação brasileira.

Técnicas de mascaramento para dados de CPF

O mascaramento permite exibir dados parciais que confirmam a identidade sem revelar a informação completa.

Mascaramento do número do CPF

O padrão mais aceito é ocultar os dígitos centrais e exibir apenas o início e o final:

Mascaramento do nome

Para o nome completo, as técnicas mais comuns são:

• Primeiro e último nome -- "Maria *** Santos" (oculta nomes do meio).

• Iniciais com primeiro nome -- "Maria O. S." (mantém apenas as iniciais dos sobrenomes).

• Primeiro nome truncado -- "Mar*** *** S***" (oculta parcialmente todos os nomes).

Mascaramento da data de nascimento

• Apenas o ano -- "****/1985" (suficiente para verificação de faixa etária).

• Mês e ano -- "//1985" (oculta o dia).

Implementação prática de funções de mascaramento

Veja funções utilitárias em JavaScript para mascarar os dados retornados pela API:

function mascararCPF(cpf) {
    // Entrada: "12345678900" -> Saída: "123.***.***-00"
    const limpo = cpf.replace(/\D/g, '');
    return `${limpo.slice(0, 3)}.***.***-${limpo.slice(9)}`;
}

function mascararNome(nome) {
    // Entrada: "Maria Oliveira Santos" -> Saída: "Maria O. S."
    const partes = nome.split(' ');
    if (partes.length === 1) return partes[0];
    const primeiro = partes[0];
    const iniciais = partes.slice(1).map(p => `${p[0]}.`).join(' ');
    return `${primeiro} ${iniciais}`;
}

function mascararDataNascimento(birthDate) {
    // Entrada: "22/03/1985" -> Saída: "**/**/1985"
    const partes = birthDate.split('/');
    return `**/**/${partes[2]}`;
}

// Uso com dados da API CPFHub.io
async function consultarEMascarar(cpf) {
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 10000);

    const response = await fetch(
    `https://api.cpfhub.io/cpf/${cpf}`,
    {
    headers: {
    'x-api-key': 'SUA_CHAVE_DE_API',
    'Accept': 'application/json'
    },
    signal: controller.signal
    }
    );

    clearTimeout(timeout);
    const resultado = await response.json();

    if (resultado.success) {
    return {
    cpf: mascararCPF(resultado.data.cpf),
    nome: mascararNome(resultado.data.name),
    nascimento: mascararDataNascimento(resultado.data.birthDate),
    genero: resultado.data.gender
    };
    }

    return null;
}

Níveis de exibição por contexto

Nem todos os contextos precisam do mesmo nível de mascaramento. Defina políticas de exibição por contexto:

Para o próprio titular

O titular do CPF pode ver mais dados, já que está acessando suas próprias informações:

• CPF: 123.456.789-00 (completo, se ele mesmo informou)
• Nome: Maria Oliveira Santos (completo)
• Nascimento: 22/03/1985 (completo)

Para operadores e atendentes

Funcionários que consultam CPFs de terceiros devem ver dados parciais:

• CPF: 123..-00
• Nome: Maria O. S.
• Nascimento: //1985

Para logs e relatórios

Registros internos devem conter o mínimo necessário:

• CPF: ..***-00
• Nome: M*** (apenas primeira letra)
• Nascimento: Não exibir

Protegendo dados no DOM e na rede

Além do mascaramento visual, proteja os dados na camada técnica:

Não armazene dados completos no estado do front-end

Faça o mascaramento no backend antes de enviar ao front-end. Assim, mesmo que o estado da aplicação seja inspecionado via DevTools, apenas dados mascarados estarão disponíveis.

Use headers de segurança

Configure headers HTTP que impedem o cache de páginas com dados sensíveis:

Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
X-Content-Type-Options: nosniff

Limpe dados ao sair da tela

Quando o usuário navega para outra página, limpe os dados de consulta do estado da aplicação:

useEffect(() => {
    return () => {
    setDadosConsulta(null);
    };
}, []);

Exibição com revelação progressiva

Uma técnica eficaz é a revelação progressiva: exibir dados mascarados por padrão e permitir que o usuário clique para revelar temporariamente.

• O nome aparece como "Maria O. S." com um botão "Ver nome completo".

• Ao clicar, o nome completo é exibido por 5 segundos e depois volta a ser mascarado.

• Cada clique de revelação é registrado em log de auditoria para compliance.

Essa abordagem dá ao usuário acesso à informação quando necessário, sem deixar dados expostos permanentemente na tela.

Acessibilidade na exibição mascarada

Ao mascarar dados, garanta que leitores de tela ainda possam comunicar a informação de forma compreensível:

• Evite asteriscos no aria-label -- Em vez de ler "asterisco asterisco asterisco", use aria-label="CPF parcialmente oculto, terminado em 00".

• Descreva o nível de mascaramento -- Use aria-describedby para indicar que os dados estão parcialmente ocultos.

• Botão de revelar com label claro -- O botão de revelação deve ter aria-label="Revelar nome completo".

Perguntas frequentes

Por que mascarar os dados no backend em vez de no frontend?

Mascarar no backend garante que dados completos nunca trafeguem até o cliente — nem no payload da resposta, nem no estado do aplicativo inspecionável via DevTools. Se o mascaramento for feito apenas no frontend, um usuário técnico pode interceptar a resposta da API e ver os dados sem máscara. O mascaramento no backend é a abordagem recomendada pela OWASP para proteção de dados sensíveis.

Quais dados da API CPFHub.io devem ser sempre mascarados na interface?

Nome completo, data de nascimento e o número do CPF em si devem ser sempre exibidos com algum nível de mascaramento para operadores e atendentes. Para o titular do documento — que está acessando seus próprios dados — é aceitável exibir informações completas, desde que haja autenticação robusta e logs de auditoria do acesso.

Como implementar revelação progressiva de forma segura?

Armazene os dados mascarados no estado do frontend. Ao clicar em "Revelar", faça uma nova chamada ao backend para buscar os dados completos (nunca os armazene no state), exiba-os por um tempo limitado (5 a 10 segundos) e registre o evento em log de auditoria com usuário, timestamp e CPF consultado. Assim você garante rastreabilidade para compliance com a LGPD.

Exibir dados de CPF mascarados na tela viola a LGPD?

Não, desde que o mascaramento minimize a exposição ao necessário para a finalidade declarada. A LGPD exige o princípio da necessidade: exibir apenas os dados indispensáveis para a operação. Mascarar o nome para "Maria O. S." e o CPF para "123..-00" em telas de atendimento é uma boa prática alinhada com a legislação — e documentada pela ANPD como controle técnico adequado.

Conclusão

Exibir resultados de consultas de CPF de forma segura é um equilíbrio entre dar feedback visual ao usuário e proteger dados pessoais. O mascaramento parcial no backend, a revelação progressiva e a proteção técnica no DOM e na rede são práticas que garantem conformidade com a LGPD sem sacrificar a usabilidade.

Cadastre-se em cpfhub.io — 50 consultas mensais gratuitas, sem cartão de crédito — e implemente exibição segura dos dados de CPF na sua interface com as funções de mascaramento apresentadas neste guia.