Visualize uma imagem Base64 com segurança no navegador

Uma visualização de imagem confiável tem duas tarefas separadas: decodificar a representação Base64 e decodificar o formato de imagem resultante. Uma string pode passar na primeira etapa e falhar na segunda porque o arquivo está truncado, rotulado incorretamente ou não é suportado pelo navegador. Mostre esses estados separadamente.

Mantenha um pipeline orientado a bytes

Remova um wrapper de dados URI reconhecido por meio de um analisador, valide o Base64 e obtenha um Uint8Array. Não roteie bytes de imagem por meio de um decodificador de texto. Se você quiser uma visualização local simples, coloque os bytes em um Blob e crie um objeto URL. Isso evita a montagem de outra string Base64 grande apenas para exibir o resultado.

// bytes is a validated Uint8Array; type comes from checked raster metadata.
async function previewRaster(bytes, type, imageElement) {
  const allowed = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
  if (!allowed.includes(type)) throw new Error('Unsupported raster preview type');
  const url = URL.createObjectURL(new Blob([bytes], { type }));
  try {
    imageElement.src = url;
    await imageElement.decode();
    return { width: imageElement.naturalWidth, height: imageElement.naturalHeight,
      dispose: () => URL.revokeObjectURL(url) };
  } catch (error) {
    URL.revokeObjectURL(url);
    imageElement.removeAttribute('src');
    throw error;
  }
}

Mantenha o objeto URL apenas enquanto for necessário

Chame a função de descarte retornada ao substituir ou remover a visualização. Visualizações repetidas sem limpeza retêm recursos do navegador. Não revogue um URL antes de uma imagem ser carregada e não reutilize um URL descartado para um download posterior. Se os downloads precisarem permanecer disponíveis, gerencie seu tempo de vida separadamente.

Use feedback real do decodificador de imagem

Uma assinatura de arquivo é apenas uma dica inicial. A etapa de decodificação do elemento de imagem verifica se o navegador pode realmente carregá-lo e expõe suas dimensões. Um erro aqui deveria indicar que a decodificação da imagem falhou, mantendo os bytes originais para inspeção ou download. Não deve substituir a entrada ou relatar que o alfabeto Base64 era inválido.

Aplique limites de bytes e dimensões antes de renderizações caras, sempre que possível. Um pequeno arquivo compactado pode descrever uma imagem muito grande. Evite tratar SVG como uma carga raster comum: é uma marcação estruturada com diferentes considerações de segurança. Nunca injete SVG ou HTML desconhecido diretamente na página para fazer uma visualização funcionar.

Finalmente, diferencie a visualização da conversão. Exibir um JPEG em um elemento de imagem não cria um PNG. A conversão requer desenhar uma imagem decodificada em uma tela e exportar o formato escolhido, com opções explícitas de qualidade e transparência. O wrapper Data URI é descrito em MDN: URLs de dados; o sucesso da visualização continua sendo uma verificação do formato do navegador, não uma certificação geral de segurança.