fbpx
Kategorie
Porady Zrób to sam

Liczniki czasu w e-mailach

Czasem obojętnie przechodzimy obok wynalazków, których sposób działania wydaje się oczywisty. Gdy jednak przyjrzymy im się dokładniej, następuje konsternacja: „hej, to przecież nie może funkcjonować w ten sposób!”. Potem poznajemy faktycznie zastosowane koncepcje, stajemy się odrobinę mądrzejsi a świat odrobinę bardziej zrozumiały.

Taką właśnie ścieżkę przeszedłem, gdy uważniej spojrzałem na obrazkowy licznik mierzący czas do końca promocji w jakimś mailu reklamowym. Licznik był – jak sądziłem – animowanym GIF-em osadzonym w treści wiadomości. Tylko… jak to się działo, że zawsze pokazywał prawidłową wartość? Przecież obrazki załączone do e-maila pozostają niezmienne!

Obrazki w e-mailach

Gdy mowa o osadzaniu obrazków w e-mailach, najpierw przypomnijmy kilka faktów. Poczta elektroniczna pojawiła się we wczesnych latach siedemdziesiątych i przez długi czas obsługiwała jedynie wiadomości tekstowe w „gołym” standardzie ASCII, bez literek z ogonkami i bez załączników.

Wiadomości z dołączonymi plikami były przez długi czas domeną zamkniętych rozwiązań korporacyjnych, jak np. Lotus Notes. Do ogólnego użycia weszły w drugiej połowie lat dziewięćdziesiątych, gdy ustandaryzowano format MIME, wprowadzający dwie ważne nowinki. Po pierwsze – tekstowa część wiadomości mogła być formatowana za pomocą znaczników HTML, co pozwoliło na użycie kolorów, pogrubiania, wypunktowań, justowania bloków tekstu i tak dalej. Po drugie – w pojedynczej wiadomości dało się osadzić dowolne pliki, w tym graficzne.

Bardzo ważna jest kombinacja obu nowinek – przesyłka może zawierać plik graficzny, do którego odwołuje się tekst formatowany w HTML. Spójrzmy na poniższego e-maila wyświetlanego w webowym interfejsie Gmail:

Gdy zajrzymy do tej wiadomości w postaci pierwotnej, jaka rzeczywiście podróżuje przez internet, zobaczymy to:

Na początku mamy nagłówki z datą, nadawcą, odbiorcą oraz deklaracją, że jest to wieloczęściowa wiadomość MIME. Potem widzimy treść e-maila w postaci tekstowej (czerwona sekcja) – tam nie da się wstawić obrazka, edytor oznacza jedynie jego planowaną pozycję w treści, przekazując intencje autora.

Drugą sekcją (oznaczoną na zielono) jest treść wiadomości w formacie HTML. Jak poprzednio, tak i tu polskie literki zakodowane są jako quoted-printable. Ważniejszy jest jednak fragment podkreślony na żółto – jest to HTML-owa definicja obrazka, którego lokalizacją źródłową jest tajemniczy ciąg znaków cid:ii_l49y3sro0.

Odnajdujemy go w trzeciej sekcji (niebieskiej) – ów tekst to identyfikator obrazka załączonego do wiadomości. Wiemy stąd, że „obrazek.png” dołączony do e-maila pod identyfikatorem ii_l49y3sro0 jest tym, który pojawia się w sekcji zielonej. Oczywiście nie ma obowiązku osadzania obrazka w tekście, może on pełnić rolę „zwyczajnego” załącznika.

Base64

Chcesz dowiedzieć się, w jaki sposób obrazek GIF został zamieniony na ciąg literek i cyferek widoczny na powyższej ilustracji? Przeczytaj artykuł „Wysyłamy plik pocztówką czyli do czego służy kodowanie Base64”.

Osadzanie obrazka ze zdalnego serwera

