Jak dodatkowo zabezpieczyć stronę logowania WordPress?

WordPress jest najczęściej używanym systemem CMS na świecie. Wiele stron i blogów oparte jest na tym skrypcie. Ogromna popularność niestety sprawia, że system ten jest jednocześnie narażony na różne próby włamania i złośliwe oprogramowanie.

Oczywiście najbardziej narażona strona w WordPressie, to podstrona logowania do panelu administracyjnego, której adres zna każdy użytkownik:

https://twojastrona.pl/wp-login.php

Niestety ten adres znają również hakerzy i boty, które codziennie próbują przełamywać loginy i hasła stron postawionych na tym skrypcie, często także metodami „brute force„. Nawet jeśli masz bardzo bezpieczne hasło, to tego typu zabiegi obciążają hosting, gdyż doprowadzają do wielokrotnego odpytywania bazy danych na serwerze. Oczywiście istnieją specjalne wtyczki bezpieczeństwa typu Shield Security, Wordfence Security czy Sucuri Security, które zabezpieczają przed tego typu aktywnościami. Ale jak wiadomo nigdy nie ma w 100% skutecznych zabezpieczeń, więc warto stosować dodatkowe, które zabezpieczą Twoją stronę przed włamaniami.

I właśnie takie dodatkowe zabezpieczenie strony logowania do WordPressa prezentuje w tym artykule.

Zabezpieczenie polega na nałożeniu dodatkowego loginu i hasła na stronę logowania wp-login.php. Te dodatkowe dane dostępowe zostaną zahaszowane w pliku htpasswd, który przechowuje nazwy użytkowników i hasła w celu autoryzacji serwera Apache na hostingu. Cały proces opisany jest w kilku krokach.

1. Utworzenie pliku .htpasswd

W tym pliku będą znajdować się Twoje dane dostępowe, które wcześniej musisz zdefiniować. Możesz go stworzyć w notatniku systemowym lub programie Notepad++. Przy zapisywaniu pliku trzeba wybrać Zapisz jako typ: Wszystkie pliki i w nazwie wpisać .htpasswd. Gdy masz już go stworzonego, musisz zdefiniować login i hasło, którymi chcesz zabezpieczyć panel, korzystając z poniższego generatora htpasswd:

https://hostingcanada.org/htpasswd-generator/

Wpisujesz w Username – login, w Password – hasło i klikasz przycisk Create .htpasswd file. Ważne! Login i hasło powinny być unikalne i inne niż te, które masz ustawione w panelu WordPressa. Wygeneruje się jedna linijka kodu z zakodowanym hasłem i będzie miała taką postać:

login:{SHA}[losowe znaki]

Tę linijkę wklejasz do wcześniej utworzonego pliku .htpasswd i zapisujesz.

2. Wgranie pliku .htpasswd na serwer

Teraz należy go wgrać na serwer, na którym zainstalowana jest Twoja instalacja strona internetowa. Z tym że najlepiej, gdy będzie się on znajdował w specjalnie przez Ciebie utworzonym katalogu (np. o nazwie htpasswd, choć może być ona zupełnie inna) o poziom wyżej niż katalog ze stroną. Najlepiej w katalogu głównym serwera, którego zawartość wyświetla się zaraz po zalogowaniu na FTP.

katalog główny serwera hostingowego

Do katalogu wgraj plik .htpasswd i w tym momencie połowa pracy wykonana.

3. Ustawienie hasła w pliku .htaccess

Teraz w pliku .htaccess (który znajduje się w katalogu głównym WordPress), należy ustawić zabezpieczenie. Dodajesz do niego poniższe linijki kodu:

  AuthName "Restricted Area"
  AuthType Basic
  AuthUserFile /usr/home/nazwa_serwera/htpasswd/.htpasswd
  <Files wp-login.php>
  require valid-user
  </Files>

