Implementar SHA-256 no Google Tag Manager: Vale a Pena?

O que você irá aprender?

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.