W przywołanym przed chwilą przykładzie źródłem obrazka był załącznik w tej samej wiadomości. Tak jednak być nie musi – osadzony obrazek może pochodzić z dowolnego serwera podłączonego do internetu. Efekt uboczny? Niektóre programy pocztowe nie pokażą ich bez wyraźnej zgody użytkownika, bo za pomocą unikalnych nazw obrazków możliwe jest śledzenie aktywności odbiorcy, m.in. jego numeru IP czy godzin, w których czytuje pocztę.

Oto wiadomość od niezaufanego odbiorcy wyświetlana w programie Outlook 365. Widzimy, że program wyświetlił ostrzeżenie oraz wstrzymał ładowanie obrazków oznaczonych strzałkami.

Funkcja osadzania w e-mailu zegara odliczającego czas do jakiegoś wydarzenia korzysta właśnie z obrazków pobieranych ze zdalnego serwera. Aby się o tym przekonać, przygotowałem nowy mailing w Mailerlite i wstawiłem tam komponent „Countdown” („odliczanie”).

Gdy wysłałem sobie testowego maila, znalazłem w jego treści następujący fragment:

Wyróżniony link wygląda tak:
https://static.mailerlite.com/cbuilder/timer/2022-08-31%2023%3A59%3A59/light/Europe%2FVienna

Gdy otworzyłem go w oknie przeglądarki, zobaczyłem następującą animację:

Uwaga! Animowany licznik pokazany powyżej zawsze pokaże 81 dni, bo jest to obrazek pobierany z mojego serwera. On pozostanie niezmienny. Gdy jednak klikniesz ten link, przy każdym odświeżeniu zobaczysz odliczanie startujące od nieco niższej wartości.

Jeśli zaś czytasz ten tekst we wrześniu 2022 lub później, a licznik doszedł do zera, możesz zmienić rok i miesiąc w URL-u tak, aby wybiegał kilkanaście dni w przyszłość.

Animowany obrazek z licznikiem

Skoro wiemy, jak działa mechanizm odliczania czasu, możemy odpowiedzieć na kilka pytań dotyczących architektury takiego rozwiązania.

Dlaczego animowany GIF a nie Javascript?

Osadzony w HTML-u programik w Javascripcie oferowałby programistom i designerom dużo większą swobodę twórczą. Programy pocztowe nie pozwalają jednak na wykonanie kodu Javascript osadzonego w e-mailach, więc taka opcja jest wykluczona. Z perspektywy czasu można krzyknąć: na szczęście! Różnorodność ataków na użytkowników internetu jest zatrważająco duża, nie potrzebujemy ryzyk związanych ze wstrzykiwaniem złośliwych skryptów do poczty elektronicznej.

Jak to się dzieje, że taki licznik umie liczyć w nieskończoność?

Nie umie! Użyjmy programu Imagemagick, aby wszystkie klatki animacji zapisać w jednym obrazku

magick montage countdown.gif -coalesce -tile 7x -geometry "+4+4" -background gray -resize 150x singlepic.gif

Oto efekt:

Widzimy, że animacja zawiera jedynie 91 jednosekundowych kadrów. Tyle wystarcza, bo prawie nikt nie będzie się gapił w licznik dłużej, niż półtorej minuty. Ponadto przy każdym kolejnym otworzeniu maila obrazek załaduje się od nowa.

Czemu obrazek załaduje się od nowa?

Nagłówki HTTP wysyłane wraz z obrazkiem przez serwer zawierają następujące dyrektywy:

expires: Sat, 26 Jul 1997 05:00:00 GMT
last-modified: Sat, 11 Jun 2022 15:15:38 GMT
cache-control: no-store, no-cache, must-revalidate
cache-control: post-check=0, pre-check=0
pragma: no-cache

Wszystkie na kilka różnych sposobów mówią to samo – obrazek nie powinien trafić do cache, już jest nieaktualny, przy każdym kolejnym wyświetleniu trzeba go pobrać od nowa.

Ile różnych obrazków siedzi po stronie serwera?

