Chrome nie pozwala na modyfikowanie parametru document.domain

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

Maud Nalpas
Eiji Kitamura

Co się zmienia i dlaczego?

Od Chrome 115 strony nie będą mogły ustawiać document.domain. Chrome sprawi, że document.domain będzie niezmienny. Aby komunikować się między domenami, musisz użyć alternatywnych metod, takich jak postMessage() lub Channel Messaging API.

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

Spodziewamy się, że inne przeglądarki ostatecznie wycofają i usuną tę funkcję. Szczegółowe informacje znajdziesz w sekcji zgodność przeglądarki.

Dlaczego document.domain jest niezmienny?

document.domainzostał zaprojektowany do pobierania lub ustawiania nazwy hosta źródła. Wiele witryn ustawia wartość document.domain, aby umożliwić komunikację między stronami w tej samej witrynie, ale z różnych źródeł.

Jest to wygodna technika, ale wiąże się z ryzykiem związanym z bezpieczeństwem, ponieważ osłabia zasadę tej samej domeny. Obawy dotyczące bezpieczeństwa związane z document.domain spowodowały zmianę specyfikacji, która ostrzega użytkowników przed używaniem tego elementu.

Szczegółowe informacje: dlaczego warto ustawić niezmienność document.domain?

Jak obecnie wykorzystuje się document.domain

Wiele witryn ustawia wartość document.domain, aby umożliwić komunikację między stronami w tej samej witrynie, ale z różnych źródeł.

Witryny tego samego typu, ale z różnych źródeł mają ten sam sufiks eTLD+1, ale różne subdomeny.

Oto jak document.domain było używane do tej pory:

Załóżmy, że strona w domenie https://parent.example.com zawiera stronę iframe z domeny https://video.example.com. Te strony mają ten sam sufiks eTLD+1 (example.com), ale różne subdomeny. Gdy w przypadku obu stron wartość document.domain jest ustawiona na 'example.com', przeglądarka traktuje oba punkty początkowe tak, jakby pochodziły z tej samej domeny.

Ustaw 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 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 przypadku różnych domen na stronie https://parent.example.com w odniesieniu do https://video.example.com.

Witryny ustawiają document.domain, aby ułatwić komunikację dokumentów z tej samej witryny. Ponieważ ta zmiana łagodzi zasady dotyczące tej samej domeny, strona nadrzędna może uzyskać dostęp do dokumentu elementu iframe i przeglądać drzewo DOM, i odwrotnie.

Jest to wygodna technika, ale wiąże się z ryzykiem związanym z bezpieczeństwem.

Problemy z bezpieczeństwem związane z document.domain

Obawy dotyczące bezpieczeństwa związane z document.domain spowodowały zmianę specyfikacji, która ostrzega użytkowników przed używaniem tego protokołu.

Jeśli na przykład 2 strony ustawią document.domain, mogą udawać, że pochodzą z tej samej domeny. Jest to szczególnie ważne, gdy strony korzystają z usługi hostingu współdzielonego z różnymi subdomenami. Ustawienie document.domain otwiera dostęp 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 dotyczącą numeru portu.

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

Zgodność z przeglądarką

Jak sprawdzić, czy moja witryna jest objęta tymi zmianami?

Jeśli ta zmiana wpłynie 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 z ostrzeżeniem o problemie w Narzędziach deweloperskich

Możesz też przeprowadzić w swojej witrynie audyt wycofanego interfejsu API 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ł Ci raporty o wycofaniu, aby powiadomić Cię o tym nadchodzącym wycofaniu. Dowiedz się więcej o korzystaniu z interfejsu API do raportowania w przypadku istniejących usług zbierania raportów lub tworzenia własnego rozwiązania wewnętrznego.

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

Zmiana będzie wprowadzana stopniowo, począwszy od 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 mam alternatywy?

Najlepszym rozwiązaniem jest w ogóle nie modyfikować document.domain, np. hostować stronę i wszystkie ramki składowe w tej samej domenie. Działa to we wszystkich wersjach wszystkich przeglądarek. Może to jednak wymagać znacznych zmian w aplikacji, dlatego warto też rozważyć alternatywne rozwiązania, które nadal obsługują dostęp z innych domen.

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

W większości przypadków interfejsy cross-origin postMessage() lub Channel Messaging API mogą zastąpić document.domain.

W tym przykładzie:

  1. https://parent.example.com wysyła w ramce iframe żądanie https://video.example.com, aby manipulować DOM, wysyłając wiadomość za pomocą postMessage().
  2. https://video.example.com manipuluje DOM, gdy tylko otrzyma wiadomość, i informuje o sukcesie stronę nadrzędną.
  3. https://parent.example.com potwierdza sukces.

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 i zobacz, jak to działa. Jeśli masz konkretne wymagania, które nie będą działać z postMessage() lub interfejsem Channel Messaging API, daj nam znać na Twitterze, oznaczając @ChromiumDev, lub zadaj pytanie na Stack Overflow, dodając tag document.domain.

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

Jeśli masz ważne powody, aby nadal ustawiać wartość 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 Requesting performance isolation with the Origin-Agent-Cluster header (w języku angielskim).

Gdy wyślesz ten nagłówek, dokument będzie mógł nadal ustawiać document.domain, nawet jeśli domyślnie stanie się niezmienny.

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

Konfigurowanie OriginAgentClusterDefaultEnabled na potrzeby zasad przedsiębiorstwa

Opcjonalnie administrator może skonfigurować OriginAgentClusterDefaultEnabled zasadęfalse, aby document.domain ustawienie było domyślnie dostępne w instancjach Chromefalse w całej organizacji. Więcej informacji znajdziesz w dokumentacji dotyczącej listy zasad Chrome Enterprise i zarządzania nimi.

Zasoby

Podziękowania

Zdjęcie: Finan Akbar, Unsplash