Verificar se o conjunto de caracteres Base64 é uma imagem

Question

Tenho uma codificação de dados denominado Base64 neste formato abaixo:

R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8
  [...]

Para saber se esta sequencia é um Base64 válido, estou usando este código abaixo, no qual me basiei nesta resposta do SOen:

function isBase64(str) {
    try {
        return btoa(atob(str)) == str;
    } catch (err) {
        return false;
    }
}

Logo a seguir, tenho um exemplo de imagem usando o Base64 no atributo src do componente img:

Gostaria de saber se através deste conjunto de caracteres é possível validar se o Base64 é uma imagem ou é apenas um texto? Se sim, como?

function isImageBase64(str) {
    try {
        ...
    } catch (err) {
        ...
    }
}

João Machado · Answer

Atenção: Dentro da mesma RFC poderá haver sintaxe alternativa, opcional ou ser interpretada de forma diversa. Implementações diferentes poderão refletir resultados diferentes embora as aplicações abrangidas pelo HTML5/5.1 tenderem a uniformizar os resultados obtidos. Exemplo ao usar a primeira função que aparece na pergunta: function isBase64(str) { try { return btoa(atob(str)) == str; } catch (err) { return false; } } // Retorna verdadeiro mas poderia ser falso // (RFC 4668, secção 3.2, 'Padding of Encoded Data') isBase64('YQ=='); // Retorna um falso negativo // (Padding '=' é opcional) isBase64('YQ'); // Retorna um falso negativo // (É válido a utilização de espaços. // O descodificador atob() ignora-os.) isBase64('Y Q'); // Retorna um falso negativo // (É válido a utilização de quebras linha aleatórias, incluindo separadores CR+LF. // O descodificador atob() ignora-os.) isBase64('YnQ'); // btoa(atob('YQ')) == btoa(atob('YQ==')) // true btoa(atob('Y Q')) == btoa(atob('YQ')) // true btoa(atob('YnQ')) == btoa(atob('YQ')) // true "Validar se o Base64 (data URL) é uma imagem ou é apenas um texto?" Atributo src de um elemento HTML 'IMG'. (async () => { // ... isImageBase64 = (str) => new Promise( resolve => { let img = new Image( ); img.addEventListener( 'error', ( ) => resolve( false ) ); img.addEventListener( 'load', ( ) => resolve( /^data:.*;base64,/.test( str ) ) ); img.src = str; }); alert( await isImageBase64( testSrc.src ) ); // ... })();

Nota: A função seguinte não valida realmente uma imagem. Apenas indica se os dados têm uma estrutura semelhante a uma imagem. isImageBase64 = (str) => { let r; try{ let data = atob( str.replace(/^data:.*,/,'') ); r = data.match( /^GIF8[x00-xFF]+x3B$/ )? true /*GIF*/ : data.match( /^xFFxD8xFF[x00-xFF]+xFF[xD8-xD9]{1}$/ )? true /*JPEG*/ : data.match( /^x89PNG[x00-xFF]+IEND/ )? true /*PNG*/ : data.match( /^II*x00(?!x10x00{3}CR)|^MMx00*/ )? true /*TIFF*/ : data.match( /^(?:BM|BA|CI|CP|IC|PT)[x00-xFF]{4}x00{4}/ )? true /*BMP*/ : data.match( /^RIFF[x00-xFF]{4}WEBP/ )? true /*WEBP*/ : data.match( /s*$/ )? true /*SVG*/ : data.match( /^x00{2}x01x00/ )? true /*ICO*/ : false; } catch( e ) { r = false } return r; } alert( isImageBase64( testSrc.src ) );

Nota: Observe a função seguinte dentro do evento window.onload, caso contrário poderá não funcionar. Atenção: Espaços e quebras de linha na codificação base64, permitidos por serem ignorados pelo descodificador, poderão gerar erros ou falsos negativos durante a avaliação querySelector(). window.onload = () => { // ... isImageBase64 = (str) => { let r; try{ r = document.querySelector(`img[src='${str}']`).complete && /^data:.*;base64,/.test(str); } catch(e) { r = false; } return r; } alert( isImageBase64( testSrc.src ) ); // ... }

Leonardo Getulio · Answer

Daria sim, você vai ter de decodificar e validar o cabeçalho. No caso do seu base64 de exemplo, ele decodifica em algo próximo de GIF89a=D,3uXg3̿ϟ [...], então você pode validar se existe GIF no início do texto, e faz isto com JPEG, PNG, etc.

Answered by Leonardo Getulio on November 30, 2021

Verificar se o conjunto de caracteres Base64 é uma imagem

2 Answers

Add your own answers!

Ask a Question