Esse papo aqui começou la na nossa comunidade do Discord em cima de uma troca de idéia que tivemos, muito obrigado por trazer o assunto Élcio, tmj :)
A necessidade de anonimização e segurança de dados no Google Tag Manager (GTM) tem levado muitos profissionais a buscar maneiras de calcular hashes, como o SHA-256, diretamente no navegador. No entanto, existem desafios técnicos e implicações importantes ao tentar fazer isso no frontend via cGTM. Primeiro vamos a alguns esclarecimentos:
Qual a Diferença? Google Tag Manager Client vs. Google Tag Manager Server Antes de discutir a implementação do SHA-256 no Google Tag Manager, é essencial entender as diferenças entre o Google Tag Manager Client-Side (cGTM) e o Google Tag Manager Server-Side (sGTM):
| Característica | cGTM (Client-Side) | sGTM (Server-Side) |
|---|---|---|
| Execução | No navegador do usuário | No servidor, antes do envio dos dados |
| Desempenho | Depende do dispositivo do usuário | Maior controle e otimização |
| Segurança | Exposto ao frontend, pode ser manipulado | Maior proteção contra inspeção e alteração |
| Bloqueadores | Pode ser afetado por AdBlockers e restrições de privacidade | Menos suscetível a bloqueios |
| Controle de dados | Limitado | Maior flexibilidade e anonimização |
É importante ressaltar que um não exclui o outro, na verdade na maioria dos casos o Google Tag Manager Server Side é complementar ao Google Tag Manager Client, beleza?
Agora que entendemos essa diferença, vamos explorar como calcular SHA-256 no cGTM e suas implicações.
O que é SHA-256?
O SHA-256 (Secure Hash Algorithm 256-bit) é uma função criptográfica que transforma qualquer dado de entrada em um valor hash de 256 bits (64 caracteres hexadecimais). Esse processo é unidirecional, o que significa que não é possível recuperar o dado original a partir do hash gerado.
Para que serve?
SHA-256 é amplamente utilizado para:
- •Proteção de senhas → Em vez de armazenar senhas diretamente, os sistemas armazenam seus hashes.
- •Integridade de dados → Garante que arquivos ou mensagens não foram alterados.
- •Assinaturas digitais → Utilizado para autenticar a origem de documentos e transações.
- •Blockchain e Criptomoedas → SHA-256 é a base da segurança do Bitcoin e outras criptomoedas.
No mundo do marketing + dados utilizamos esse modelo de criptografia quando precisamos enviar algum dado sensível a plataformas de terceiros, como api de conversão do Meta por exemplo.
Como calcular SHA-256 no cGTM?
Existe algumas formas que hoje são amplamente utilizadas para implementação de hashing dentro de um ambiente de navegador, vamos explorar alguns deles trazendo meus 2 centavos para cada uma das opções.
Usando a API Nativa do Navegador
O JavaScript fornece através da Web Crypto API uma série de recursos de criptografia para utilização no navegador. O método crypto.subtle.digest() permite calcular SHA-256 de forma nativa. O problema? Ela é assíncrona, e o cGTM não suporta async/await dentro de Variáveis JavaScript Personalizadas.
Para ilustrar a diferença entre operações síncronas e assíncronas, imagine que você está em um restaurante:
Se o serviço fosse síncrono, você faz o pedido e precisa esperar que a comida seja servida antes de continuar qualquer outra atividade.
Se fosse assíncrono, você faz o pedido e pode continuar conversando ou mexendo no celular enquanto aguarda a comida ser preparada e entregue.
No cGTM, precisamos de código síncrono, ou seja, tudo deve acontecer imediatamente sem esperar nada, como se estivéssemos pegando um lanche em um fast-food onde recebemos o pedido na hora. Já a API crypto.subtle.digest() funciona de forma assíncrona, como em um restaurante tradicional onde o prato é preparado enquanto você aguarda.
Se você pensou "ahh, mas é simples, vou criar uma variável HTML personalizada para tratar as informações de maneira assíncrona e depois enviar como um evento personalizado no Google Tag Manager", você ainda não tem a maturidade necessária para essa conversa, tá?
Usando bibliotecas externas e seu impacto no carregamento
O uso de bibliotecas externas como CryptoJS foi, por muito tempo, uma solução prática para hashing no navegador. No entanto, esse tipo de abordagem pode trazer diversos impactos negativos no desempenho e na segurança da aplicação. Vamos ver algumas delas abaixo:
- •Tamanho do arquivo e tempo de carregamento → Bibliotecas externas adicionam peso extra ao carregamento da página, impactando o tempo de resposta e, consequentemente, a experiência do usuário.
- •Dependência de terceiros → Utilizar bibliotecas descontinuadas, como o CryptoJS, representa um risco, pois elas não recebem mais atualizações de segurança ou correções de bugs.
- •Possível impacto em SEO e Core Web Vitals → Maior tempo de carregamento e execução de scripts afeta métricas como Largest Contentful Paint (LCP) e Total Blocking Time (TBT), prejudicando o ranqueamento da página.
- •Exposição a vulnerabilidades → Como o código dessas bibliotecas pode ser inspecionado, manipulado e até explorado por atacantes, o uso de soluções puramente client-side para segurança de dados não é recomendado
Implementação de SHA-256 Síncrona no cGTM de maneira manual
Embora seja possível rodar SHA-256 diretamente no cGTM com uma implementação síncrona, essa abordagem ainda apresenta problemas significativos.
Como o processamento do hash ocorre no navegador do usuário, a performance pode ser afetada, principalmente em dispositivos mais lentos. Além disso, essa implementação ainda depende da máquina do usuário para processar cada requisição, o que significa que o tempo de execução pode variar bastante e, em alguns casos, gerar travamentos perceptíveis em páginas com muitas execuções simultâneas.
Outro problema relevante é que, mesmo sendo uma solução funcional dentro do contexto do cGTM, o código continua sendo exposto no frontend, permitindo que usuários mal-intencionados o inspecionem e manipulem. Isso compromete a segurança da aplicação e pode até gerar inconsistências nos dados coletados.
Portanto, apesar de ser tecnicamente viável, essa abordagem não é recomendada para aplicações onde performance e segurança são fatores críticos. O ideal, sempre que possível, é deslocar esse processamento para o backend (sGTM ou outra solução server-side).
Problemas ao gerar isso no lado do cliente
Existem certas coisas na vida da gente que não tem o que fazer, é melhor escutar cuidado do que escutar coitado. Meu ponto é sobre agora que você leu esse artigo é você fazer a gambiarra sabendo que é uma gambiarra fica ai para seu livre arbítrio tomar a sua decisão.
E Mesmo que qualquer implementação de guru de internet funcione, há problemas críticos ao rodar hashing no cGTM:
- •Exposição do código no navegador → Qualquer pessoa pode inspecionar e modificar a lógica.
- •Maior consumo de CPU no cliente → O hash será processado no navegador do usuário, podendo impactar performance.
- •Dificuldade em garantir integridade dos dados → Se a intenção for anonimização segura, o frontend não é o melhor lugar.
Agora, com um entendimento melhor das diferenças entre cGTM e sGTM, fica mais claro por que, em muitos casos, calcular SHA-256 no backend é a melhor opção. Espero ter ajudado beijos de luz.
Lucian Fialho
Fundador e CTO da Métricas Boss, com sólido background em tecnologia, tendo passado por empresas como Comprafacil.com e Leader.com. Atuou no desenvolvimento de lojas como Globo, Olimpíadas do Rio, Ipiranga Shop, entre outras.
Publicado em 26 de fevereiro de 2025
