www, przekierowanie i treści mieszane

Moduł 3: Adres, https i użytkownicy · Czas czytania: 9 minut

Cel lekcji: Po tej lekcji będą Państwo potrafili wybrać jeden adres główny, przekierować wszystkie warianty do niego jednym przekierowaniem oraz wykryć i rozwiązać problem treści mieszanych.

Kluczowe pojęcia: adres kanoniczny, 301 i 308, łańcuch przekierowań, treści mieszane (mixed content), wyszukiwanie i zamiana w bazie danych, dane zserializowane

Cztery adresy, jedna strona

Państwa strona jest dostępna pod czterema adresami:

http://example.com
http://www.example.com
https://example.com
https://www.example.com

Dla odwiedzającego nie ma to znaczenia, ale dla wyszukiwarek są to cztery różne adresy z tą samą treścią. Również pliki cookie (takie jak ciasteczko logowania) obowiązują dla konkretnej nazwy: ten, kto zaloguje się na www, nie jest zalogowany na domenie bez www. Dlatego wybierają Państwo jeden adres kanoniczny (adres główny) i przekierowują pozostałe trzy właśnie do niego.

Który adres Państwo wybiorą, to kwestia gustu (lekcja 2.1). Chodzi o to, aby adres główny był wszędzie taki sam: w DNS, w certyfikacie, w Ustawienia > Ogólne (lekcja 3.1) oraz w przekierowaniach.

Przekierowanie za pomocą 301, w jednym kroku

Przekierowanie to odpowiedź serwera: „ta strona znajduje się gdzie indziej”. Przeglądarka sama przechodzi wtedy na nowy adres. Kod mówi, jaki to rodzaj przekierowania:

Przekierowanie stałe informuje wyszukiwarki, że nowy adres jest tym właściwym. Przy przekierowaniu tymczasowym nadal zapamiętują stary adres.

Proszę zwrócić uwagę również na łańcuch przekierowań. Załóżmy, że adresem głównym jest https://example.com. Wtedy chcą Państwo mieć:

http://www.example.com   301  https://example.com/
http://example.com       301  https://example.com/
https://www.example.com  301  https://example.com/
https://example.com      200

Każdy wariant trafia do adresu głównego w jednym kroku. Często zdarza się natomiast:

http://www.example.com   301  https://www.example.com/
https://www.example.com  301  https://example.com/

To wprawdzie działa, ale kosztuje dodatkowy krok (dodatkowy czas oczekiwania, zwłaszcza na urządzeniach mobilnych) i dodatkowe uzgadnianie TLS. Gorsze jest błędne koło: serwer WWW przekierowuje na https, WordPress przekierowuje z powrotem na http, ponieważ adresy w ustawieniach wciąż wskazują na http, a przeglądarka zgłasza „zbyt wiele przekierowań”. Wtedy dwa ustawienia działają przeciwko sobie. Proszę zadbać o to, aby tylko jedna strona wykonywała przekierowanie na https (serwer WWW lub panel) i aby adresy w WordPressie były już ustawione na adres główny.

WordPress sam także wykonuje przekierowania: jeśli ktoś poprosi o https://www.example.com/contact/, a adresem strony jest https://example.com, to WordPress przekieruje na https://example.com/contact/. Działa to tylko wtedy, gdy żądanie dotrze do WordPressa, czyli jeśli serwer WWW kieruje nazwę www do tej samej strony.

Treści mieszane

Treści mieszane (mixed content) to strona https, która ładuje elementy przez http://: obrazek, arkusz stylów, skrypt, czcionkę lub osadzony film. Przeglądarka uznaje to za niebezpieczne, ponieważ takie elementy mogą zostać zmienione po drodze.

• Skrypty, arkusze stylów i ramki iframe ładowane przez http są blokowane przez przeglądarki. Strona wygląda wtedy na zepsutą albo jakaś funkcja nie działa.
• Obrazki, audio i wideo ładowane przez http nowoczesne przeglądarki próbują automatycznie pobrać przez https; jeśli się to nie uda, zostają zablokowane. Kłódka może wtedy pokazywać ostrzeżenie.

Skąd się to bierze:

1. Stare odnośniki w treści: strona, która wcześniej działała na http, ma w tysiącach wpisów coś w rodzaju <img src="http://example.com/wp-content/uploads/...">. WordPress zapisuje takie odnośniki dosłownie w bazie danych.
2. Ustawienia motywu lub wtyczki z pełnym adresem, na przykład logo lub tło z http://.
3. Elementy zewnętrzne z innej strony, dostępne wyłącznie przez http. Należy je zastąpić lub usunąć.
4. Adresy w Ustawienia > Ogólne, które wciąż wskazują na http (lekcja 3.1).

Jak to znaleźć

