URLs d'objets

Syntaxe

blob:<origin>/<uuid>

blob:

Le schéma de l'URL.

<origin>

L'origine du créateur de cette URL. Si l'origine du créateur est opaque, cette partie est définie par l'implémentation.

<uuid>

Un UUID.

Notes d'utilisation

Gestion de la mémoire

Chaque appel à createObjectURL() crée une nouvelle URL d'objet, même si vous en avez déjà créé une pour le même objet. Chacune d'elles doit être libérée en appelant URL.revokeObjectURL() lorsque vous n'en avez plus besoin. Tant qu'une URL d'objet reste active, l'objet sous-jacent ne peut pas être collecté par le ramasse-miettes et cela peut provoquer des fuites de mémoire.

Les navigateurs libèrent automatiquement les URLs d'objet lorsque le document est déchargé ; cependant, pour des performances et une gestion mémoire optimales, il est recommandé de les libérer explicitement dès que possible.

Toutefois, évitez de libérer l'URL d'objet trop tôt. Un anti-pattern courant est le suivant :

const url = URL.createObjectURL(blob);
img.src = url;
img.addEventListener("load", () => {
  URL.revokeObjectURL(url);
});
document.body.appendChild(img);

Révoquer l'URL blob immédiatement après l'affichage de l'image la rendrait inutilisable pour les interactions utilisateur·ice·s (clic droit pour enregistrer l'image, ouverture dans un nouvel onglet, etc.). Pour les applications de longue durée, il faut révoquer les URLs d'objet uniquement lorsque la ressource n'est plus accessible par l'utilisateur·ice (par exemple, lorsque l'image est retirée du DOM).

Partitionnement du stockage

L'accès aux ressources via des URLs blob est soumis aux mêmes restrictions que les autres mécanismes de stockage, c'est-à-dire le partitionnement d'état. Les URLs blob ont une origine de créateur associée (stockée dans l'URL elle-même) et ne peuvent être récupérées que depuis des environnements où la clé de stockage correspond à celle de l'environnement créateur. Les navigations vers une URL blob ne sont pas soumises à cette restriction, bien que les navigateurs puissent appliquer des mesures de confidentialité comme noopener pour les navigations inter-sites vers une URL blob.

Utilisation des URLs d'objet pour les flux média

Dans les anciennes versions de la spécification Media Source, attacher un flux à un élément HTML <video> nécessitait de créer une URL d'objet pour l'interface MediaStream. Ce n'est plus nécessaire, et les navigateurs retirent cette prise en charge.

Récupération avec l'en-tête Range

Les URLs blob prennent en charge la récupération avec l'en-tête Range pour demander un contenu partiel. Cela est particulièrement utile avec de gros blobs, car cela permet de ne récupérer que les parties nécessaires au lieu de tout le contenu. Pour un exemple, voir récupérer une plage depuis une URL blob.

Exemples

URLs blob valides

blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f64

Créer des URLs blob

Dans cet exemple, on crée d'abord un objet Blob à partir d'un <canvas>, puis une URL blob pour celui-ci, et enfin on attache l'URL à un élément HTML <img>.

const canvas = document.querySelector("canvas");
canvas.toBlob((blob) => {
  const img = document.createElement("img");
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
});

Spécifications

Compatibilité des navigateurs

Voir aussi

• Utiliser des fichiers dans des applications web
• Utiliser des URLs d'objet pour afficher des images
• La méthode API URL.createObjectURL()
• La méthode API URL.revokeObjectURL()
• Liste IANA des schémas URI ^(angl.)