Ścieżka AuthUserFile /usr/home/nazwa_serwera/htpasswd/.htpasswd wskazuje bezpośrednią lokalizacje pliku na serwerze. Oczywiście z zależności od tego, z jakiej firmy hostingowej korzystasz, może ona być inna. Poniżej porada jak to sprawdzić.

Jak sprawdzić pełną ścieżkę katalogu strony www na swoim serwerze hostingowym?

Utwórz w notatniku plik o nazwie info.php (koniecznie musi mieć rozszerzenie .php)
Następnie wklej do niego kod:
  <?php
  echo dirname( __FILE__ );
  ?>

Zapisz plik i wgraj go do folderu głównego swojej strony i uruchom, wpisując adres w przeglądarce:

twoja-strona.pl/info.php

Wyświetli się pełna ścieżka do katalogu w którym znajduje się plik info.php. Na tej podstawie ustalisz jaka powinna być dokładna ścieżka w wpisana w .htaccess, aby odnosiła się do katalogu i pliku .htpasswd, podobnie jak jest w przykładzie wyżej.

Gdy już dodałeś cały kod do pliku .htaccess, należy go wgrać na serwer zastępując istniejący.

4. Efekt

Od teraz, gdy będziesz chciał się zalogować do panelu administracyjnego WordPressa, wyskoczy dodatkowe okienko do zalogowania:

Wpisujesz w nim login i hasło, które wcześniej zdefiniowałeś w pliku .htpasswd. Po prawidłowym zalogowaniu tymi danymi, dopiero teraz otworzy się właściwe konto do logowania WP.

Jak widzisz dzięki temu sposobowi, uzyskujesz dodatkowe zabezpieczenie swojego CMS przed włamaniami. Dodatkowo jeśli jakieś szkodliwe boty, będą próbowały logować się do panelu, zatrzyma ich ta bariera. Dzięki czemu nie będzie obciążana bazy danych niepotrzebnymi zapytaniami.


Jak stworzyć własny wirtualny dysk w internecie

Większość z nas wie, co to jest ten wirtualny dysk (tzw. chmura), wielu używa dysków Google Drive czy OneDrive. Największą zaletą tego typu rozwiązań jest to, że masz dostęp do swoich plików praktycznie na całym świecie. Wystarczy urządzenie z dostępem do internetu. Niestety wadami tego typu rozwiązań, jest niewielka pojemność dyskowa (w wersjach darmowych), brak pełnej kontroli czy możliwość zablokowania dysku przez zewnętrznego dostawcę.

Dlatego w tym artykule opiszę, jak stworzyć własny prywatny dysk wirtualny. Zaletą tego rozwiązania jest pełna niezależność. Od Ciebie zależy, jaką pojemność będzie miała Twoja prywatna chmura. Do tego możesz sam zdefiniować jaki ma mieć adres, używając własnej domeny internetowej. No i najważniejsze będzie to dysk, tylko na Twoją wyłączność. Będziesz mógł przechowywać na nim własne pliki, filmy, zdjęcia czy muzykę.

Oczywiście do tego będziesz potrzebował hostingu i domeny internetowej (jeśli chcesz mieć swój indywidualny adres wirtualnego dysku), co oczywiście jest płatne. Jeśli masz już hosting, to można to zrobić jego ramach. Natomiast jeśli nie masz, możesz wykupić w dobrej cenie, o czym poniżej.

Opiszę to w dwóch sposobach. Pierwszy będzie szybszy i prostszy, natomiast drugi sposób będzie opisywał ręczną instalację dysku na serwerze. Do celów artykułu wybrałem według mojej opinii, najciekawszy skrypt – ownCloud. Jest on na licencji Open Source, czyli jest w pełni darmowy.

1 sposób (prostszy i szybszy)

