Que sont les URL de données

Une URL de données est un schéma d'URI qui fournit un moyen d'intégrer des données dans un document, et il est couramment utilisé pour incorporer des images dans HTML et CSS

introduction

Une URL de données est un schéma d'URI qui permet d'intégrer des données dans un document HTML.

Supposons que vous souhaitiez intégrer une petite image. Vous pouvez suivre la méthode habituelle, le télécharger dans un dossier et utiliser leimgtag pour que le navigateur le référence depuis le réseau:

<img src="image.png" />

ou vous pouvez l'encoder dans un format spécial, appelé URL de données, qui permet d'incorporer l'image directement dans le document HTML, afin que le navigateur n'ait pas à faire une demande distincte pour l'obtenir.

Les URL de données peuvent gagner du temps pour les petits fichiers, mais pour les fichiers plus volumineux, il y a des inconvénients dans l'augmentation de la taille du fichier HTML, et ils sont particulièrement un problème si l'image se recharge sur toutes vos pages, car vous ne pouvez pas profiter de la mise en cache du navigateur. capacités.

En outre, une image encodée en tant qu'URL de données est généralement un peu plus grande que la même image au format binaire.

Ils ne sont pas très pratiques si vos images sont fréquemment éditées, car chaque fois que l'image est modifiée, elle doit être à nouveau encodée.

Cela dit, ils ont leur place sur la plateforme Web.

À quoi ressemble une URL de données

Une URL de données est une chaîne commençant pardata:suivi du format de type MIME. Par exemple, une image PNG est de type mimeimage/png.

Ceci est suivi d'une virgule puis des données réelles.

Le texte est généralement transféré en texte brut, tandis que les données binaires sont généralement encodées en base64.

Voici un exemple de l'apparence d'une telle URL de données:

<img src="data:image/png,%89PNG%0D%0A..." />

Etvoici une petite version de l'image de bannière de cet article encodée dans un lien

Voici à quoi ressemble une URL de données encodée en base64. Remarquez que ça commence pardata:image/png;base64:

<img src="data:image/png;base64,iVBORw0KGgoAA..." />

Etvoici une petite version de l'image de bannière de cet article en base64 encodée dans un lien.

Ce site dispose d'un très joli générateur d'URL de données:https://dopiaza.org/tools/datauri/index.phpque vous pouvez utiliser pour transformer n'importe quelle image de votre bureau en une URL de données.

Les URL de données peuvent être utilisées partout où une URL peut être utilisée, comme vous l'avez vu, vous pouvez l'utiliser pour les liens, mais il est également courant de les utiliser en CSS:

.main {
    background-image url('data:image/png;base64,iVBORw0KGgoAA...');
}

Prise en charge du navigateur

Elles sontpris en charge dans tous les navigateurs modernes.

Sécurité

Les URL de données peuvent encoder n'importe quel type d'informations, pas seulement des images, et sont donc accompagnées de leur ensemble d'implications en matière de sécurité.

DeWikipédia:

L'URI de données peut être utilisé pour créer des pages d'attaque qui tentent d'obtenir des noms d'utilisateur et des mots de passe d'utilisateurs Web sans méfiance. Il peut également être utilisé pour contourner les scripts intersites (XSS), intégrant entièrement la charge utile de l'attaque dans la barre d'adresse et hébergée via des services de raccourcissement d'URL plutôt que d'avoir besoin d'un site Web complet contrôlé par un tiers.

Vérifiercet article du blog Mozilla Firefoxpour plus d'informations sur la manière dont les URL de données peuvent être utilisées par des utilisateurs malveillants pour faire de mauvaises choses et sur la manière dont le navigateur Firefox atténue ces risques.

Les URL de données sont définies dansRFC 2397.