Proszę otworzyć stronę, nacisnąć F12 i spojrzeć w zakładkę Konsola. Przeglądarka zgłosi każdą treść mieszaną wraz z adresem danego elementu. Można też przeszukać kod źródłowy strony (Ctrl+U) w poszukiwaniu src="http:// i href="http://. Zwykłe odnośniki do innych stron w tekście (<a href="http://...">) nie powodują treści mieszanych; chodzi o elementy, które strona ładuje.

Wyszukiwanie i zamiana, ale zrobione dobrze

Rozwiązaniem dla starych odnośników w treści jest zamiana każdego http://example.com w bazie danych na https://example.com. Pokusą jest polecenie SQL w rodzaju:

UPDATE wp_options SET option_value = REPLACE(option_value, 'http://example.com', 'https://example.com');

Proszę tego nie robić. Wiele ustawień motywów, wtyczek i widżetów jest zapisanych w formie zserializowanej. Wygląda to tak:

s:27:"http://example.com/logo.png";

s:27 oznacza: dalej następuje tekst o długości 27 znaków. Po prostej zamianie tekst ma 28 znaków (doszła jedna litera s), ale nadal widnieje liczba 27. PHP nie może wówczas odczytać wartości i ustawienie po prostu znika: puste menu, zniknięte logo, brakujące widżety.

Proszę użyć narzędzia, które aktualizuje te długości:

• WP-CLI: najpierw sprawdzić, potem wykonać.

wp search-replace 'http://example.com' 'https://example.com' --all-tables --dry-run
wp search-replace 'http://example.com' 'https://example.com' --all-tables

Dzięki --dry-run zobaczą Państwo, ile zamian zostałoby wykonanych w każdej tabeli, bez wprowadzania żadnych zmian.

• Wtyczka do wyszukiwania i zamiany, która obsługuje dane zserializowane (w katalogu wtyczek wordpress.org jest ich kilka). Po zakończeniu proszę usunąć wtyczkę.

Zawsze najpierw proszę wykonać kopię zapasową (lekcja 8.1). Nigdy też nie wolno zamieniać czegoś takiego jak example.com bez poprzedzającego http://: w ten sposób zmienią Państwo także adresy e-mail i inne teksty.

W praktyce: jak to wygląda w panelu

Jako przykład posłużymy się DirectAdmin. Inne panele mają podobny przełącznik dla „zawsze https”.

1. W ustawieniach domeny proszę włączyć Wymuś SSL z przekierowaniem https (lekcja 3.1).
2. Przy domenie proszę wybrać, czy www ma przejść na domenę bez www, czy odwrotnie (w DirectAdmin w ustawieniach domeny; w innych przypadkach za pomocą przekierowania przez Przekierowania lub .htaccess).
3. Proszę sprawdzić łańcuch przekierowań za pomocą poniższego polecenia lub narzędzi deweloperskich przeglądarki (zakładka Sieć, zaznaczona opcja „Zachowaj dziennik”).

Podsumowanie

• Proszę wybrać jeden adres kanoniczny i skierować do niego pozostałe trzy warianty za pomocą 301 (lub 308), w jednym kroku.
• Niech tylko jedna strona przekierowuje na https; w przeciwnym razie powstanie błędne koło.
• Treści mieszane to strona https, która ładuje elementy przez http; konsola przeglądarki pokazuje, które.
• Stare odnośniki w bazie danych należy zamieniać poleceniem wp search-replace lub wtyczką rozumiejącą dane zserializowane, nigdy prostym SQL-owym REPLACE.
• Zawsze najpierw kopia zapasowa i najpierw próba.

Quiz

Zadanie

Zadanie A3.2: Jeden adres główny i brak treści mieszanych. Proszę wpisać swoją domenę. Program otworzy cztery warianty (http i https, z www i bez www) i prześledzi przekierowania. Poprawnie jest, gdy wszystkie cztery warianty prowadzą do tego samego adresu z https, z co najwyżej jednym przekierowaniem na wariant i wyłącznie kodami stałymi (301 lub 308). Następnie program odczyta kod HTML strony głównej i wyszuka skrypty, arkusze stylów, obrazki, ramki iframe i czcionki ładowane przez http://.

Więcej informacji

Poniższe artykuły opisują kroki w panelach WebOké; w innych panelach działają one w podobny sposób.

• Instrukcja DirectAdmin 6.4: Odwiedzających zawsze kierować na https
• Instrukcja DirectAdmin 4.7: Przekierowanie strony: przekierowanie domeny lub podstrony
• Przekierowanie odwiedzających na https jest obowiązkowe.
• Bezpłatny kurs DNS 3.4: www, przekierowanie i czego DNS nie robi
• Treści mieszane (MDN, w języku angielskim): https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
• wp search-replace (developer.wordpress.org, w języku angielskim): https://developer.wordpress.org/cli/commands/search-replace/