Czym jest X-Frame-Options?

X-Frame-Options to nagłówek odpowiedzi HTTP, który mówi przeglądarce, czy Twoja strona może być wyświetlana w elemencie <iframe>, <frame> lub <object>. Jego głównym celem jest zapobieganie atakom clickjacking — klasie ataków, w których złośliwa witryna osadza Twoją stronę niewidocznie i nakłania odwiedzających do wykonania niezamierzonych działań.

Choć X-Frame-Options jest jednym ze starszych nagłówków bezpieczeństwa (wprowadzony około 2009 roku), jest nadal szeroko wdrażany i zapewnia ważną ochronę. Zobaczmy, dlaczego ma znaczenie, jak działa i co właściciele witryn WordPress powinni wiedzieć.

Jak faktycznie działają ataki clickjacking

Clickjacking jest koncepcyjnie zaskakująco prosty. Załóżmy, że prowadzisz witrynę WordPress z sekcją członkowską, a strona profilu ma przycisk "Usuń moje konto". Atakujący tworzy stronę, która wygląda jak zabawny quiz lub gra. Osadza Twoją stronę profilu w niewidocznym iframe, dokładnie nad swoim przyciskiem "Kliknij tutaj, aby zobaczyć swój wynik".

Gdy odwiedzający klika to, co myśli, że jest niewinnym przyciskiem na stronie atakującego, w rzeczywistości klika przycisk "Usuń moje konto" na Twojej ukrytej stronie. Jeśli odwiedzający jest zalogowany na Twojej stronie (a większość przeglądarek przechowuje ciasteczka sesji), akcja zostaje wykonana. Odwiedzający nie ma pojęcia, co się właśnie stało.

Ta technika była używana w prawdziwych atakach do:

• Zmiany ustawień prywatności na kontach mediów społecznościowych
• Autoryzacji aplikacji OAuth bez wiedzy użytkownika
• Klikania reklam w celu generowania oszukańczych przychodów
• Umożliwiania dostępu do kamery lub mikrofonu w starszych przeglądarkach
• Wykonywania przelewów pieniężnych w bankowości internetowej

Atak działa, ponieważ przeglądarka nie ma wbudowanego sposobu, by wiedzieć, że iframe jest używany złośliwie. X-Frame-Options daje Twojemu serwerowi sposób na całkowitą rezygnację z osadzania w iframe.

Wartości nagłówka X-Frame-Options

Nagłówek obsługuje dwie praktyczne wartości (plus trzecią, przestarzałą):

• DENY: strona nie może być wyświetlana w żadnym frame, kropka. Żadna strona, nawet Twoja, nie może osadzić tej strony w iframe. To najsurowsze ustawienie i pasuje do stron, które nigdy nie powinny być framowane, takich jak strony logowania lub panele administracyjne.
• SAMEORIGIN: strona może być wyświetlana w frame tylko wtedy, gdy strona ramowa ma to samo origin (ten sam protokół, domenę i port). To najczęściej używana wartość, ponieważ pozwala Twojej własnej witrynie używać iframe'ów, jednocześnie blokując zewnętrzne strony.
• ALLOW-FROM uri: miało pozwolić określić jedno dozwolone origin, które może osadzać Twoją stronę. Jednak nigdy nie było konsekwentnie wspierane przez przeglądarki. Chrome i Safari nigdy go nie zaimplementowały. Firefox wspierał je przez chwilę, ale potem porzucił wsparcie. Ta wartość jest praktycznie martwa i nie powinna być używana.

Kiedy używać DENY a kiedy SAMEORIGIN w WordPressie

Dla większości witryn WordPress SAMEORIGIN jest właściwym wyborem. Oto dlaczego:

WordPress sam używa iframe'ów w kilku miejscach. Customizer motywu ładuje podgląd Twojej strony w iframe. Uploader biblioteki mediów używa iframe'ów. Okno dialogowe "Wstaw multimedia" klasycznego edytora również. Jeśli ustawisz DENY, wszystkie te funkcje przestaną działać, ponieważ nawet Twoja własna domena nie będzie mogła osadzić strony.

DENY ma sens dla konkretnych stron, gdzie osadzanie nigdy nie powinno się zdarzyć, takich jak samodzielna strona logowania lub strona płatności. Ale jako domyślne ustawienie dla całej witryny WordPress, SAMEORIGIN zapewnia potrzebną ochronę, nie psując funkcjonalności admina.

