Komunikat o wykorzystaniu na stronie plików cookie oraz innych wariantów przechowywania danych po stronie klienta stał się nieodłącznym elementem życia. Niestety coraz częściej zauważam, iż gotowe skrypty jakie można znaleźć w sieci, wykorzystują niewiedzę użytkowników do infekowania stron. Kod taki niewiadomego pochodzenia jaki użytkownik osadza staje się furtką, jaką włamywacz wykorzystuje w najlepszym razie do pobierania danych o użytkownikach. A konsekwencje mogą być dużo poważniejsze gdy wirus odczyta np. login i hasło ze strony lub zacznie kopać krypto-waluty na sprzęcie odwiedzającego. Część programów antywirusowych potrafi wykryć zagrożenie jednak po co kusić los, gdy napisanie samodzielnie takiego komunikatu to kilka linijek kodu (zewnętrzne skrypty potrafią mieć po kilkadziesiąt kB).

Naszym celem będzie stworzenie prostego okienka, które po kliknięciu w przycisk “X” zostanie zamknięte do czasu usunięcia informacji o tym z przeglądarki gościa. Do przechowywania informacji wykorzystamy technologię localStorage. Nie będą potrzebne żadne zewnętrzne biblioteki i frameworki.

Na początek należy na stronie osadzić prosty kod HTML z odpowiednim komunikatem:

<div id="storageMessage" class="hidden">
    <div class="content">
        <a href="#" class="close">&#10005;</a>
        <p>Serwis używa plików cookies, technologii Web Storage i podobnych m.in. w celach: 
reklamowych, statystycznych oraz świadczenia usług. Jeżeli nie zmienisz ustawień, pliki będą 
zapisywane w pamięci Twojego urządzenia. Więcej przeczytasz w 
<a href="[tutaj adres do polityki prywatności]">polityce prywatności</a>.</p>
    </div>
</div>

Treść samego komunikatu można oczywiście spersonalizować. W miejsce `[tutaj adres do polityki prywatności]` można podstawić link, przykładowo:

<a href="http://prophp.pl/info/cookies">polityce prywatności</a>

Co ważne, okno komunikatu chcemy domyślnie ukryć (poprzez klasę `hidden`) – bardziej prawdopodobna jest sytuacja iż domyślnie częściej nie będzie ono potrzebne. Ukrycie sprawi też, że w urządzeniach które nie wspierają technologii Web Storage (szansa na to jest niewielka jednak trzeba taką możliwość również uwzględnić) nie będzie problemu z zamknięciem “okienka”.

Następnie nadajmy trochę wyglądu naszemu oknu. Wiadomo że każdy będzie chciał je sformatować pod własne potrzeby dlatego uwzględniłem bardzo podstawowe reguły. Wymagana jest tylko klasa `hidden` (dostępna również domyślnie we frameworku Twitter Bootstrap – dlatego jeśli go posiadasz możesz to również pominąć).

<style>
    #storageMessage {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 300px;
        background: rgba(0, 0, 0, .5) no-repeat 0 0;
    }

    #storageMessage p {
        color: #fff;
    }

    #storageMessage .content {
        position: relative;
        padding: 1em;
    }

    #storageMessage .content a.close {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #fff;
    }

    .hidden {
        display: none !important;
    }
</style>

Tutaj kod osadzony jest poprzez element `style` ale najlepiej połączyć go z domyślnym arkuszem CSS na stronie. Samo okienko będzie zawsze przyczepione do prawego dołu strony, domyślnie posiada czarny kolor z przezroczystością 50% i białymi literami.

Pora dołożyć trochę magii, czyli za pomocą JavaScript obsłużyć zamykanie okna. Wykorzystam omawianą już wcześniej delegację zdarzeń.

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        // kod wykona się wyłącznie gdy przeglądarka obsługuje localStorage
        if (window.localStorage) {
            var storageMessage = document.getElementById('storageMessage');

            // sprawdzamy czy wcześniej użytkownik zamykał okno
            // gdy tego nie zrobił lub jest to pierwsza wizyta wyświetlamy komunikat
            if (!localStorage.getItem('storageMessage')) {
                storageMessage.classList.remove('hidden');
            }

            // dodajemy zdarzenie do zamknięcia okna
            storageMessage.addEventListener('click', function (event) {
                var target = event.target;

                // w nowszych przeglądarkach można wykorzystać wyłącznie zakomentowaną linię
                // stary Internet Explorer nie rozpoznaje reguły matches()
                // if (target.matches('a.close')) {
                if (target.tagName === 'A' && target.classList.contains('close')) {
                    event.preventDefault();
                    storageMessage.classList.add('hidden');
                    localStorage.setItem('storageMessage', true);
                }
            }, false);
        }
    });
</script>

I to wszystko. Parę linii kodu nie licząc komentarzy. Ponieważ localStorage nie ma czasu wygaśnięcia, po pierwszym zamknięciu okna nie pojawi się ono ponownie – chyba że zostanie ręcznie usunięty klucz `storageMessage` (można to zrobić w narzędziach deweloperskich przeglądarki, zakładka `Dane`). Demo skryptu można zobaczyć na przykładowej stronie.

I pamiętaj. Nigdy nie osadzaj na stronie skryptów pochodzących z zewnętrznych źródeł jeśli nie masz pewności co do ich bezpieczeństwa.

• php
• zend framework
• html
• javascript
• jquery
• mysql
• sieć
• http
• kodowanie
• xml
• xhtml
• postgresql
• css
• programowanie
• internet
• bazy danych
• zend framework 3
• apache
• sqlite
• phptal