Validador de Data URI

Data URIs: embutindo bytes direto em HTML, CSS e JSON

Um data: URI e uma URL cujo corpo e o proprio recurso — nao tem host, nao tem path, nao faz requisicao de rede. O esquema foi padronizado pela RFC 2397 (1998) e e suportado por todo browser moderno, cliente de email e ferramenta HTTP-aware. E a forma canonica de inlinar uma imagem pequena, um icone SVG ou um JSON curto em HTML, CSS ou JavaScript sem disparar um roundtrip HTTP adicional.

O trade-off e direto: voce elimina uma requisicao de rede e o asset passa a ser cacheado junto com o documento pai, mas paga ~33% em tamanho (overhead do Base64) e abre mao do cache independente. Bem usado, e uma otimizacao elegante; mal usado, incha HTML/CSS e mata o hit rate do cache.

Sintaxe (RFC 2397)

data:[<media-type>][;base64],<data>

• media-type: tipo MIME opcional, ex. image/png ou application/json. Quando omitido, o default e text/plain;charset=US-ASCII.
• ;base64: flag opcional. Quando presente, o payload e decodificado como Base64. Quando ausente, e decodificado como texto percent-encoded.
• data: os bytes em si, percent-encoded ou em Base64.

Exemplos reais:

data:text/plain,Hello%20World
data:application/json,{"hello":"world"}
data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'.../>
data:image/png;base64,iVBORw0KGgoAAANSUhEUgAA...
data:text/html;charset=utf-8;base64,PGgxPkhlbGxvPC9oMT4=

Casos de uso comuns

• Imagens de fundo em CSS: background: url("data:image/svg+xml;base64,...") evita uma requisicao separada para icones e gradientes pequenos.
• Favicons SVG inline: <link rel="icon" href="data:image/svg+xml,<svg...><text>🚀</text></svg>"> — o truque do favicon emoji popularizado em 2020.
• Email HTML: imagens inline para o email renderizar offline, sem chamada de pixel de tracking.
• Downloads client-side: a.href = "data:text/csv,..." + a.download = "relatorio.csv" deixa o usuario salvar um arquivo gerado sem servidor.
• Fixtures de teste: embutir imagens pequenas ou JSONs em arquivos de teste deixa a suite auto-contida.

Performance: quando data URI ajuda e quando atrapalha

Embutir um SVG de 200 bytes inline e quase sempre ganho — voce troca 200 bytes de payload por um handshake TCP e um round-trip TLS que pagaria de qualquer jeito. Embutir uma hero image de 200KB e quase sempre perda: incha HTML/CSS, impede que o browser cacheie a imagem separadamente e bloqueia o first paint.

Regras praticas:

• Inlinar assets menores que ~2KB. Acima disso, usar URL real com loading="lazy".
• Preferir SVG percent-encoded a SVG em Base64 — os dois funcionam, mas percent-encoded sai ~30% menor em payloads textuais.
• Nunca inlinar nada que deva ser cacheado entre paginas (logos, sprites, web fonts).
• Olhar o limite do browser: Chrome aceita ate ~2MB por data URL; Safari antigo era bem mais restrito.

Seguranca e CSP

Data URIs podem ser vetor de XSS e phishing: data:text/html renderiza markup arbitrario, e historicamente atacantes usaram URLs data: em campanhas de phishing para hospedar telas de login falsas sem precisar registrar dominio. Mitigacoes:

• CSP: restringir data: por diretiva. Uma politica comum libera img-src 'self' data: mas bloqueia frame-src data: e object-src data:.
• Chrome e Firefox bloqueiam navegacao top-level para data:text/html desde 2018 para conter phishing.
• Iframes sandboxed: quando voce realmente precisa renderizar data:text/html arbitrario, isole com sandbox="allow-scripts" sem allow-same-origin.

Clientes de email e a alternativa cid:

O Outlook (especialmente Outlook 2007-2019 com o Word como renderer) tira muitos data: URIs em corpos HTML de email, o que quebra logos e graficos inline. A alternativa portavel para email e o esquema cid: (RFC 2392), que referencia um anexo MIME pelo Content-ID. Provedores modernos de email transacional (Postmark, SendGrid, AWS SES) cuidam do wrapping cid: automaticamente.

Tooling

• DevTools do browser: cole qualquer data URI na barra de endereco — o browser renderiza nativamente.
• Node.js: Buffer.from(payload).toString('base64') para codificar; npm dataurl e data-urls para parsing completo.
• Webpack / Vite: o tipo de modulo asset/inline emite data URIs automaticamente para assets abaixo de um threshold.
• Bash: base64 -w 0 image.png no Linux, base64 -i image.png no macOS.

FAQ

Data URIs sao cacheaveis? Nao independentemente. Sao cacheados junto com o documento que os contem, mas o browser nao consegue reusar entre paginas ou sites.

Qual o tamanho maximo? A especificacao nao impoe limite, mas os browsers sim. Chrome e Firefox aguentam ate ~2MB com folga; Safari historicamente cortava antes. Para portabilidade, considere ~32KB como limite seguro.

Data URIs sao seguros? Sao inertes em contexto de imagem, fonte e CSS. Para text/html e application/javascript executam como codigo — use restricoes data: em CSP e iframes sandboxed ao renderizar conteudo nao confiavel.

Quando preferir percent-encoded em vez de Base64? Em payloads textuais como SVG e JSON — percent-encoded costuma sair 20-30% menor. Base64 ganha em dados binarios (PNG, JPEG, fontes), onde percent-encoding explodiria o tamanho.

Esta ferramenta envia o data URI para um servidor? Nao. O parsing e a validacao rodam inteiramente no navegador. Nada e enviado ou registrado.