Szukaj na blogu

Jeden obrazek na 2 serwerach - sposób na nieładujące się obrazki

Bywa czasem, że umieszczamy na stronie obrazki z innego serwera. Są nawet specjalne serwisy internetowe specjalizujące się w przechowywaniu obrazków które można gdzieś na innej stronie hotlinkować.

Niestety takie przechowalnie obrazków, mają w zwyczaju wyłączać swoje serwery bez ostrzeżenia, usuwać nasze obrazki gdy im się znudzą albo co jeszcze gorsze podmieniać nasze obrazki na inne np:

tu miał być motylek

Jak więc zabezpieczyć się przed tym aby któregoś dnia na naszej stronie nie pojawiło się coś takiego?

Wpadłem na pomysł aby umieszczając obrazek na stronie podawać jego dwa adresy, podstawowy tak jak się go normalnie podaje i zapasowy który zostanie użyty gdy przeglądarce nie uda się załadować obrazka z podstawowego adresu.

<img src="podstawowy adres" data-src="zapasowy adres">

Wydaje się mi to dość eleganckim rozwiązaniem. Czytelne, nieskomplikowane, a podanie dodatkowego adresu wymaga tylko odrobinę więcej pracy przy tworzeniu strony.

Do tego aby to zadziałało potrzeba jeszcze dodać gdzieś na stronie niewielki skrypt:

<script>
var obrazki=document.getElementsByTagName("img");
for (i=0;i<obrazki.length;i+=1)
 if (obrazki[i].hasAttribute("data-src"))
   obrazki[i].setAttribute("onerror",'this.setAttribute("src",this.getAttribute("data-src"))');

function check_all_img()
{
 var obrazki=document.getElementsByTagName("img");
 for (i=0;i<obrazki.length;i+=1)
  if (obrazki[i].hasAttribute("data-src"))
   if (obrazki[i].clientHeight < 201)
    obrazki[i].setAttribute("src",obrazki[i].getAttribute("data-src"));
}
window.onload=check_all_img;
</script>
 Jak to działa?

Po pierwsze dodaje to do każdego obrazka który posiada atrybut data-src obsługę zdarzenia onerror które odpowiada za błędy przy ładowaniu.

Po drugie po załadowaniu strony sprawdza wielkość wszystkich obrazków z atrybutem data-src jeśli są zbyt małe (niższe niż 201px) znaczy, że ktoś nasze duże zdjęcie podmienił na mały obrazek z logo serwisu (albo tak jak w przykładzie z napisem Forbidden) i trzeba załadować właściwy obrazek z alternatywnego źródła. Jeśli nasze własne obrazki również są bardzo małe należy dopasować do nich tą wartość. Ale myślę, że jak się już hotlinkuje obrazki z zewnętrznych serwerów to raczej są one duże (bo małe można wkleić inline w kodzie strony).

Dlaczego akurat taka nazwa data-src. Początkowo chciałem to nazwać po prostu src2, przeglądarce nie robi to różnicy, nazwa może być dowolna byle by była wolna, ale walidatorowi się taki kod z nieznanymi mu atrybutami nie podoba. Aby kod strony został uznany za poprawny html nazwy wymyślnych przez nas nowych atrybutów powinny posiadać przedrostek data-


Mam jeszcze alternatywną wersję skryptu dla tych co nie chcą albo nie mogą korzystać z window.onload (czasy można zmniejszyć według własnego uznania, tutaj celowo są wysokie aby było widać kiedy zepsuty obrazek podmieniany jest na zdjęcie motyla)

