Cześć, dzisiaj chciałbym zająć Wam chwile wolnego czasu aby zwrócić uwagę na bezpieczeństwo tworzenia stron internetowych oraz kwestie ich optymalizacji.
Co by o tym nie sądzić jest to temat rzeka, codziennie przecież przeglądamy mnóstwo stron w poszukiwaniu informacji ale rzadko kiedy zastanawiamy się (jako twórcy) nad tym jak bardzo nasi użytkownicy są narażenie na ciągle pojawiające się ataki (phishing, spam itd.). I choć nigdy nie jesteśmy w stanie na 100% zabezpieczyć wszystkiego jak należy, warto podnosić nieustannie bezpieczeństwo naszych stron aby nie ułatwiać, a wręcz utrudniać atakującym pozyskania jakichkolwiek danych.
Bezpieczeństwo:
1. SSL
Pierwsze skojarzenie z bezpieczeństwem? Certyfikat SSL - wdrożyłeś go? Pewnie nie, w końcu prowadzisz tylko małe forum, blog'a czy inny portal więc dlaczego ktokolwiek miałby się zainteresować twoją stroną skoro nic nie sprzedajesz?
No i z takim podejściem już jesteś w błędzie bo taki certyfikat obligatoryjnie powinny mieć wszystkie serwisy w których mamy do czynienia z logowaniem/rejestracją czyli po prostu z użytkownikami.
Wdrożenie takiego rozwiązania wcale nie musi być przesadnie kosztowne, istnieje bowiem bezpłatna alternatywa - tzw. Let's Encrypt oferujący darmowe certyfikaty na cały rok, czasami można nawet trafić na oferty hostingów z auto-odnawialnym Let's Encrypt (co kompletnie zwalnia nas z pamiętania o SSL rokrocznie).
Posiadanie certyfikatu to połowa sukcesu jednak jego poprawna implementacja to kompletnie inna sprawa, a tym nie wszyscy mogą się pochwalić. Warto więc sprawdzić czy nasza strona faktycznie daje radę w tym zakresie na stronie: Qualys SSL Labs.
Warto też zwrócić uwagę na rodzaj rozwiązania którym chcemy zabezpieczyć naszą stronę. Nie wszyscy to wiedzą ale certyfikaty bywają różne, niektóre chronioną wyłącznie domenę główną (example.com), inne natomiast pozwalają zabezpieczyć całą witrynę, są to tzw. Wildcard (example.com oraz wszystkie drugiego poziomu czyli forum.example.com, blog.example.com).
2. Nagłówki
Kolejną istotną kwestią są nagłówki, dość często pomijane i bagatelizowane. Jeżeli posiadamy jedynie konto współdzielone raczej nie mamy za wiele do gadania. Mając jednak swój serwer warto o tym pomyśleć, pozwoli nam to na ochronę przed kolejnym rodzajem ataków (np. clickjacking, częściowo xss). Doskonałym miejscem pozwalającym sprawdzić jak to wygląda w waszym przypadku jest strona: SecurityHeaders.com.
Przy okazji można się na niej dowiedzieć za co odpowiadają poszczególne nagłówki. Warto także zajrzeć na tego bloga, człowieka który jest badaczem bezpieczeństwem (jest powiązany z poprzednią stroną) na którym wyjaśnia znaczenia nagłówków, sposoby ataków itd.
3. CDN (Content Delivery Network)
Ostatnim już punktem związanym poniekąd z bezpieczeństwem ale nie tylko jest umieszczanie stron za tzw. CDN'ami. Są to serwisy o dużej dostępności oferujące coś w rodzaju własnej infrastruktury (sieci) dostarczającej statyczne treści dla waszych stron. Wszelkie obrazki, skrypty - wszystko co da się cachować (zatrzymać w pamięci podręcznej) na dłużej. Pełnią także o wiele ważniejszą funkcje - potrafią odpierać zmasowane ataki DDOS czy po prostu ukryć wasze serwery nazw.
Można powiedzieć, że stoją pomiędzy Wami a użytkownikiem końcowym gwarantując obu stroną nieprzerwane działanie.
Weźmy takiego Kowalskiego który postanowił wybrać się na Waszą stronę w piękne niedzielne popołudnie, odpytuje on najbliższy punkt dostępowy CDN (np. węzeł Europa) o kilka plików (parę obrazków, filmik i style) które są mu natychmiastowo dostarczane dopiero w momencie jakieś głębszej interakcji z stroną (stworzenie konta -> wymaga dostępu do bazy danych) zostaje mu podana właściwa strona zlokalizowana np. w Krakowie.
W tym sposób możemy skutecznie ograniczyć ruch jaki generują sami użytkownicy a dodatkowo możemy uniknąć niedostępności naszego serwisu ponieważ CDN, wyświetla coś na wzór strony 404 która czasami (jeżeli jest to prosta strona) może zostać całkowicie odtworzona z pamięci podręcznej (w przypadku padu oryginalnego host'a). Oczywiście jest to dość pobieżny opis i jedynie przybliża to co mniej więcej powinny wiedzieć osoby stricte nie-techniczne (docelowo tym technicznym wystarczy wspomnienie o CDN).
Choć mogłoby się wydawać, że problem jest znaleźć dostawce który zaoferowałby nam bezpłatny CDN to mimo wszystko jest jeden taki, prym w tym zakresie wiedzie CloudFlare.
Optymalizacja:
1. PageSpeed Insights
Podstawowym i dość starym już narzędziem jest Insight, wynalazek jednej z najpopularniejszych wyszukiwarek wszech czasów - Google, który również znajdziecie dodając swoją stronę do Google Search Console czyli po prostu do indeksu tego giganta (swoją drogą tą usługą też powinniście się zainteresować). Szczególnie warto dodać mapę waszej strony jeżeli jeszcze tego nie zrobiliście. Wracając do Google PageSpeed strona ta pozwala sprawdzić naszą stronę pod kątem możliwych "usprawnień", a jest ich sporo.
Minifikacja - polega na usuwaniu z kodu waszej strony spacji, enterów (generalnie znaków białych), tworząc mało czytelny makaron spaghetii ale za to działający (przynajmniej w teorii) szybciej (mniejszy rozmiar to szybszy transfer w przypadku słabej sieci).
Optymalizacja obrazków - jeżeli naszą stronę zalewają obrazki to na pewno warto zainteresować się zmniejszeniem ich wagi (plików), tutaj dużo zależy od rozszerzenia, każdy typ plików ma swoje "sposoby na kompresje". Jeszcze łatwiej jest jeżeli sami przygotowujemy takie grafiki to możemy już na etapie tworzenia zadbać aby były odpowiednie dla Internetu.
Kompresja - w tym przypadku zazwyczaj chodzi o funkcje gzip 'owania strony. Czyli w teorii kompresja wszystkich plików przesłanie ich do klienta i odkompresowanie ich - opcja dość kontrowersyjna i sporna, ja polecam włączyć jednak są głosy, że gzip'owane strony ładują się wolniej itd. W codziennym użytkowaniu nigdy różnicy nie odczułem.
Wykorzystaj pamięć cache - czyli po prostu dodanie w konfiguracje serwera odpowiedniej linijki i/lub paru ustawiające czas przez jaki ma być przechowywana pamięć cache.
To tylko parę porad jakie możecie dostać odnośnie optymalizacji waszej strony, we wszystkim jednak trzeba znać umiar - dlatego warto dodać aby patrzeć na wynik jaki tam otrzymujemy z lekkim przymrużeniem oka gdyż nawet Google nie jest w nim w stanie uzyskać pełnego 100/100 pkt ;)
2. Pingdom
Następny skaner, tym razem nieco bardziej szczegółowo pokazujący co i dlaczego opóźnia nam ładowanie się naszej strony. Podobne rozwiązanie możecie znaleźć w konsoli developerskiej (DevTools'ach) w waszej przeglądarce ale trzeba wiedzieć jak go użyć i gdzie znaleźć - natomiast tutaj wszystko mamy jak na dłoni. Od razu wiemy jaki skrypt blokuje nam renderowanie się całej reszty.
Podobnie możemy dowiedzieć się ile tak naprawdę waży cała nasza strona, jak szybko odpowiada i do jakich stron się zwraca o dodatkowe (zewnętrzne) zasoby.
Na sam koniec jeszcze dwa patenty ode mnie, nieco rzadziej wykorzystywane (z względu na wąskie zastosowanie) które również warto mieć na uwadze.
1. DNS Prefetch:
Jest to prosty sposób aby powiedzieć z jakimi stronami będziemy chcieli się potencjalnie połączyć, przeglądarka powinna w wolnej chwili zainicjować sobie takie połączenie/a (wiadomo, chwile jej to zejdzie - choćby znalezienie adresu serwer'a stojącego za DNS) aby później móc szybciej pobrać docelowe zasoby (style, fonty itp.).
Wystarczy dodać taki zapis w sekcji <head> naszego dokumentu:
<link rel="dns-prefetch" href="\fonts.googleapis.com">
Zamieniając \fonts.googleapis.com (innymi) zewnętrznymi adresami do jakich odwołuje się wasza strona.
2. HSTS preload:
Rozwiązanie to może nie przyśpieszy w żaden sposób waszej strony ale doda was na elitarną listę stron dostępnych jedynie za pośrednictwem szyfrowanego połączenia z poprawnie dodanym certyfikatem (która wraz z kolejnymi aktualizacjami przeglądarki jest rozszerzana). Jest to lista wstępnie ładowanych stron które wymagają od przeglądarki bezpiecznego połączenia.
Aby wpisać się na tą listę należy spełnić kilka warunków, jednak jest to opcjonalne (i wymaga pewnej wiedzy) dlatego wszystko na ten temat znajdziecie na oficjalnej stronie.
Inne ciekawe różności, zagadnienia o których nie zdążyłem napisać a którymi warto się zainteresować, budując i/lub optymalizując/konserwując stronę:
lazy loading
csp
service worker
meta theme color - taki bonusik :D
Mam nadzieje, że wyczerpałem temat a jeżeli nie to chociaż znaleźliście parę przydatnych linków - oczywiście jeżeli znacie lepsze sposoby dajcie znać w komentarzu poniżej, tymczasem dzięki za uwagę i strzała :)
