Limite de taille d'URL du protocole de données

Question

Y a-t-il une limite de taille pour les valeurs de schéma "data:" URL? Je m'intéresse aux limitations dans les navigateurs web populaires. En d'autres termes, quelle est la longueur maximale que data:image/jpg;base64,base64_encoded_data peut atteindre dans ![](data:image/jpg;base64,base64_encoded_data) ou background-image: url(data:image/jpg;base64,base64_encoded_data)?

Answer 1

Réponse courte : La limite des URI de données varie.

Il y a beaucoup de réponses. Comme la question a été posée il y a 5 ans, la plupart sont maintenant obsolètes en raison de leur obsolescence, pourtant cette question se retrouve en tête des résultats Google pour "limite des URI de données". Les URI de données sont désormais largement pris en charge et IE 7/8 n'est plus un navigateur pertinent. Il y a de nombreuses références ci-dessous car la réponse est aujourd'hui nuancée.

Limites des URI de données

La spécification des URI de données ne définit pas de limite de taille mais dit que les applications peuvent imposer les leurs.

• Chrome - 2 Mo pour le document actuel. Sinon, la limite est la limite de stockage en mémoire pour des blobs arbitraires : si x64 et PAS ChromeOS ou Android, alors 2 Go ; sinon, mémoire_physique_totale / 5 (source).
• Firefox - illimitée
• IE ≥ 9 & Edge - 4 Go
• Safari & Mobile Safari - ?

Alternatives

Une technologie avec une limite plus élevée (500 MiB dans Chrome) qui pourrait être une alternative pour votre cas d'utilisation est les URLs de blobs via URL.createObjectURL() en utilisant l'API URL avec des blobs via l'API File API. Un exemple de cela est fourni dans Using URL.createObjectURL().

Quelques autres alternatives comme mentionné dans How to write a file / give it to the user sont : FileSaver.js, StreamSaver.js, et JSZip.

Vous pouvez utiliser Modernizr pour détecter la prise en charge des URI de données de plus de 32 ko.

Questions connexes

Ces réponses sont à peu près les mêmes que cette question, mais je les mentionne pour vous faire gagner du temps à les lire une par une.

• obtenir la taille maximale d'un URI de données en JavaScript
• "Aw, Snap" lorsque l'URI de données est trop grand
• Quelle est la limite de taille d'une image Base64 DataURL?
• Quelle est la longueur maximale d'une URL dans différents navigateurs? Cette question concerne les URLs, pas les URI de données, mais il y a des réponses et des commentaires pertinents sur les URI de données.
• Est-il possible de détecter de manière programmable la limite de taille pour les URI de données?

Answer 2

J'ai simplement vérifié rapidement l'intégration de huit images Jpeg différentes d'une taille comprise entre 3 844 et 2 233 076 Octets.

Tous les navigateurs suivants ont correctement affiché chaque image sur mon système Windows 7 (64 bits) :

• Chromium 14.0.816.0
• Firefox 11.0
• Google Chrome 18.0.1025.142
• Internet Explorer 9.0.5 (64 bits)
• Opera 11.62
• Safari 5.1.5

Answer 3

De http://www.ietf.org/rfc/rfc2397.txt:

Le schéma d'URL "data:" est seulement utile pour de courtes valeurs. Notez que certaines applications qui utilisent des URLs peuvent imposer une limite de longueur ; par exemple, les URLs intégrées dans des ancres en HTML ont une limite de longueur déterminée par la déclaration SGML pour HTML [RFC1866]. La LITLEN (1024) limite le nombre de caractères pouvant apparaître dans une valeur littérale d'attribut unique, l'ATTSPLEN (2100) limite la somme de toutes les longueurs de toutes les spécifications de valeurs d'attribut qui apparaissent dans une balise, et le TAGLEN (2100) limite la longueur totale d'une balise.

Answer 4

J'ai lu que Safari a une limite de 128K pour les URI de données :

http://blog.clawpaws.net/post/2007/07/16/Storing-iPhone-apps-locally-with-data-URLs#c1989348

Et Chrome est de 2M :

http://code.google.com/p/chromium/issues/detail?id=44820#c1

Answer 5

La réponse de 2017 est: convertir les données en un blob avec la fonction: dataURLtoBlob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

Ensuite, créer l'URL du blob

var temp_url = window.URL.createObjectURL(blob);

Ensuite, l'utiliser dans une nouvelle fenêtre si nécessaire.

var redirectWindow = window.open('');
redirectWindow.document.write('')      

Fonctionne avec de gros fichiers sur chrome/firefox en 2017