🧪 Dev

Parser de Data URI

Quebra uma data: URI em mediatype, parâmetros, flag base64 e payload. Mostra o tamanho final em bytes do conteúdo decodificado.

data: URI

Data URI: o arquivo que viaja dentro do endereço

Um data URI carrega o conteúdo no próprio endereço, em vez de apontar para onde buscá-lo. A forma vem da RFC 2397 e tem quatro partes: o esquema data, o tipo de mídia, o marcador base64 quando presente, e depois da vírgula o conteúdo. Cole o valor e a página separa tudo, informa o tamanho real em bytes e mostra o conteúdo quando é texto.

Um detalhe que rende economia real: base64 não é obrigatório. Sem ele, o conteúdo vai percent-encoded, e para carga com muito caractere ASCII — um SVG, por exemplo — isso costuma sair menor, porque base64 infla tudo em um terço enquanto o percent-encoding só paga pelos caracteres que precisam escapar. Para imagem binária a conta se inverte e base64 ganha.

A limitação a ter em mente é o cache. Como os bytes fazem parte do documento, eles descem de novo a cada carregamento, sem entrada própria no cache do navegador — o que era um bom negócio quando cada requisição custava uma conexão, e passou a ser mau negócio com HTTP/2 multiplexando. Além disso navegar para um data URI na barra de endereço está bloqueado nos navegadores desde 2017, porque era vetor de phishing.

Perguntas frequentes

Qual o tipo de mídia padrão?

Quando o campo é omitido, a norma manda assumir text/plain com charset US-ASCII. Isso significa que um data URI sem tipo carregando UTF-8 pode ser interpretado errado, então vale sempre declarar o charset em conteúdo de texto que passe do ASCII.

Existe limite de tamanho?

A norma não fixa nenhum, mas cada navegador tem o seu, e o contexto muda o limite: atributo de imagem, folha de estilo e barra de endereço não se comportam igual. Como regra prática, data URI compensa até alguns quilobytes — acima disso, servir o arquivo e deixar o cache trabalhar é melhor em quase todo cenário.

Preciso liberar data: na política de segurança?

Precisa, e é o esquecimento mais comum: a política de conteúdo bloqueia data URI por padrão nas diretivas que importam. Para imagem inline é preciso liberar data: em img-src. Evite liberar em script-src, porque aí a política deixa de proteger contra injeção de script.

Ferramentas Relacionadas

📋

Parser de Content-Type

Decompõe um header Content-Type em mediatype, charset, boundary e demais parâmetros. Útil para depurar APIs e uploads.

📦

Parser multipart/form-data

Cole um body multipart/form-data com seu boundary e veja cada parte (Content-Disposition, filename, Content-Type, tamanho).

🍪

Parser de Cookie HTTP

Cole um header Set-Cookie e veja nome, valor, Domain, Path, Expires, Max-Age, HttpOnly, Secure, SameSite separadamente. Tudo no navegador.

🔑

Parser de Authorization

Identifica o esquema (Basic, Bearer, Digest) de um header Authorization e extrai o payload, decodificando Basic em base64.

🔍

Decodificador Pix

Decodifica BR Code Pix (texto começando com 0002...) extraindo chave, valor, beneficiário, cidade e identificador.

🔑

Gerador de Basic Auth

Gere o header HTTP `Authorization: Basic <base64>` a partir de usuário e senha. Útil para testar APIs com basic auth via curl, Postman ou fetch. Tudo no navegador.