Jeśli nie masz jeszcze wykupionego hostingu i domeny, pod swój własny wirtualny dysk, polecam wybrać taki, który ma w swojej ofercie dostępne autoinstalatory w tym ownCloud. Dzięki temu zainstalujesz skrypt jednym kliknięciem. Takim hostingiem jest m.in. Seohost.pl, który polecam. Oczywiście najpierw będziesz musiał założyć konto klienta, wykupić hosting i domenę, a następnie zaparkować domenę w Seohost. Domena nie jest wymagana. Jeśli Ci na tym nie zależy, możesz użyć domyślnego adresu, który jest dostarczany bezpłatnie do każdego serwera hostingowego.

Gdy już masz to wszystko zrobione, wystarczy się zalogować za pomocą panelu administracyjnego DirectAdmin. Wchodzisz w lewym menu w Polecane aplikacje -> WordPress. W otwartej stronie wybierasz Katalog aplikacji i niżej w kategorii Aplikacje dla Zdjęcia i Pliki klikasz w ownCloud i +instaluj tę aplikację. Oczywiście w tej kategorii jest więcej skryptów chmurowych, możesz je sobie potestować. My natomiast skupmy się na ownCloud. Po jego wybraniu, otworzy się formularz instalacyjny, który trzeba wypełnić tak jak na obrazku poniżej:

autoinstalator owncloud w seohost.pl

Właściwie wybierasz tylko domenę, na której ma być zainstalowany skrypt oraz dane administratora – login, hasło i e-mail, za pomocą których będziesz się logować na dysk. Pozostałe ustawienia mogą pozostać domyślne. Po kliknięciu + Zainstaluj, robota jest już skończona. Masz już osobisty dysk wirtualny do przechowywania plików. Wystarczy wejść na adres domeny i się zalogować.

logowanie owncloud

Po zalogowaniu masz dostęp do panelu w którym możesz tworzyć swoje foldery, dodawać pliki czy je udostępniać. Słowem wszystko to co możliwe jest w innych systemach chmurowych.

panel użytkownika owncloud

Istnieje również dodawanie nowych użytkowników, jeśli chciałbyś przydzielić dostęp do dysku innym osobom. Skrypt posiada polską wersję językową, ale niestety zdarzają się nieprzetłumaczone fragmenty.

2 sposób (ręczna instalacja)

Drugi sposób przeznaczony jest raczej dla bardziej doświadczonych webmasterów, którzy poradzą sobie z założeniem bazy danych, wrzuceniem plików źródłowych na serwer przez FTP itp. Oczywiście do tego wszystkiego musisz posiadać serwer hostingowy z obsługą PHP i baz danych MySQL.

W pierwszej kolejności, ściągnij pliki źródłowe (w ZIP) ownCloud ze strony – Download Server Packages – ownCloudhttps://owncloud.com/download-server/

Rozpakuj je na swoim komputerze i wgraj wszystkie pliki na serwer poprzez FTP lub wgraj paczkę i rozpakuj bezpośrednio na serwerze jeśli masz taką możliwość, co będzie szybszym rozwiązaniem. W międzyczasie w panelu swojego hostingu utwórz bazę danych w MySQL (nazwa bazy, użytkownik i hasło), która będzie niezbędna do działania tego systemu chmurowego.

Gdy już masz wszystko, wystarczy wejść na domenę (lub subdomenę) która kieruje na folder z plikami skryptu. Po wejściu pojawi się okienko instalacyjne w którym, utworzysz konto administratora oraz będziesz mógł wpisać parametry serwera MySQL lub SQLite.

Po wpisaniu nazwy użytkownika i hasła, kliknij w Storage & database. Rozszerzy się formularz, w którym należy zaznaczyć rodzaj bazy danych (MySQL), następnie użytkownika bazy, hasło, nazwę bazy i host (najczęściej jest to localhost), które wcześniej utworzyłeś w panelu hostingowym.