Jeśli prowadzisz konfigurację headless WordPress, gdzie interfejs administracyjny jest na jednej domenie, a frontend na innej, musisz być tu dodatkowo ostrożny, ponieważ SAMEORIGIN pozwala tylko na osadzanie z dokładnie tego samego origin.

Dlaczego ALLOW-FROM zostało wycofane

Warto zrozumieć wycofanie ALLOW-FROM, ponieważ ilustruje szerszy punkt dotyczący nagłówków bezpieczeństwa sieciowego. Dyrektywa była częścią oryginalnej specyfikacji X-Frame-Options, a pomysł był prosty: pozwolić stronie powiedzieć "tylko ta konkretna domena może mnie osadzać". W praktyce miała kilka problemów:

• Akceptowała tylko jeden URI, więc nie można było dodać do whitelisty wielu domen
• Chrome nigdy go nie zaimplementował (najczęściej używana przeglądarka świata po prostu go ignorowała)
• Safari również nigdy go nie wspierało
• Zachowanie było niespójne w przeglądarkach, które go wspierały

Dyrektywa CSP frame-ancestors została zaprojektowana jako właściwe zastępstwo, ze wsparciem dla wielu origins i spójnym zachowaniem między przeglądarkami. Jeśli musisz zezwolić konkretnym zewnętrznym domenom na osadzanie Twoich stron, frame-ancestors jest sposobem.

X-Frame-Options kontra CSP frame-ancestors

Dyrektywa frame-ancestors nagłówka Content-Security-Policy służy temu samemu celowi co X-Frame-Options, ale z większą elastycznością:

Content-Security-Policy: frame-ancestors 'self'

To jest równoważne z X-Frame-Options: SAMEORIGIN. Ale frame-ancestors wspiera również wiele origins:

Content-Security-Policy: frame-ancestors 'self' https://trusted-partner.com https://another-domain.com

To byłoby niemożliwe z samym X-Frame-Options.

Gdy oba nagłówki są obecne, zachowanie przeglądarki się różni. Nowoczesne przeglądarki generalnie dają pierwszeństwo frame-ancestors nad X-Frame-Options. Zalecaną praktyką jest jednak wysyłanie obu nagłówków dla maksymalnej kompatybilności. Starsze przeglądarki, które nie rozumieją CSP, korzystają z X-Frame-Options, podczas gdy nowoczesne używają frame-ancestors.

Oto przykład wspólnego używania obu:

X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self'

Konfiguracja X-Frame-Options dla WordPressa

WordPress domyślnie wysyła X-Frame-Options: SAMEORIGIN dla sekcji administracyjnej (wp-admin). Dzieje się to w wp-includes/functions.php przez funkcję send_frame_options_header(). Jednak frontend Twojej strony domyślnie nie otrzymuje tego nagłówka.

Aby dodać go w całej witrynie przez Apache, umieść to w .htaccess:

Header always set X-Frame-Options "SAMEORIGIN"

Dla Nginx:

add_header X-Frame-Options "SAMEORIGIN" always;

Możesz też ustawić go przez PHP w motywie lub wtyczce:

add_action('send_headers', function() {
    header('X-Frame-Options: SAMEORIGIN');
});

Jeśli używasz wtyczek, które muszą osadzać Twoją stronę w iframe na innej domenie (niektóre narzędzia A/B testów, widżety czatu na żywo lub usługi podglądu), być może będziesz musiał dostosować podejście. W takim przypadku użyj CSP frame-ancestors, aby dodać do whitelisty te konkretne domeny, zamiast całkowicie usuwać X-Frame-Options.

Co sprawdza InspectWP

InspectWP weryfikuje, czy Twoja witryna WordPress wysyła nagłówek X-Frame-Options na swoich stronach frontendowych. Jeśli go brakuje, raport sygnalizuje to jako problem bezpieczeństwa, ponieważ każda strona może osadzić Twoje strony w iframe, umożliwiając ataki clickjacking przeciwko Twoim odwiedzającym. Raport pokazuje też wartość nagłówka, jeśli jest obecny, abyś mógł zweryfikować, że jest ustawiony na SAMEORIGIN lub DENY w zależności od konfiguracji.