Dane ukryte w kodzie (X)HTML
2009-06-08, Poniedziałek 10:34:36 +0200, autor Karol „Zal” Zalewski, licencja LPRCTKC
Zdarza się czasem, iż chcielibyśmy umieścić na stronie internetowej znajdującej się na specyficznej platformie (np. platforma blogowa pokroju Joggera) dane (np. obraz w formacie JPEG, czy też PDF-a), a nie mamy pod ręką odpowiedniego ku temu hostingu. Ewentualnie ochoty na zabawę z interfejsem takiego narzędzia (np. googlowa Picasa). W takiej sytuacji wystarczy wykorzystać jedną z możliwości, jaką daje URI. Wystarczy, iż zakodujemy wybrany plik przy pomocy kodowania Base64 np. pod Linuksem:
base64 obraz.jpg > base64.txt
A następnie zawartość takiego pliku (w przykładzie jest to base64.txt) kopiujemy do następującego kodu:
<img src="data:image/jpg;base64,KOD_BASE64_DANYCH" alt="Tytuł obrazka" /> <a href="data:image/jpg;base64,KOD_BASE64_DANYCH">LINK</a>
Jak sami widzicie, nie musi to być jedynie JPG. Istnieje możliwość umieszczenia niemal każdych danych, o ile zna się ich typ MIME. Można to wykorzystać wszędzie, gdzie dane nam jest skorzystać z URI w celu określenia lokalizacji zasobu. Jakie płyną z tego korzyści?
- możliwość umieszczania danych w plikach HTML (np. na platformach blogowych) bez potrzeby martwienia się o hosting,
- te same dane można umieszczać w komentarzach, czy też postach na forach/blogach itp. umożliwiających podawanie URI,
- daje to interesującą możliwość ominięcia gorzej zaprojektowanych zabezpieczeń w niektórych serwisach.
Poniżej widać przykład takiego rozwiązania zastosowanego w serwisie Jogger. Ze względu na ograniczenie długości wpisów udało mi się upchnąć jedynie około 32 KiB danych. Uprzedzam również, iż ze względu na wykorzystanie Textile Lite, wklejanie kodu w Base64 do komentarzy nie daje oczekiwanego rezultatu.
2009-06-08, Poniedziałek 10:37:48 +0200
Nie ma to jak trampek wkomponowany w fETIszowe zdjęcie. :P ;)
2009-06-08, Poniedziałek 10:46:31 +0200
@Alan: Cudne, prawda? :D
A tak serio, jest to pierwsze lepsze zdjęcie, jakie znalazłem w dokumentach, a że przy okazji takie egocentryczne to już nie moja wina ;]
2009-06-08, Poniedziałek 10:47:56 +0200
@Zal: "nie moja wina, że mam same takie" ;D
2009-06-08, Poniedziałek 10:54:26 +0200
To ukrywanie danych w kodzie to taki lekki przerost formy nad treścią. Za dużo i tak się tam nie upchnie, a prędzej już platformy blogowe udostępniają trochę miejsca. Chociaż fakt, że mogłoby go być więcej. Ciekawe czy zwiększenie limitu danych na joggerze na opłatą miałoby sens?
2009-06-08, Poniedziałek 10:55:18 +0200
@Matthew: 10x więcej zdjęć za SMSa? Z czym mi się to kojarzy...? :>
2009-06-08, Poniedziałek 10:58:01 +0200
@Alan: i tak i nie (i tak płacisz sms'em za założenie konta na joggerze ;P). Chodzi o zwiększenie limitu danych w ogóle. Zamiast 10MB np. 100. Mi by się takie coś przydało, bo bym nie musiał hostować obrazków do wpisów na dropboxie. Chociaż mogą wyjść z tego ciekawe rzeczy. Takie opóźnione ładowanie daje szansę że czytelnik zobaczy alta obrazka. ;D
BTW: Zal oprócz swoich zdjęć ma jeszcze kilka giga zdjęć różnych (rysowanych?) dziewcznyn. ;]
2009-06-08, Poniedziałek 10:58:57 +0200
@Matthew: Z drugiej zaś strony spójrz na to nieco inaczej - na Joggerze masz obecnie 1MB. W przypadku wykorzystania URI i Base64 bez problemu możesz wcisnąć około 32kB (może i więcej, nie sprawdzałem). Po 30 wpisach masz już to, samo, co w przypadku 1MB.
Ale oczywiście, jest to mniej komfortowe rozwiązanie, niż linkowanie do osobnego pliku.
BTW - moja LP nie ma imienia zakończonego literami PNG ;D
2009-06-08, Poniedziałek 11:19:44 +0200
Data: URL - załączanie plików w dokumencie via Riddle ;]
2009-06-08, Poniedziałek 11:38:00 +0200
@Wasacz: Innymi słowy - odgrzałem starego kotleta? ;]
2009-06-08, Poniedziałek 11:56:09 +0200
Hehe, nawet exif bezproblemowo przemycilo w zdjeciu:
Orientacja obrazka: 1
Data i czas modyfikacji pliku: 2009:06:08 09:52:36
Opis obrazka:
Wykonano za pomocą urządzenia: Sony Ericsson
Model urządzenia: K510i
Oprogramowanie: GIMP 2.6.6
2009-06-08, Poniedziałek 11:58:15 +0200
@hunter: Nie miało innego wyjścia - toż to jest cały plik JPG zakodowany w Base64 ;]
2009-06-08, Poniedziałek 12:13:19 +0200
http://gray-world.net/poc_httpostng.shtml
2009-06-08, Poniedziałek 13:33:30 +0200
Pomijamy jakże istotny fakt, że takie dane nie są cachowane jak zwykłe zdjęcie i nieco zwiększa to objętość strony? :>
2009-06-08, Poniedziałek 13:40:57 +0200
@BTM: Jasnym jest, że nie jest to rozwiązanie, które można stosować codziennie i do każdego rodzaju stron. Jest to raczej "sztuczka" o której nie każdy ma pojęcia, a która może okazać się przydatna w pewnych sytuacjach.
Prawda? ;]
2009-06-08, Poniedziałek 13:44:32 +0200
Prawda, ale wydaje mi sie, że jeżeli ktoś się zajmuje webdeveleoperką na poważnie, to te "sztuczkę" zna (chociażby Acid2 ją testuje), a jak nie zajmuje się na poważnie, to do szczęścia mu nie potrzebne ;-)
2009-06-08, Poniedziałek 15:26:30 +0200
W UserJS/UserCSS się to bardzo przydaje, btw.
2009-06-08, Poniedziałek 18:17:23 +0200
u riddla podoba mi się ten przykład z używaniem tego tricku w arkuszach css...
@btm, myślę że jak ktoś na poważnie się zajmuje developerką to nie potrzebuje takich tricków - to jest ciekawostka - może przydatna, ale zawsze można się bez niej obyć - zwykle może nawet lepiej ;)
2009-06-08, Poniedziałek 18:40:33 +0200
Pomijając dotychczasowe uwagi — myślę że słowo „ukryte” nie jest najlepszym możliwym. Ideą Data URI nie jest ukrywanie jakichś danych, a ich dołączenie do tekstu. Jest pomocne np. w przypadku gdy chce się komuś wysłać gotową stronę, a z jakiegoś powodu nie można wysłać archiwum zawierającego całą strukturę katalogów. I z tego co mi wiadomo właśnie o to chodzi — o możliwość zapisania całej strony, włącznie z grafiką, w jenym pliku HTML.
2009-06-08, Poniedziałek 18:47:59 +0200
@Minio: Polskojęzyczny odpowiednik "embed" byłby tutaj bardziej odpowiedni - "Dane osadzone w kodzie (X)HTML". Jednak przyznaję się bez bicia, że słowa "ukryte" użyłem z pełną premedytacją ;]
2009-06-08, Poniedziałek 18:49:35 +0200
„Osadzony” jest ok.
Ale skoro „ukryty” został użyty z pełną świadomością, to nie mnie decydować o jego poprawności czy adekwatności.
2009-06-08, Poniedziałek 20:43:53 +0200
Do Joggera, gdzie limit miejsca na oddzielne pliki jest śmiesznie niski - idealne. A teraz zablokują Ci konto z powodu abuse. ;>
2009-06-08, Poniedziałek 20:55:27 +0200
To byłoby nawet zabawne, gdyby nie to, iż jest całkiem bliskie rzeczywistości.
Podejrzewam, że większość wpisów idących do bazy danych nie ma więcej, niż 1-2 KiB. Wedle moich testów w notce można upchać do okolic 63 KiB przy czym należy pamiętać, że wykorzystanie Base64 powiększa rozmiar danych o 33%. Zatem bez problemu można umieszczać dane o rozmiarze do około 47 KiB w stanie "surowym". Niewiele, ale już przy około 20 wpisach otrzymujemy więcej, niż w przypadku 1 MB od Joggera.
Przy okazji nadużywamy bazy danych, zwiększamy transfer między Joggerem i światem itp. Dobry motyw do otrzymania banana :> Przy masowym wykorzystywaniu mogłoby to faktycznie wpłynąć negatywnie na pracę serwisu. Dobrze rozumuję?
2009-06-08, Poniedziałek 21:19:17 +0200
"Świadome lub nieświadome powodowanie niestabilności systemu i usług związanych z serwisem za pomocą mechanizmów informatycznych." ;)
2009-06-09, Wtorek 09:13:16 +0200
http://projectmouse.org/base64+image+file+encoder.html
2009-06-10, Środa 03:10:40 +0200
Ciekawy artykuł, nigdy się nad tym nie zastanawiałem. Przyda się na pewno takowa wiedza :]