Chrome nie pozwala na modyfikowanie parametru document.domain

Jeśli Twoja witryna korzysta z ustawienia document.domain, musisz podjąć odpowiednie działania.

.

Co się zmienia i dlaczego?

Od wersji Chrome 115 strony internetowe nie będą mogły ustawiać wartości document.domain: Chrome uczyni tę wartość niezmienną.document.domain Aby komunikować się między domenami, musisz użyć alternatywnych metod, takich jak postMessage() lub interfejs Channel Messaging API.

Pamiętaj, że ta zmiana będzie wprowadzana stopniowo.

Spodziewamy się, że inne przeglądarki w przyszłości wycofają tę funkcję i usuną ją. Szczegółowe informacje znajdziesz w sekcji Zgodność przeglądarek.

Dlaczego warto uczynić element document.domain niezmiennym?

document.domain została zaprojektowana do pobierania lub ustawiania nazwy hosta źródła. Wiele witryn używa opcji document.domain, aby umożliwić komunikację między stronami w tej samej witrynie, ale w różnych domenach.

Chociaż jest to wygodna technika, stwarza ona ryzyko dla bezpieczeństwa, ponieważ osłabia zasadę dotyczącą tej samej domeny. Obawy dotyczące bezpieczeństwa związane z użyciem document.domain spowodowały zmianę specyfikacji, która ostrzega użytkowników przed używaniem tego typu plików.

Szczegóły: dlaczego warto ustawić document.domain jako niezmienny?

Jak document.domain jest używany obecnie

Wiele witryn ma ustawioną wartość document.domain, aby umożliwić komunikację między stronami w tej samej witrynie, ale w różnych domenach.

Witryny w tej samej witrynie, ale z różnych źródeł mają ten sam eTLD+1, ale różne subdomeny.

Do tej pory document.domain zostało wykorzystane w ten sposób:

Załóżmy, że strona https://parent.example.com zawiera element iframe ze strony https://video.example.com. Te strony mają tę samą domenę eTLD + 1 (example.com) z różnymi subdomenami. Gdy document.domain obu stron jest ustawiony na 'example.com', przeglądarka traktuje te 2 źródła tak, jakby pochodziły z tej samej domeny.

Ustaw wartość document.domain dla https://parent.example.com:

// Confirm the current origin of "parent.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

Ustaw wartość document.domain dla https://video.example.com:

// Confirm the current origin of "video.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

Możesz teraz utworzyć manipulację DOM w różnych domenach na stronie https://parent.example.com w przypadku https://video.example.com.

Witryny ustawiają document.domain, aby ułatwić komunikację między dokumentami w tej samej witrynie. Ta zmiana łagodzi zasady dotyczące tego samego źródła, dzięki czemu strona nadrzędna może uzyskać dostęp do dokumentu iframe i przechodzić po drzewie DOM, a także odwrotnie.

Jest to wygodna technika, ale wiąże się z ryzykiem dla bezpieczeństwa.

Problemy z bezpieczeństwem w document.domain

Obawy dotyczące zabezpieczeń związane z użyciem document.domain spowodowały zmianę specyfikacji, która ostrzega użytkowników przed używaniem tego typu urządzeń.

Jeśli na przykład 2 strony mają ustawioną wartość document.domain, mogą udawać, że mają ten sam element źródła. Jest to szczególnie ważne, gdy te strony korzystają z usługi współdzielonego hostingu z różnymi subdomenami. Ustawienie document.domain powoduje otwarcie dostępu do wszystkich innych witryn hostowanych przez tę samą usługę, co ułatwia atakującym dostęp do Twoich witryn. Jest to możliwe, ponieważ document.domain ignoruje część domeny zawierającą numer portu.

Więcej informacji o znaczeniu ustawień document.domain dla zabezpieczeń znajdziesz na stronie „Document.domain” w MDN.

Zgodność z przeglądarką

Skąd mam wiedzieć, czy moja witryna jest dotknięta?

Jeśli ta zmiana ma wpływ na Twoją witrynę, Chrome wyświetli ostrzeżenie w panelu Problemy w Narzędziach dla programistów. To ostrzeżenie zostało dodane w 2022 r. Zwróć uwagę na żółtą flagę w prawym górnym rogu Narzędzi deweloperskich.

Zrzut ekranu pokazujący ostrzeżenie o problemie w Narzędziach dla programistów

Możesz też przeprowadzić audyt interfejsów API wycofanych z Lighthouse, aby znaleźć wszystkie interfejsy API, które mają zostać usunięte z Chrome.

