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 leimg
tag 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.
Téléchargez mon gratuitManuel du débutant JavaScript
Plus de didacticiels sur le navigateur:
- Quelques astuces utiles disponibles en HTML5
- Comment j'ai fait fonctionner un site Web basé sur un CMS hors ligne
- Le guide complet des applications Web progressives
- L'API Fetch
- Le guide de l'API Push
- L'API Channel Messaging
- Tutoriel pour les techniciens de service
- Le guide de l'API Cache
- Le guide de l'API de notification
- Plongez dans IndexedDB
- L'API Selectors: querySelector et querySelectorAll
- Chargez efficacement JavaScript avec différé et asynchrone
- Le modèle d'objet de document (DOM)
- L'API Web Storage: stockage local et stockage de session
- Découvrez comment fonctionnent les cookies HTTP
- L'API History
- Le format d'image WebP
- XMLHttpRequest (XHR)
- Un tutoriel SVG approfondi
- Que sont les URL de données
- Feuille de route pour apprendre la plate-forme Web
- CORS, partage de ressources inter-origines
- Travailleurs Web
- Le guide requestAnimationFrame ()
- Quel est le Doctype
- Utilisation de la console DevTools et de l'API de la console
- L'API de synthèse vocale
- Comment attendre l'événement DOM ready en JavaScript brut
- Comment ajouter une classe à un élément DOM
- Comment faire une boucle sur des éléments DOM à partir de querySelectorAll
- Comment supprimer une classe d'un élément DOM
- Comment vérifier si un élément DOM a une classe
- Comment modifier la valeur d'un nœud DOM
- Comment ajouter un événement de clic à une liste d'éléments DOM renvoyés par querySelectorAll
- WebRTC, l'API Web en temps réel
- Comment obtenir la position de défilement d'un élément en JavaScript
- Comment remplacer un élément DOM
- Comment accepter uniquement les images dans un champ de fichier d'entrée
- Pourquoi utiliser une version préliminaire d'un navigateur?
- L'objet Blob
- L'objet fichier
- L'objet FileReader
- L'objet FileList
- ArrayBuffer
- ArrayBufferView
- L'objet URL
- Tableaux typés
- L'objet DataView
- L'API BroadcastChannel
- L'API Streams
- L'objet FormData
- L'objet Navigateur
- Comment utiliser l'API de géolocalisation
- Comment utiliser getUserMedia ()
- Comment utiliser l'API Drag and Drop
- Comment travailler avec le défilement sur les pages Web
- Gestion des formulaires en JavaScript
- Événements de clavier
- Événements de souris
- Événements tactiles
- Comment supprimer tous les enfants d'un élément DOM
- Comment créer un attribut HTML à l'aide de JavaScript vanille
- Comment vérifier si une case est cochée à l'aide de JavaScript?
- Comment copier dans le presse-papiers à l'aide de JavaScript
- Comment désactiver un bouton à l'aide de JavaScript
- Comment rendre une page modifiable dans le navigateur
- Comment obtenir des valeurs de chaîne de requête en JavaScript avec URLSearchParams
- Comment supprimer tous les CSS d'une page à la fois
- Comment utiliser insertAdjacentHTML
- Safari, prévenez avant de quitter
- Comment ajouter une image au DOM en utilisant JavaScript
- Comment réinitialiser un formulaire
- Comment utiliser Google Fonts