Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bezpieczna i szybka strona statyczna
z funkcjonalnością Wordpressa.
Czy to możliwe?
Łukasz Wilczak
/GrandParadePoland
#wio...
Agenda
• Wstęp
• Bezpiecznie i szybko, czyli statyczne
pliki
• Warunki
• Konfiguracja środowiska (serwer)
• Przygotowanie ...
Wstęp
Mimo, że WordPress z założenia jest platformą do budowania
blogów, obecnie wiele stron na tym silniku to po prostu "...
Bezpiecznie i szybko, czyli statyczne pliki
BEZPIECZEŃSTWO
Strona statyczna nie posiada kilku
mankamentów, które ma Wordpr...
Warunki
• Strona na WordPress nie może być duża - do kilkuset artykułów / stron
• Dynamiczne elementy muszą mieć swoje odp...
Konfiguracja środowiska (serwer)
Potrzebne są dwie lokalizacje na jednym serwerze – jedna dla WordPressa, jedna
dla strony...
Przygotowanie strony – elementy dynamiczne
Funkcjonalności server-side należy podmienić na usługi zewnętrzne.
Trzy najczęś...
Formularz kontaktowy
Usługa: https://formspree.io/
Plugin: bez pluginu
1. Należy dodać stronę z podziękowaniem pod adresem...
Komentarze
Usługa: https://developers.facebook.com/docs/plugins/comments/
Plugin: https://wordpress.org/plugins/facebook-c...
Wyszukiwarka
Usługa: https://cse.google.com/
Plugin: https://wordpress.org/plugins/wp-google-search/
1. Konieczna jest rej...
Wyszukiwarka
2. W ustawieniach pluginu trzeba podać Search
Engine ID
Aby poprawnie wyświetlane były wyniki
wyszukiwania ko...
Zabezpieczenie WordPressa (.htaccess)
WordPress w naszej konfiguracji jest tylko generatorem,
do którego powinno być dostę...
Wtyczka Simply Static
Plugin: https://wordpress.org/plugins/simply-static/
Jak ona działa?
Jest to przystosowany pod WordP...
Konfiguracja wtyczki
Najlepiej wybrać Use absolute url
i wpisać naszą domenę docelową
z lokalizacji static.
/GrandParadePo...
Konfiguracja wtyczki
Jeżeli jakieś pliki nie zostaną
automatycznie pobrane, można
podać je w Additional URLs.
W opisanym p...
Generowanie plików statycznych
Można przystąpić do
generowania plików statycznych.
Czas generowania typowej
“strony domowe...
Weryfikacja i uzupełnienie brakujących plików
Po wygenerowaniu należy przeklikać stronę,
sprawdzić czy wszystko działa ora...
Strona 404
WordPress domyślnie obsługuje strony
błędów, a w tym najczęściej używaną
Not Found z statusem 404.
Po wygenerow...
Update strony
Jeżeli wystąpi potrzeba zakutalizowania treści strony, jedyna różnicą
jest konieczność wciśnięcia przycisku
...
Podsumowanie
Generowanie plików statycznych z WordPressa nie jest idealnym
rozwiązaniem, nie usunie wszystkich zagrożeń, n...
Linki
Usługi dla stron statycznych
https://developers.facebook.com/docs/plugins/comments/
https://cse.google.com/
https://...
Dziękuję za uwagę.
/GrandParadePoland
www.grandparade.co.uk
Pytania?
Łukasz Wilczak
email: lukasz.wilczak@grandparade.co.uk
lukasz.wilczak@wilnet.eu
linkedin /lukaszwilczak
#wiosna 2017
/Gran...
Upcoming SlideShare
Loading in …5
×

Bezpieczna i szybka strona statyczna z funkcjonalnością Wordpressa. Czy to możliwe?

814 views

Published on

Prezentacja na WordUp Kraków edycja wiosna 2017

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Bezpieczna i szybka strona statyczna z funkcjonalnością Wordpressa. Czy to możliwe?

  1. 1. Bezpieczna i szybka strona statyczna z funkcjonalnością Wordpressa. Czy to możliwe? Łukasz Wilczak /GrandParadePoland #wiosna 2017
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  22. 22. Dziękuję za uwagę. /GrandParadePoland www.grandparade.co.uk Pytania?
  23. 23. Łukasz Wilczak email: lukasz.wilczak@grandparade.co.uk lukasz.wilczak@wilnet.eu linkedin /lukaszwilczak #wiosna 2017 /GrandParadePoland www.grandparade.co.uk

×