6 komentarzy:

  1. Świetny skrypt ;)

    OdpowiedzUsuń
  2. Witam,
    nie widziałem gdzie to napisać, więc napiszę tutaj.

    Potrzebuję sposobu na ominięcie napisanego w javascript skryptu o nazwie Evercookie, bez wyłączania javascript w przeglądarce.

    Strona twórcy:
    http://samy.pl/evercookie/

    Inne strony:
    http://en.wikipedia.org/wiki/Evercookie
    http://niebezpiecznik.pl/post/niezniszczalne-ciasteczka-evercookie/

    Po powyższej lekturze moje wyjaśnienia pewnie nie są potrzebne, ale napiszę.

    Po wejściu na stronę skrypt ma za zadanie identyfikować nasz komputer przy kolejnych wejściach. Dane o naszym wejściu zapisywane są w systemie w kilkunastu miejscach (wypisanych na stronie twórcy) i nawet po usunięciu większości z nich ciastko odnowi się, gdy wykryje chociażby jedno.

    Twórca dość szczegółowo opisał swój skrypt i zamieścił nawet przykład demonstrujący jego działanie oraz udostępnił go do pobrania, więc liczę, że uda się coś z tym zrobić.

    Wyjścia jakie widzę są dwa: usuwanie za każdym razem plików identyfikujących nasz komputer lub spowodowanie, aby chociaż część z tych plików nie zapisywała się w systemie.

    Nie ukrywam, że najlepsze by było jakieś zautomatyzowanie tych czynności, tworząc jakiś plik *.bat, który by to usuwał, ale opis gdzie i co pousuwać ręcznie też mnie usatysfakcjonuje.

    Z racji, że jest to dla mnie istotna sprawa, sposób na rozwiązanie tego problemu może być również pod system linux, tylko prosił bym wtedy o dokładny turtorial (liczę, że wystarczy wpisywanie odpowiednich komend) wraz z wskazaniem dystrybucji, którą należało by wybrać oraz czy może być w wersji live cd, a także wskazanie przeglądarki, która była by do tego najlepsza.

    Oczywiście wolał bym sposób pod Windowsa, ale przeczuwam, że pod Linuxem problem byłoby prościej pokonać.

    Proszę więc o odpowiedź, czy w ogóle da się to w jakiś prosty sposób zrobić.
    Pozdrawiam serdecznie

    OdpowiedzUsuń
    Odpowiedzi
    1. Zaciekawiło mnie to trochę, że aż przetestowałem różne przeglądarki

      W chrome wystarczyło wejść w ustawienia > pokaż zaawansowane > wyczyść dane przeglądarki > zaznaczyłem wszytko poza pierwszą kratką (bo nie chciałem tracić historii) i usunęło evercookie, nigdzie się nie zachowało.

      W operze musiałem kliknąć w 3 miejscach. Najpierw trzeba wejść w preferencje > zaawansowane, a potem kolejno 3 zakładki, ciasteczka zarządzaj ciasteczkami i tam usunąć, potem magazyn i dać wyczyść wszytko i na koniec zakładka historia i tam jest przycisk do opróżniania pamięci podręcznej (samej historii nie trzeba kasować). Dodam jeszcze, że operze pomogło to, że miała ustawione wczytuj wtyczki tylko na żądanie - bo gdyby nie to pewnie musiał bym jeszcze usunąć 4 rzecz - zawartość katalogu ~/.macromedia/Flash_Player

      Na koniec poszedł firefox, tu podobnie jak w operze trzeba wejść w preferencje > prywatność > wyświetl ciasteczka a potem usuń wszystkie ciasteczka potem zakładka zaawansowane > sieć i kliknąć 2 przyciski "wyczyść teraz" przy pamięć podręczna i dane trybu offline. Ponieważ firefox ładuje flasze bez czekania na kliknięcie i jednocześnie nie kontroluje tego co zapamiętują tak jak robi to chrome trzeba jeszcze usunąć zawartość katalogu ~/.macromedia/Flash_Player

      Czy warto pisać do tego skrypt? Na pewno nie do chrome, ono ma gotowy automat który wszystko czyści. Być może do opery i firefoksa aby nie trzeba było klikać w kilku miejscach.
      wyglądało by to jakoś tak:
      rm ~/.opera/cookies4.dat
      rm -r ~/.opera/application_cache/*
      rm -r ~/.opera/cache/*
      rm -r ~/.opera/opcache/*
      rm -r ~/.opera/pstorage/*
      rm -r ~/.macromedia/Flash_Player/*

      nie wiem tylko czy to nie kasuje niepotrzebnie za dużo

      Usuń
    2. W przypadku Chrome usunięcie danych przeglądarki prawdopodobnie (na 99%) nie rozwiązuje mojego problemu. Operę i Firefoxa będę jeszcze testował, ale chyba też nic z tego nie będzie.

      Wysłałem Ci maila, gdzie dokładnie opisałem, co chce osiągnąć na adres:
      mar***@jabberpl.org
      Mam nadzieję, że jest aktualny.

      Jeżeli znajdziesz czas to przeczytaj i podpowiedz mi coś.

      Usuń
    3. Rozwiązuje - zresztą sam sprawdź. Pozbycie się tego „niezniszczalnego” ciasteczka naprawdę jest aż takie proste, zwłaszcza w chrome które ma własnego flasza i dzięki temu mamy kontrolę z jednego miejsca co zapamiętuje flasz i przeglądarka.

      marekd@jabberpl.org to nie jest adres pocztowy tylko JabberID (specjalnie taki podałem który nie jest jednocześnie emailem co by pocztowy spam nie przychodził a porozmawiać się da) jak chcesz wysłać zwykły list to patrz pierwszy wpis na blogu tam jest link i wskazówka.

      Usuń
  3. OK, mam nadzieję, że teraz wysłałem na prawidłowy adres.

    m****d*****@gmail.com

    To być może oprócz Evercookie zastosowane jest jeszcze coś innego? Może zapisywane są jeszcze jakieś informacje wewnątrz serwisu np. rozdzielczość ekranu, system lub przeglądarka?

    Tylko to by było dziwne, bo jak by nie było, nie używamy do tego logowania, ale możliwe, że tak jest.

    Jeśli mój mail doszedł, to pisz na mój adres.

    OdpowiedzUsuń