Jeśli masz skonfigurowany interfejs API do raportowania, Chrome wysłał do Ciebie raporty o wycofaniu, aby powiadomić Cię o tym. Dowiedz się więcej o korzystaniu z interfejsu API do raportowania w połączeniu z dotychczasowymi usługami zbierania raportów lub przez opracowanie własnego rozwiązania wewnętrznego.

Jak mogę zobaczyć, jak działa ta zmiana?

Zmiana będzie wprowadzana stopniowo, począwszy od wersji Chrome 115. Aby zobaczyć tę zmianę w działaniu, nawet jeśli nie została jeszcze wdrożona w Twojej przeglądarce Chrome, możesz ją włączyć w ten sposób:

  1. Otwórz: chrome://flags/#origin-agent-cluster-default
  2. Kliknij Włącz.
  3. Uruchom ponownie Chrome.

Jakie alternatywy mogę zastosować?

Najlepszym rozwiązaniem jest całkowite pominięcie document.domain, na przykład przez hostowanie strony i wszystkich jej ramek w tym samym źródle. Działa to we wszystkich wersjach wszystkich przeglądarek. Może to jednak wymagać znacznego przerobienia aplikacji, dlatego warto też przyjrzeć się alternatywom, które nadal obsługują dostępy między domenami.

Zamiast interfejsu document.domain użyj interfejsu postMessage() lub Channel Messaging API

W większości przypadków interfejs postMessage() lub Channel Messaging API może zastąpić interfejs document.domain.

W tym przykładzie:

  1. https://parent.example.com wysyła https://video.example.com w ramach iframe, aby manipulować DOM, wysyłając wiadomość przez postMessage().
  2. https://video.example.com modyfikuje DOM, gdy tylko otrzyma wiadomość, i powiadamia element nadrzędny o powrocie do niego.
  3. https://parent.example.com potwierdza, że wszystko się udało.

https://parent.example.com:

// Send a message to https://video.example.com
iframe.postMessage('Request DOM manipulation', 'https://video.example.com');

// Receive messages
iframe.addEventListener('message', (event) => {
  // Reject all messages except ones from https://video.example.com
  if (event.origin !== 'https://video.example.com') return;

  // Filter success messages
  if (event.data === 'succeeded') {
    // DOM manipulation is succeeded
  }
});

https://video.example.com:

// Receive messages
window.addEventListener('message', (event) => {
  // Reject all messages except ones from https://parent.example.com
  if (event.origin !== 'https://parent.example.com') return;

  // Do a DOM manipulation on https://video.example.com.

  // Send a success message to https://parent.example.com
  event.source.postMessage('succeeded', event.origin);
});

Wypróbuj, jak to działa. Jeśli masz konkretne wymagania, które nie działają z postMessage() lub interfejsem Channel Messaging API, daj nam znać na Twitterze za pomocą konta @ChromiumDev lub zadaj pytanie na Stack Overflow z tagiem document.domain.

W ostateczności wyślij nagłówek Origin-Agent-Cluster: ?0

Jeśli masz ważne powody, aby nadal używać ustawienia document.domain, możesz wysłać nagłówek odpowiedzi Origin-Agent-Cluster: ?0 wraz z dokumentem docelowym.

Origin-Agent-Cluster: ?0

Nagłówek Origin-Agent-Cluster informuje przeglądarkę, czy dokument powinien być obsługiwany przez grupę agentów ze źródłem jako kluczem. Więcej informacji o Origin-Agent-Cluster znajdziesz w artykule Prośba o izolację skuteczności za pomocą nagłówka Origin-Agent-Cluster.

Gdy wysyłasz ten nagłówek, dokument może nadal ustawiać wartość document.domain, nawet gdy domyślnie jest ona niezmienna.

Wszystkie inne dokumenty, które wymagają takiego działania, również muszą wysyłać Origin-Agent-Cluster (pamiętaj, że document.domain nie ma żadnego wpływu, jeśli tylko jeden dokument go ustawia).

Konfigurowanie OriginAgentClusterDefaultEnabled do obsługi zasad korporacyjnych

Opcjonalnie administrator może skonfigurować zasadę OriginAgentClusterDefaultEnabled na false, aby umożliwić domyślne stosowanie document.domain w przypadku instancji Chrome w całej organizacji. Więcej informacji znajdziesz w artykule Lista zasad Chrome Enterprise i zarządzanie nimi | Dokumentacja.

Zasoby

Podziękowania

Zdjęcie: Finan Akbar z Unsplash