Jeśli tego nie zrobiłeś, zawsze możesz zaznaczyć opcję SQLite, wtedy dane te nie będą potrzebne, a instalacja sama stworzy bazę danych w systemie plików. Po kliknięciu w przycisk Finish setup, nastąpi finalizacja instalacji, która potrwa kilkanaście sekund. Jeśli wszystko będzie w porządku, wyskoczy okno do zalogowania się na wirtualny dysk ownCloud. Gotowe.

Co ciekawe dostęp do własnej chmury, którą przed chwilą zainstalowałeś, możesz mieć nie tylko przez przeglądarkę internetową z dowolnego komputera na świecie, ale również przez aplikacje na smartfona, za pomocą której można przeglądać pliki i synchronizować je z serwerem.


Jak wstawić znak wodny w HTML na stronie?

Wstawianie znaku wodnego najczęściej praktykuje się w różnego rodzaju grafikach i zdjęciach, gdzie trzeba oznaczyć obraz nazwą autora lub logo firmy, która wykonała dane dzieło. Ale co jeśli chce ktoś umieścić taki znak wodny, pod tekstem na swojej stronie www? Można to w prosty zrobić za pomocą tandemu HTML+CSS.

Na początek potrzebny Ci będzie plik graficzny, który chcesz wrzucić pod tekst. Ważne żeby to był plik z przezroczystością (png lub gif). Jeśli będzie na białym tle, to również może być, ale tylko pod warunkiem że tło na stronie również jest białe. W innym przypadku będzie to źle wyglądało.

W naszym przypadku użyjemy tej grafiki:

przykładowa grafika pod znak wodny

Następnie trzeba zdefiniować w CSS tak, aby powyższy obrazek stworzył tło pod blokiem tekstowym. Do tego wystarczy użyć reguły background-image. Poniżej pełen listing HTML+CSS w którym pomocniczo, dodane jest jeszcze kilka innych reguł:

<html>
<head>
<style type="text/css">
p {
	border: medium solid back;
	font-size: 30px;
	background-color: #F5F5F5;
	background-image: url(znak-wodny.png);
	background-size: contain;
	background-repeat: round;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>

Pogrubioną czcionką zaznaczyłem fragment kodu, odpowiedzialnego za działanie skryptu. W efekcie uzyskasz takie coś:

przykład wstawiania znaku wodnego w html i css

Jak widać trochę obrazek gryzie się z tekstem, bo powinien być trochę bladszy i najlepiej w jasnoszarym kolorze. Ale tutaj bardziej chodzi o pokazanie na przykładzie.

Teraz wyjaśnię poszczególne linijki:

background-color: #F5F5F5; – ustalanie koloru tła akapitu, w przykładzie lekko szary
background-image: url(znak-wodny.png); – tutaj najważniejsza linijka w której wstawiasz lokalizację pliku graficznego na serwerze, który posłuży jako tło czyli znak wodny
background-size: contain; – tutaj ustala się wielkość obrazu, można ustawić ręcznie w jakim rozmiarze ma się wyświetlać, albo wybrać jedne z gotowych przełączników:
contain – skalowanie do największego rozmiaru, który zmieści się w obrębie pola tekstowego (z zachowaniem proporcji)
cover – skalowanie do najmniejszego rozmiaru
auto – wyświetlanie w pełnym rozmiarze
background-repeat: round; – ustawianie powtórzeń obrazka oraz jego orientacja:
repeat-x – powtarzanie, orientacja w poziomie, może być urwany
repeat-y – powtarzanie, orientacja w pionie, może być urwany
repeat – powtarzanie w obu kierunkach, urwany
space – dostosowanie aż do wypełnienia obszaru, bez urywania, rozłożenie równomierne
round – skalowanie w taki sposób żeby nie urywać
no-repeat – bez powtarzania

Oczywiście opcji jest jeszcze więcej, można je znaleźć w oficjalnej dokumentacji CSS. Chociaż użycie powyższych instrukcji w zupełności wystarczy, aby umieścić dowolny plik graficzny na stronę w postaci znaku wodnego.