Bezpieczne interakcje z wyskakującymi okienkami za pomocą właściwości ograniczających

Uzyskaj izolację od zasobów z innych domen oraz ochronę przed wyciekami z innych witryn podczas interakcji z wyskakującymi okienkami.

Arthur Hemery
GitHub
Maud Nalpas
Maud Nalpas
X GitHub

Dostępna jest nowa wartość zasady otwierającej z innych domen (COOP): restrict-properties. Zapewnia to bezpieczeństwo i ułatwia wdrożenie izolacji zasobów z innych domen, a jednocześnie umożliwia interakcję witryny z wyskakującymi okienkami firm zewnętrznych na potrzeby płatności, uwierzytelniania i innych zastosowań.

Aby zacząć eksperymentować z usługą restrict-properties, skorzystaj z wersji próbnej origin dostępnej w Chrome 116.

Dlaczego warto korzystać z restrict-properties

restrict-properties ma 2 główne przypadki użycia:

Zapobiegaj wyciekom danych z innych witryn bez uszkodzenia

Domyślnie każda witryna może otworzyć aplikację w wyskakującym okienku i uzyskać do niej odwołanie.

Złośliwa witryna może to wykorzystać do przeprowadzenia ataków, takich jak wyciek danych z innej witryny. Aby ograniczyć to ryzyko, możesz używać nagłówka Cross-Origin-Opener-Policy (COOP).

Do tej pory opcje związane z usługą Cross-Origin-Opener-Policy były ograniczone. Możesz:

  • Ustaw właściwość same-origin,, która blokuje wszystkie interakcje z wyskakującymi okienkami pochodzące z różnych domen.
  • Ustaw właściwość same-origin-allow-popups, która blokuje wszystkie interakcje z różnych domen, które otwierają witrynę w wyskakującym okienku.
  • Ustaw unsafe-none, który zezwala na wszystkie interakcje z wyskakującymi okienkami pochodzące z różnych domen.

Z tego powodu strony, które musiały otwierać się w wyskakujących okienkach, nie mogły używać ich w celu egzekwowania COOP. Kluczowe przypadki użycia, takie jak logowanie jednokrotne i płatności, pozostały bez ochrony przed wyciekami z innych witryn.

Cross-Origin-Opener-Policy: restrict-properties rozwiązuje ten problem.

W restrict-properties właściwości, które mogą służyć do zliczania klatek i innych ataków polegających na wycieku danych z innych witryn, są niedostępne, ale dozwolona jest podstawowa komunikacja między oknami przez postMessage i closed.

Zwiększa to bezpieczeństwo witryny przy zachowaniu kluczowych przypadków użycia. Na przykład:

  • Jeśli udostępnisz usługę w wyskakującym okienku, ustawienie Cross-Origin-Opener-Policy: restrict-properties ochroni Twoje konto przed szeregiem ataków polegających na wycieku danych z innych witryn. Nadal możesz otworzyć wszystkie strony, które można było wcześniej otworzyć.
  • Jeśli potrzebujesz dostępu do wyskakującego okienka z innych domen, ustawienie Cross-Origin-Opener-Policy: restrict-properties w podobny sposób ochroni Twoją witrynę przed zliczaniem elementów iframe. Możesz otwierać te same wyskakujące okienka, które otwiera się dzisiaj.
  • Jeśli element otwierający i otwierający ustawiają nagłówek, a strony pochodzą z innych domen, działanie to działa podobnie do jednego z nich, który ustawił nagłówek. Jeśli są one tego samego pochodzenia, jest przyznany pełny dostęp.

Odizolowanie witryny od zasobów z innych domen

Dlaczego potrzebujemy izolacji zasobów z innych domen

Niektóre internetowe interfejsy API zwiększają ryzyko ataków typu Side-channel, takich jak Spectre. Aby ograniczyć to ryzyko, przeglądarki udostępniają izolowane środowisko nazywane izolacją zasobów z innych domen, które jest dostępne po wyrażeniu zgody. W stanie izolowanym od zasobów z innych domen strona może korzystać z funkcji uprzywilejowanych, takich jak SharedArrayBuffer, performance.measureUserAgentSpecificMemory() i precyzyjne liczniki czasu, przy lepszej rozdzielczości, a jednocześnie izoluje źródło od innych źródeł, jeśli nie wyrazi na to zgody.

Do tej pory korzystanie z tych interfejsów API wymagało skonfigurowania Cross-Origin-Opener-Policy: same-origin. Spowoduje to jednak przerwanie potrzebnego Ci wyskakującego okienka z innych domen, takiego jak logowanie jednokrotne czy płatności.

Do włączenia izolacji zasobów z innych domen można teraz używać Cross-Origin-Opener-Policy: restrict-properties zamiast Cross-Origin-Opener-Policy: same-origin. Zamiast przerywać relację otwierającą, ogranicza ją tylko do minimalnego podzbioru komunikacji w window.postMessage() i window.closed.

Aby włączyć izolację zasobów z innych domen, możesz użyć tych 2 nagłówków:

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp

lub

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: credentialless

Więcej informacji o zasadzie credentialless znajdziesz w artykule Wczytywanie zasobów z innych domen bez nagłówków CORP przy użyciu metody COEP: credentialless.

Pokaz

Wypróbuj różne opcje nagłówków w wersji demonstracyjnej izolacji zasobów z innych domen.

Przeprowadź eksperymenty z pierwotnym testem origin

Aby eksperymentować z elementem Cross-Origin-Opener-Policy: restrict-properties, dołącz do okresu próbnego źródła.

.

Obsługiwane przeglądarki

Usługa Cross-Origin-Opener-Policy: restrict-properties jest obecnie obsługiwana tylko w Chrome. Inne przeglądarki aktywnie uczestniczą w dyskusjach na temat standaryzacji.

Najczęstsze pytania

Moja witryna musi komunikować się z wyskakującymi okienkami z tej samej domeny. Czy mam użyć COOP: restrict-properties, aby włączyć izolację zasobów z innych domen?

Ustawienie COOP: restrict-properties zarówno w wyskakującym okienku, jak i na stronie głównej nie spowoduje nałożenia ograniczeń. Ustawienie go tylko w wyskakującym okienku lub tylko na stronie głównej uniemożliwi dostęp do usług innych niż postMessage i closed w otwieraniu, nawet jeśli pochodzą z tej samej domeny.

Czy zbiór dozwolonych właściwości jest stały?

Na podstawie dotychczasowych opinii uznaliśmy, że window.postMessage i window.closed powinny wystarczyć do większości przepływów pracy. Rozważamy jednak udostępnienie ich także w innych usługach. Jeśli masz przypadek użycia, którego nie można rozwiązać przy użyciu samych metod postMessage i closed, napisz swoją opinię w wątku dotyczącego zamiaru eksperymentu.

Zasoby