Zależy to od konkretnego dostawcy liczników. Mailerlite pozwala na odliczanie nie dłuższe niż 100 dni, potrzebnych jest więc ponad osiem i pół miliona różnych obrazków.

Wbrew pozorom nie jest to szczególnie wielka liczba. Po pierwsze – nie musimy wszystkich generować zawczasu, możemy tworzyć je na żywo przy pierwszym pobraniu i zachowywać do późniejszego wykorzystania. Po drugie – możemy uznać, że nie potrzebujemy sekundowej precyzji i zaokrąglać godzinę żądania do dziesiątek sekund, co dziesięciokrotnie zmniejszy liczbę plików. Po trzecie – dystrybucja statycznych grafik przez CDN kosztuje grosze, więc możemy dowolną ich liczbę przenieść na serwery usługodawcy.

Dlaczego w URL-u z obrazkiem pojawia się Europa i Wiedeń?

Przypomnijmy adres:

https://static.mailerlite.com/cbuilder/timer/2022-08-31%2023%3A59%3A59/light/Europe%2FVienna

Wyjaśnienie jest następujące – licznik ma odliczać czas do konkretnej chwili, np. do ostatniej sekundy przerwy wakacyjnej dzielącej kolejne lata nauki szkolnej. Wskazana godzina jest jednak ściśle związana z polskim systemem edukacji, a więc i polską strefą czasową. Jeśli pojedziemy do Nowego Yorku (minus 6h względem Polski), to nie przedłuży to o 6 godzin wakacji w kraju. Licznik ma brać pod uwagę czas warszawski, nie lokalny czas podróżnika.

Czemu Wiedeń? Bo to ta sama strefa czasowa, co Warszawa.

Czy trzeba mieć konto w systemach mailingowych aby używać licznika?

Nie trzeba. Wystarczy Gmail i licznik wyklikany na stronie sendtric.com (albo countdownmail.com albo dowolnej innej, jest ich cała masa). Procedura wygląda następująco:

  • wchodzisz na stronę sendtric.com, generujesz licznik
  • wygenerowany kod HTML z linkowanym obrazkiem kopiujesz do pliku tekstowego, zapisujesz go z rozszerzeniem html
  • otwierasz plik w przeglądarce internetowej, potem CTRL-A i CTRL-C (zaznacz wszystko, kopiuj do schowka)
  • w Gmailu tworzysz nowego maila, ustawiasz kursor, CTRL-V (wklej)

Wynik powinien wyglądać jakoś tak:

Ty wysyłasz maila, odbiorca widzi w nim licznik. Do takich testów najlepiej użyć dwóch kont pocztowych od dwóch różnych dostawców.

Z ciekawostek – Sendtric umieszcza w swoich GIF-ach jedynie 60 sekund odliczania:

Zakończenie

Szykując ten tekst sprawdziłem specyfikację formatu GIF89a – chciałem poznać wewnętrzną budowę animowanego GIF-a. Wiecie, że nigdzie w nagłówkach nie ma deklaracji rozmiaru pliku ani liczby klatek animacji? Kadry są ze sobą sklejane aż do momentu, gdy zamiast kolejnego obrazka nastąpi znacznik końca pliku.

To oznacza, że teoretycznie można zrobić licznik, który zamiast nędznej minuty czy półtorej obsłuży całe tygodnie odliczania, z jedną klatką animacji dosyłaną co sekundę przez cały ów okres, przez jedno połączenie HTTP transmitujące niekończącego się GIF-a! Jedyny problem to odporność przeglądarek na ładowane tygodniami gigantyczne animacje. Sądzę, że większość podda się gdzieś pomiędzy jednym tygodniem (~370 MB) a jednym miesiącem (~1500 MB).

Weryfikację tego faktu pozostawiamy jako ćwiczenie dla zainteresowanego czytelnika.



O autorze: zawodowy programista od 2003 roku, pasjonat bezpieczeństwa informatycznego. Rozwijał systemy finansowe dla NBP, tworzył i weryfikował zabezpieczenia bankowych aplikacji mobilnych, brał udział w pracach nad grą Angry Birds i wyszukiwarką internetową Microsoft Bing.

