====== Ukladanie binárnych súborov do HTML kódu ====== ~~META:date created = 2013-04-25~~ Už dlhšiu dobu riešim otázku, akým spôsobom skladovať binárne súbory (obrázky, resources apod.) patriace k Dokee dokumentu tak, aby nemuseli byť na disku uložené samostatne, ale priamo v dokumente. ===== Prvé myšlienky ===== Ako prvé mi napadlo kódovať binárne dáta pomocou base64, čo by bolo teoreticky bezproblémové, i keď base64-zakódované dáta zaberajú 4×viac miesta. Problém ale nastáva pri ich zobrazení---nebol som schopný prísť na nejaký rozumný spôsob, ako takéto dáta JavaScriptom predať do ''src'' atribútu '''' tagov. Našťastie mi dnes Juraj poslal sprievodcu Brnom vo formáte *.html :). Súbor mal veľkosť 13MB, čo bolo na prvý pohľad podozrivé: je to len *.mht súbor so zlou príponou, alebo vírus? Tak som si rovno pozrel zdroják... '''' tagy mali v ''src'' atribútoch nejaký binárny bordel začínajúci vždy prefixom data:image/jpeg;base64, a po chvíľke googlenia som zistil, že som našiel presne to, čo potrebujem---a síce **data: schému**, definovanú už v roku 1998(([[http://www.ietf.org/rfc/rfc2397|RFC2397]])), čo je výborné, lebo za ten čas ju plne podporuje dokonca aj Explorer :D. ===== Data: URL schéma ===== O čo teda ide? Schéma umožňuje uložiť ľubovoľné binárne alebo textové dáta priamo v linking-atribútoch (''src'' atribút '''' tagu, či ''href'' atribút '''' a '''' tagov). Definovaná je nasledovne: data:[][;base64], kde * '''' je definovaný ako ''[type "/" subtype] (";" parameter)*'' s defaultnou hodnotou ''text/plain;charset=US-ASCII'' * a výskyt '';base64'' značí, že dáta nasledujúce v '''' položké sú zakódované v base64. Pre uloženie bežného textu //Pink elephant// priamo do odkazu stačí text zakódovať klasickým URL-kódovaním text viď odkaz. Pre vloženie obrázku môžeme jeho binárne dáta zakódovať URL- alebo base64-kódovaním

ako tu:

alebo tu:

===== Sťahovanie vložených dát ===== S použitím vložených dát sa vynára dôležitá otázka: ako zabezpečiť, aby po kliknutí na odkaz prehliadač nezobrazil vložený obsah, ale ponúkol jeho stiahnutie? Pri binárnych súboroch generovaných pomocou PHP sa využívajú dva postupy: - použitím hlavičky ''Content-Disposition: attachment'', ktorá prikazuje prehliadaču považovať súbor za externú prílohu((definované v [[http://tools.ietf.org/html/rfc6266|RFC6266]])), - alebo hlavičkou ''Content-Type: application/octet-stream'', čím prehliadaču dávame najavo, že ide o tok binárnych dát neznámeho typu, takže by sa nemal snažiť ich otvárať. Prvý spôsob sa používa častejšie, je lepšie podporovaný a v podstate jediný správny, keďže druhý nie je sémanticky čistý---napokon, sťahovaný súbor môže byť aj čistý plaintext, čo určite //nie je// neznámy druh binárnych dát, ako tvrdíme hodnotou ''application/octet-stream''. Do príchodu HTML5 bolo možné pre sťahovanie vložených dát používať len druhý spôsob. Ak by sme predchádzajúci obrázok chceli ponúknuť na stiahnutie, zmenili by sme typ dát a kód by vyzeral nasledovne: obrázok viď obrázok. Problém s týmto prístupom je v prvom rade v tom, že---ako sme si už povedali---//nie je správny//. Druhý problém je technický: nemáme možnosť oznámiť prehliadaču, aký predvolený názov by mal ponúknuť pre súbor. V PHP bol problém vyriešený už spomínanou hlavičkou ''Content-Disposition'', ktorá obsahovala nepovinný atribút ''filename'', takže nastaviť predvolený názov súboru bolo jednoduché: header("Content-Disposition: attachment; filename="myFile.jpg"); Pre podobnú funkcionalitu v HTML sme si museli počkať na príchod verzie 5. ==== Novinky v HTML5 ==== HTML5 pridáva tagom '''' a '''' nový atribút ''download'', ktorého prítomnosť vraví prehliadaču, že má k obsahu, na ktorý odkaz smeruje, pristupovať ako k externej prílohe. To je ekvivalentné použitiu hlavičky ''Content-Disposition: attachment'' v PHP a zaručuje, že súbor nebude otvorený, ale ponúknutý užívateľovi na stiahnutie((viď špecifikáciu HTML5 na [[http://www.w3.org/TR/html5/links.html#downloading-resources|W3C]], prípadne zrozumiteľnejšie na [[http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download|WHATWG]])). Naviac v prípade, že atribútu ''download'' nastavíme nejakú hodnotu, bude táto prehliadačom považovaná za predvolený názov súboru (rovnako ako v PHP použitím atribútu ''filename'' s hlavičkou ''Content-Disposition''): obrázok viď obrázok. ===== Externé odkazy ===== * [[http://www.ietf.org/rfc/rfc2397|RFC2397: The "data" URL scheme]] * [[http://atunu.blogspot.cz/2006/12/embedding-binary-data-in-inline-url.html|Embedding binary data in an inline URL]] * [[http://software.hixie.ch/utilities/cgi/data/data|Online konvertor do data: schémy]] * Špecifikácia atribútu ''download'' v HTML: [[http://www.w3.org/TR/html5/links.html#downloading-resources|W3C]] a [[http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download|WHATWG]] (zrozumiteľnejšie) * [[http://stackoverflow.com/q/10473932/1148501|Stack Overflow: Force download of image from src=“data:image/jpeg;base64…”]] ~~socialite~~ {{tag>odborné XML HTML5 Dokee}} ===== Komentáre ===== ~~DISQUS~~