Bezpieczna i szybka strona statyczna z funkcjonalnością Wordpressa. Czy to możliwe?
1. Bezpieczna i szybka strona statyczna
z funkcjonalnością Wordpressa.
Czy to możliwe?
Łukasz Wilczak
/GrandParadePoland
#wiosna 2017
2. Agenda
• Wstęp
• Bezpiecznie i szybko, czyli statyczne
pliki
• Warunki
• Konfiguracja środowiska (serwer)
• Przygotowanie strony – elementy
dynamiczne
• Formularz kontaktowy
• Komentarze
• Wyszukiwarka
/GrandParadePoland
www.grandparade.co.uk
• Zabezpieczenie WordPressa (htaccess)
• Wtyczka Simply Static
• Konfiguracja wtyczki
• Generowanie plików statycznych
• Weryfikacja i uzupełnienie
brakujących plików
• Strona 404
• Update strony
• Podsumowanie
• Linki
3. Wstęp
Mimo, że WordPress z założenia jest platformą do budowania
blogów, obecnie wiele stron na tym silniku to po prostu "strony
firmowe". Składają się one z strony głównej, kilku podstron typu
oferta, portfolio, aktualności, o nas czy kontakt. I takie strony
niewielkim nakładem pracy i bez modyfikacji kodu możemy
zabezpieczyć i przyspieszyć.
/GrandParadePoland
www.grandparade.co.uk
4. Bezpiecznie i szybko, czyli statyczne pliki
BEZPIECZEŃSTWO
Strona statyczna nie posiada kilku
mankamentów, które ma Wordpress:
• dziury w wtyczkach I motywach
• dziury w core WP
• dziury w PHP, MySQL
• wyciek lub słabe dane do logowania
do panelu
• ataki brute force, xss, SQL injection
SZYBKOŚĆ
Pliki statyczne nie potrzebują zasobów
serwera do:
● interpretacji PHP
● dostępu do bazy danych
● setek operacji I/O
Na przykładzie bezpiecznywp.pl
dla strony głównej (index.html)
● WordPress: 300 ms
● Plik statyczny: 30 ms
/GrandParadePoland
www.grandparade.co.uk
5. Warunki
• Strona na WordPress nie może być duża - do kilkuset artykułów / stron
• Dynamiczne elementy muszą mieć swoje odpowiedniki dostępne dla stron
statycznych. Na szczęście najczęściej używane funkcjonalności dla stron
firmowych je mają. Należą do nich formularze, komentarze, ankiety czy
wyszukiwarki.
• Nie powinno być zbyt dużej liczby osób zarządzających stroną i zbyt częstych
aktualizacji treści. Nie jest to warunek konieczny, ale wymaga pewnej
koordynacji.
• Brak rejestracji / logowania użytkowników
• Rezygnujemy z pingback, trackback
/GrandParadePoland
www.grandparade.co.uk
6. Konfiguracja środowiska (serwer)
Potrzebne są dwie lokalizacje na jednym serwerze – jedna dla WordPressa, jedna
dla strony statycznej. WordPress niedostępny z zewnątrz, natomiast strona
statyczna pod docelową domeną. Istotne jest, żeby skrypt WordPressa miał
dostęp do tej drugiej lokalizacji.
Przykładowo:
Pod pierwszą z nich uruchamiamy WordPressa, drugą zostawiamy pustą.
/GrandParadePoland
www.grandparade.co.uk
7. Przygotowanie strony – elementy dynamiczne
Funkcjonalności server-side należy podmienić na usługi zewnętrzne.
Trzy najczęściej używane elementy dynamiczne w stronach firmowych dynamiczne to:
Formularz kontaktowy Komentarze Wyszukiwarka
/GrandParadePoland
www.grandparade.co.uk
8. Formularz kontaktowy
Usługa: https://formspree.io/
Plugin: bez pluginu
1. Należy dodać stronę z podziękowaniem pod adresem http://bezpiecznywp.pl/contact-thank-you/
2. Na stronie kontaktu w edytorze tekstowym w odpowiednim miejscu trzeba wkleić kod:
<form action="http://formspree.io/lukasz.wilczak@wilnet.eu" method="POST">
<input name="_next" type="hidden" value="http://bezpiecznywp.pl/contact-
thank-you/" />
<input name="subject" type="text" placeholder="Subject" />
<input name="email" type="email" placeholder="Your email" />
<textarea name="message" placeholder="Your message"></textarea>
<button type="submit">Send</button>
</form>
1. Ostatnim krokiem jest odblokowanie wysyłki poprzez wysłanie pierwszego formularza. Wtedy na zdefiniowaną
skrzynkę przyjdzie mail aktywacyjny.
/GrandParadePoland
www.grandparade.co.uk
9. Komentarze
Usługa: https://developers.facebook.com/docs/plugins/comments/
Plugin: https://wordpress.org/plugins/facebook-comments-plugin/
1. Pierwszą rzeczą jest wyłączenie
wbudowanego systemu komentarzy.
Można to zrobić za pomocą wtyczki:
https://wordpress.org/plugins/disabl
e-comments/
2. Do uruchomienia usługi konieczne
jest stworzenie aplikacji facebooka.
W ustawieniach wtyczki można
odszukać szybką instrukcję jak to
zrobić.
3. Po uzyskaniu Facebook App ID
można przystąpić do konfiguracji. W
naszym przypadku (generowania
stron statycznych) komentarze
działają przy następujących
ustawieniach (po prawej)
4. Domyślnie wtyczka aktywuje
komentarze na wszystkich stronach i
wpisach. W ustawieniach można je
wyłączyć dla stron, lub w edycji
konkretnego wpisu czy strony
/GrandParadePoland
www.grandparade.co.uk
10. Wyszukiwarka
Usługa: https://cse.google.com/
Plugin: https://wordpress.org/plugins/wp-google-search/
1. Konieczna jest rejestracja Google Custom Search
Engine i pobranie Search Engine ID.
Uwaga, należy w konfiguracji podać docelową
domenę, czyli tą pod którą będzie statyczna wersja, a
w części “Look and feel” wybrać “Overlay”.
W zakładce “Customize” można dostosować wygląd
pola wyszukiwania zgodnie z szablonem WordPressa.
/GrandParadePoland
www.grandparade.co.uk
11. Wyszukiwarka
2. W ustawieniach pluginu trzeba podać Search
Engine ID
Aby poprawnie wyświetlane były wyniki
wyszukiwania konieczne jest zaznaczenie
“Support Overlay Display”
W przypadku “Overlay” Search Page Target URL
nie jest już używane
3. Teraz można już dodawać widget “WP Google
Search (WGS) gdzie chcemy.
UWAGA!
1. Custom Search Engine potrzebuje około doby
aby zindeksować naszą stronę. Zatem wyniki
wyszukiwania nie będą dostępne od razu.
2. Niestety oprócz wyników wyszukiwania zostaną
nam wyświetlone reklamy Ads by Google
/GrandParadePoland
www.grandparade.co.uk
12. Zabezpieczenie WordPressa (.htaccess)
WordPress w naszej konfiguracji jest tylko generatorem,
do którego powinno być dostępu z zewnątrz dla innych
użytkowników i robotów. Możemy zatem użyć basic
access authorization i ustawić nazwę usera i hasło.
Ponieważ wtyczka Simply Static działa na zasadzie web
grabbera, również jej trzeba zapewnić dostęp. Możemy ją
autoryzować poprzez IP.
Na koniec konieczne jest dodanie instrukcji Satisfy Any,
która pozwoli na dostęp jeżeli jeden
z powyższych warunków będzie spełniony.
.htaccess
//tutaj część standardowa z WP
...
AuthType Basic
AuthUserFile /home/user/.htpasswd
AuthName "Ops..."
require valid-user
ErrorDocument 401 "Unauthorized Access"
order allow,deny
deny from all
allow from 185.23.21.239
allow from 94.6.123.11
Satisfy Any
UWAGA: Polecam generator wpisów .htaccess http://www.htaccessredirect.net/
/GrandParadePoland
www.grandparade.co.uk
13. Wtyczka Simply Static
Plugin: https://wordpress.org/plugins/simply-static/
Jak ona działa?
Jest to przystosowany pod WordPressa web grabber.
Łączy się do frontu strony i poruszając się po
wewnętrznych linkach zapisuje strony jako pliki HTML.
Podmienia w źródle HTML domenę z WordPressa na
wskazaną przez nas (tą przypiętą do static) lub na linki
relatywne.
/GrandParadePoland
www.grandparade.co.uk
14. Konfiguracja wtyczki
Najlepiej wybrać Use absolute url
i wpisać naszą domenę docelową
z lokalizacji static.
/GrandParadePoland
www.grandparade.co.uk
Poniżej trzeba wybrać opcję
Local Directory oraz podać
lokalizację naszego statica.
15. Konfiguracja wtyczki
Jeżeli jakieś pliki nie zostaną
automatycznie pobrane, można
podać je w Additional URLs.
W opisanym przykładzie trzeba dodać
link do strony z podziękowaniami,
ponieważ nie jest ona nigdzie
w kodzie podlinkowana
i web grabber jej nie znajdzie.
/GrandParadePoland
www.grandparade.co.uk
16. Generowanie plików statycznych
Można przystąpić do
generowania plików statycznych.
Czas generowania typowej
“strony domowej”
na standardowym hostingu
to ok. 30-40 sekund.
Gotowe! Prawie...
/GrandParadePoland
www.grandparade.co.uk
17. Weryfikacja i uzupełnienie brakujących plików
Po wygenerowaniu należy przeklikać stronę,
sprawdzić czy wszystko działa oraz sprawdzić
czy nie brakuje plików. W tym celu można
posłużyć się np narzędziem wbudowanym w
przeglądarkę Google Chrome.
W tym celu należy kliknąć prawym
przyciskiem na stronie, wybrać opcję inspect.
Otworzy się konsola, w której pojawią się
zakładki. Po wybraniu Network konieczne jest
odświeżenie strony, aby strona jeszcze raz
zaciągnęła pliki. Teraz należy sprawdzić
statusy, zwracając szczególną uwagę na 404 -
oznacza to że strona odwołuje się do
nieistniejącego pliku.
Jeżeli wystąpi taka sytuacja należy pełen adres
do tego pliku podać w ustawieniach wtyczki
w Additional URLs i ponownie wygenerować
stronę.
/GrandParadePoland
www.grandparade.co.uk
18. Strona 404
WordPress domyślnie obsługuje strony
błędów, a w tym najczęściej używaną
Not Found z statusem 404.
Po wygenerowaniu plików niestety
znika ta funkcjonalność.
Standardowe hostingi mają domyślnie
ustawione strony 404, ale da się podać
własną, zgodną z layoutem strony.
Czynności do wykonania:
1. utworzenie normalnej, nowej strony, np pod linkiem:
/not-found-404/
1. dodanie pliku .htaccess w lokalizacji /var/www/static z
wpisem:
ErrorDocument 404 /var/www/static/not-found-404/index.html
/GrandParadePoland
www.grandparade.co.uk
19. Update strony
Jeżeli wystąpi potrzeba zakutalizowania treści strony, jedyna różnicą
jest konieczność wciśnięcia przycisku
/GrandParadePoland
www.grandparade.co.uk
Dodatkową zaletą rozwiązania jest możliwość obejrzenia strony
przez wygenerowaniem na WordPressie.
Uwaga: Jeżeli usunięta zostanie np. jakaś strona i pliki zostaną
ponownie wygenerowane, strona ta nie zostanie usunięta ze static.
Należy to zrobić ręcznie.
20. Podsumowanie
Generowanie plików statycznych z WordPressa nie jest idealnym
rozwiązaniem, nie usunie wszystkich zagrożeń, nie uchroni przed
wyciekiem danych do FTP czy słabym hasłem. Natomiast pozwala
w znacznym stopniu zredukować ilość dziur. Pozwala też spać
spokojnie osobom, które rzadko zmieniają swoją stronę i nie
śledzą aktualizacji WordPressa. Ponadto zaprezentowane
rozwiązanie zmniejsza obciążenie zasobów serwera i przyśpiesza
w spektakularny sposób działanie strony.
/GrandParadePoland
www.grandparade.co.uk
21. Linki
Usługi dla stron statycznych
https://developers.facebook.com/docs/plugins/comments/
https://cse.google.com/
https://formspree.io/
Inne narzędzia
http://www.htaccessredirect.net/
Wtyczki
https://wordpress.org/plugins/simply-static/
https://wordpress.org/plugins/facebook-comments-plugin/
https://wordpress.org/plugins/wp-google-search/
Prezentacja “Statycznie czy dynamicznie?”
http://dziudek.pl/imprezy/statycznie-czy-dynamicznie-moja-prezentacja-z-ostatnich-wordupow
Gdzie pracuję
https://www.grandparade.co.uk/
http://wilnet.eu/
http://szkoleniacms.pl/
/GrandParadePoland
www.grandparade.co.uk
