Comprendre data:image/png;base64: le wrapper et les octets

data:image/png;base64, est un préfixe, pas une image complète. Il introduit une ressource en ligne : le schéma est data, le type de média déclaré est image/png et le marqueur indique que la charge utile suivante utilise Base64. La virgule est la frontière entre les métadonnées et les données.

Lire la structure

data:[media-type][;base64],payload

data:text/plain;base64,SGVsbG8=
data:text/plain,Hello%20world

Le premier exemple représente le texte Hello via Base64. La seconde utilise plutôt le codage en pourcentage. Un analyseur Data URI doit inspecter les métadonnées avant de choisir un décodeur. L'envoi du URI complet à un décodeur Base64 brut échoue car les deux points, le point-virgule et la virgule ne sont pas des caractères de charge utile.

Divisez à la première virgule, pas à chaque virgule. Les données restantes peuvent elles-mêmes contenir des virgules, notamment dans un texte non-Base64 URI. Des paramètres facultatifs de type de support peuvent apparaître avant le marqueur Base64. Lorsque le type de média est omis, le format de données URL a un type de texte et un jeu de caractères par défaut ; cette valeur par défaut ne transforme pas les octets binaires arbitraires en texte lisible.

Une étiquette MIME est une revendication

N'importe qui peut placer image/png dans le préfixe. L'étiquette ne prouve pas que les octets forment un PNG. Comparez la signature, puis demandez à un véritable décodeur d'image de charger le résultat. De même, un en-tête PDF n'est qu'un indice de reconnaissance ; un analyseur PDF complet peut toujours rejeter le document.

Changer image/png à image/jpeg ne convertit pas l'image. La conversion signifie décoder l’image source et encoder un nouveau fichier au format de destination. Cela peut modifier la transparence, les métadonnées, la qualité et la taille. Conservez l’original lorsque ces différences sont importantes.

Récupérer la ressource sans l'exécuter

Analysez et inspectez d’abord. Le texte peut être affiché sous forme de texte, tandis que les images raster prises en charge peuvent être prévisualisées dans un élément d'image. Évitez d’insérer un balisage arbitraire HTML ou SVG dans le document. Une donnée URL peut représenter un contenu actif ainsi qu'une image, son caractère autonome ne constitue donc pas une garantie de sécurité.

Pour un téléchargement de fichier, conservez les octets décodés et utilisez une extension raisonnable basée sur les informations de format confirmées. Pour un rapport de diagnostic, affichez séparément le type déclaré et le type détecté. Cela rend les disparités visibles au lieu de les cacher derrière une icône de fichier rassurante. La syntaxe des données URL et ses valeurs par défaut sont décrites dans MDN : URL de données.