9 odpowiedzi na “Liczniki czasu w e-mailach”

No to skoro można „na bieżąco” generować kolejne sekundy do gifa jednym, niekończącym się połączeniem HTTP, to po co ten cyrk z generowaniem milionów wersji obrazków? Trick z HTTP brzmi sensowniej. Niewiedza autorów licznika, czy jednak jakiś techniczny problem? 😉

1. Wysłanie użytkownikom miliona plików cache’owanych przez CDN jest proste i tanie. Utrzymanie miliona połączeń TCP/IP jest trudne, drogie i zawodne.
2. Spora część programów pocztowych, szczególnie na komórkach, nie będzie tak zaawansowana jak przeglądarki WWW, i animację zacznie wyświetlać dopiero po pobraniu całego animowanego GIF-a.

Ciekawe, czy za pomocą nagłówka HTTP Refresh udałoby się wymusić odświeżenie licznika, aby nie zapętlał się po tej minucie.

Nie udałoby się. Te nagłówek jest interpretowany tylko przez przeglądarki i tylko w kontekście całej strony, nie obrazków.

Zasady używania e-maila: format -> zwykły tekst, wyłączyć wszelki HTML i obrazki. Podatności jest mnóstwo, a w obrazku, czy w strukturze HTML może czaić się złośliwy kod wykorzystujący podatność arbitrary code execution. Także jeszcze raz, wyłącz HTML i naucz użytkowników, że najlepszy e-mail to ten napisany zwykłym tekstem. Dodam, że automatyczna aktualizacja klienta e-mail albo przeglądarki (bo Webmail i IMAP są ostatnio plagą) jest absolutną koniecznością. Konto na Gmailu to nie jest remedium na wszystko.

Mnie nawet te obrazki nie przeszkadzają, ale śledzące mechanizmy, które za nimi stoją. Ostatnio w emailach pojawiła się plaga jednopikselowych obrazków, które mają poinformować nadawcę, że wiadomość została otwarta przez odbiorcę. Niestety powiadamia o tym nie tylko nadawcę, ale też dostawcę owej usługi.

Patent na tego gifa jest naprawdę pomysłowy. Jeżeli klient poczty jest w stanie coś takiego obsłużyć, to po co obciążać serwery licznikami. W gifach najbardziej podoba mi się właśnie to, że koniec konców są plikami tekstowymi.

Fajny temat. Na tej samej zasadzie robiło się countery do allegro czy do ofert na forach, jak jeszcze można było hotlinkowac 🙂

W temacie email ogólnie, mnie jak wyżej czyletnika irytuje brak załączanej wersji bez html zaś uładniona wersja html zwykle nie obsługuje responsywności – co daje komiczne uczucie bycia clickbajtowanym.

Aby przeczytać wiadomość email dotycząca usługi jaką opłacasz zainstaluj naszą aplikację, zweryfikuj kartę debetową i zaloguj się przez facebooka.

Niestesty, Twoje urządzenie ma ponad 8 miesięcy i jest już niewspierane przez naszą platformę.
:))

Na uwagę zasługuje również kosmiczne marnotrastwo zasobów sieciowych generowanych poprzez domyślne ustawienia klientow pocztowych jak np. przesylanie całości zagregowanych wątków w tą i we wtą.

Pozdrawiam!

z uwagi na sledzace obrazki i ukryte liczniki prawie przestalem korzystac z webowych klientow poczty. Nikt nie ma bladego pojecia co one pokazuja i co mozna przez nie zlapac 😉
Swietny kilent poczty na androida to FairEmail ktory automatycznie blokuje wszystkie trakery w ich miejsce wstawiajac czerwony celownik. Oczywiscie mozna wybrac czy chce sie wyslac swoja wiadomosc w HTML, plain text czy w obu i to wydaje sie pieknie dzialac.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.