Jeśli Twoja witryna wymaga ustawienia document.domain, musisz podjąć odpowiednie kroki.
Co się zmienia i dlaczego?
Od Chrome 115 witryny nie będą mogły konfigurować document.domain
: Chrome sprawi, że document.domain
stanie się niezmienna. Do komunikacji z innymi domenami musisz użyć alternatywnych metod, takich jak postMessage()
czy Channel Messaging API.
Zwróć uwagę, że ta zmiana będzie wprowadzana stopniowo.
Spodziewamy się, że w przyszłości inne przeglądarki wycofają i usuną tę funkcję. Więcej informacji znajdziesz w sekcji dotyczącej zgodności przeglądarki.
Dlaczego ustawienie document.domain
ma być stałe?
Zadanie document.domain
zostało zaprojektowane do pobierania lub ustawiania nazwy hosta źródła. Wiele witryn ustawia document.domain
, aby umożliwić komunikację między stronami w tej samej witrynie, ale z innych domen.
Jest to wygodna metoda, ale stanowi zagrożenie dla bezpieczeństwa, ponieważ ogranicza zasadę dotyczącą tego samego pochodzenia.
Obawy związane z bezpieczeństwem związane z document.domain
spowodowały zmianę specyfikacji, która ostrzega użytkowników, aby jej nie używali.
Więcej informacji: dlaczego nie można zmienić parametru document.domain?
Jak obecnie korzysta się z aplikacji document.domain
Wiele witryn ustawia document.domain
, aby umożliwić komunikację między stronami w tej samej witrynie, ale z innych domen.
Witryny z tej samej witryny, ale z innych domen, mają taką samą wartość eTLD+1, ale różne subdomeny.
Dotychczas w ten sposób wykorzystywano document.domain
:
Załóżmy, że strona w domenie https://parent.example.com
zawiera stronę iframe z witryny https://video.example.com
. Te strony mają tę samą wartość eTLD + 1 (example.com
) z różnymi subdomenami. Jeśli parametr document.domain
obu stron ma wartość 'example.com'
, przeglądarka traktuje 2 źródła tak, jakby były tego samego pochodzenia.
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 między domenami w tabeli https://parent.example.com
z elementem https://video.example.com
.
Witryny ustawiają document.domain
, aby ułatwić komunikację między dokumentami z tej samej witryny. Ta zmiana łagodzi zasadę tego samego źródła, więc strona nadrzędna ma dostęp do dokumentu elementu iframe i przemierza drzewo DOM (i odwrotnie).
Jest to wygodna technika, ale stanowi zagrożenie dla bezpieczeństwa.
Problemy dotyczące bezpieczeństwa związane z usługą document.domain
Obawy związane z bezpieczeństwem związane z usługą document.domain
spowodowały zmianę w specyfikacji, która ostrzega użytkowników, aby nie korzystali z niej.
Jeśli np. 2 strony z ustawieniem document.domain
mogą udawać, że są tego samego pochodzenia. Jest to szczególnie ważne, gdy strony te korzystają
z udostępnianej usługi hostingowej z różnymi subdomenami. Skonfigurowanie ustawienia document.domain
daje dostęp do wszystkich stron hostowanych przez tę samą usługę, co ułatwia hakerom dostęp do Twoich witryn. Jest to możliwe, ponieważ document.domain
ignoruje część numeru portu w domenie.
Aby dowiedzieć się więcej o wpływie ustawień document.domain
na bezpieczeństwo, przeczytaj stronę „Document.domain” w MDN.
Zgodność z przeglądarką
- Specyfikacja HTML zawiera informację, że daną funkcję należy usunąć.
- Mozilla rozważa wyłączenie zasady
document.domain
jako domyślnego wartego prototypowania. - Zespół WebKit zaznaczył, że są umiarkowanie pozytywne co do wycofania metody ustawiającej
document.domain
. - Dyskusja z innymi dostawcami przeglądarek
- WhatWG / HTML grupy roboczej Pull Request (oczekuje na doświadczenie w eksperymentach)
Jak sprawdzić, czy dotyczy to mojej witryny?
Jeśli ta zmiana będzie miała wpływ na Twoją witrynę, w panelu Problemy w Narzędziach deweloperskich Chrome wyświetli ostrzeżenie – to ostrzeżenie zostało dodane w 2022 roku. Zwróć uwagę na żółtą flagę w prawym górnym rogu Narzędzi deweloperskich.
Możesz też przeprowadzić w swojej witrynie kontrolę wycofanych interfejsów API LightHouse, by znaleźć wszystkie interfejsy API, które mają zostać usunięte z Chrome.
Jeśli masz skonfigurowany interfejs API do raportowania, Chrome będzie Ci wysyłać raporty o wycofaniu, by poinformować Cię o nadchodzącym wycofaniu. Dowiedz się więcej o tym, jak używać interfejsu API do raportowania z istniejącymi usługami zbierania raportów lub przez stworzenie własnego rozwiązania.
Jak mogę zobaczyć tę zmianę w praktyce?
Ta zmiana będzie wdrażana stopniowo, począwszy od Chrome 115. Aby zobaczyć, jak wygląda ta zmiana, nawet jeśli nie została jeszcze wprowadzona w przeglądarce Chrome, możesz ją włączyć w ten sposób:
- Otwórz aplikację
chrome://flags/#origin-agent-cluster-default
- Wybierz Włącz.
- Uruchom ponownie Chrome.
Jakich alternatywnych rozwiązań mogę użyć?
Najlepszym sposobem jest niezmodyfikowanie elementu document.domain
, na przykład przez hostowanie strony i wszystkich ramek składowych w tym samym źródle. Działa to we wszystkich wersjach wszystkich przeglądarek. Może to jednak wymagać znacznego przerobienia aplikacji, warto więc rozważyć alternatywne rozwiązania, które nadal zapewniają dostęp z innych domen.
Zamiast document.domain
używaj interfejsu postMessage()
lub Channel Messaging API
W większości przypadków interfejsy API z innych domen postMessage()
lub Channel Messaging API mogą zastąpić document.domain
.
W tym przykładzie:
https://parent.example.com
żądahttps://video.example.com
w elemencie iframe, by manipulować DOM, wysyłając wiadomość przezpostMessage()
.https://video.example.com
manipuluje DOM natychmiast po otrzymaniu wiadomości i powiadamia o powodzeniu z powrotem do systemu nadrzędnego.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 go i zobacz, jak to działa. Jeśli masz konkretne wymagania, które nie będą działać w usłudze postMessage()
ani w interfejsie Channel Messaging API, daj nam znać na Twitterze za pomocą @ChromiumDev lub zapytaj na Stack Overflow, używając tagu document.domain
.
W ostateczności wyślij nagłówek Origin-Agent-Cluster: ?0
Jeśli masz ważne powody, aby kontynuować konfigurowanie funkcji 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 ma być obsługiwany przez klaster agentów ze źródłem jako kluczem. Więcej informacji o Origin-Agent-Cluster
znajdziesz w artykule Wysyłanie prośby o izolację wydajności za pomocą nagłówka Origin-Agent-Cluster
.
Gdy wyślesz ten nagłówek, dokument może nadal ustawiać document.domain
, nawet gdy domyślnie stanie się on stały.
Wszystkie inne dokumenty, które wymagają tego działania, również muszą wysyłać Origin-Agent-Cluster
(pamiętaj, że document.domain
nie będzie działać, jeśli ustawisz go tylko w jednym dokumencie).
Konfigurowanie zasady OriginAgentClusterDefaultEnabled
dla zasady przedsiębiorstwa
Opcjonalnie administrator może skonfigurować zasadę OriginAgentClusterDefaultEnabled
na false
, aby domyślnie skonfigurować ustawienie document.domain
w instancjach Chrome w całej organizacji. Więcej informacji znajdziesz w artykule Lista zasad Chrome Enterprise i zarządzanie nimi | Dokumentacja.
Zasoby
Document.domain
– internetowe interfejsy API | MDN- Izolacja źródeł i wycofywanie
document.domain
- Wycofuję
document.domain
. · Problem nr 564 · w3ctag/design-reviews
Podziękowania
Zdjęcie: Finan Akbar, Unsplash