Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 23 Ad
Advertisement

More Related Content

Slideshows for you (20)

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

Advertisement

Recently uploaded (20)

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

×