Chrome отключает изменение document.domain

Если ваш веб-сайт использует параметр document.domain, вам необходимо предпринять соответствующие действия.

Мод Налпас
Эйдзи Китамура

Что меняется и почему?

Начиная с Chrome 115 , веб-сайты не смогут устанавливать document.domain : Chrome сделает document.domain неизменяемым. Для междоменной связи необходимо использовать альтернативные подходы, такие как postMessage() или API обмена сообщениями через каналы.

Обратите внимание, что это изменение будет внедряться постепенно.

Мы ожидаем, что другие браузеры со временем откажутся от этой функции и удалят её. Подробности см. в разделе « Совместимость с браузерами» .

Зачем делать document.domain неизменяемым?

document.domain был разработан для получения или установки имени хоста источника. Многие веб-сайты устанавливают document.domain , чтобы обеспечить связь между страницами, находящимися на одном сайте, но в разных источниках .

Хотя это удобный метод, он создает угрозу безопасности, поскольку ослабляет политику одного источника . Опасения по поводу безопасности, связанные с document.domain , привели к изменению спецификации, в которой пользователей предупреждают о необходимости избегать его использования .

Подробнее: Зачем делать document.domain неизменяемым?

Как сегодня используется document.domain

Многие веб-сайты устанавливают document.domain , чтобы разрешить обмен данными между страницами, находящимися на одном сайте, но расположенными в разных местах .

Сайты, расположенные в одном и том же месте, но имеющие разные источники, обладают одинаковым eTLD+1 , но разными субдоменами.

Вот как до настоящего времени использовался параметр document.domain :

Допустим, страница по адресу https://parent.example.com содержит встроенную iframe-страницу с https://video.example.com . Эти страницы имеют один и тот же eTLD+1 ( example.com ), но разные поддомены. Когда в document.domain обеих страниц установлено значение 'example.com' , браузер рассматривает оба источника как имеющие один и тот же домен.

Установите document.domain для 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);

Установите document.domain для 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);

Теперь вы можете создавать междоменные манипуляции с DOM на https://parent.example.com по отношению к https://video.example.com .

Веб-сайты устанавливают document.domain , чтобы упростить взаимодействие документов, находящихся на одном сайте. Поскольку это изменение смягчает политику одного источника , родительская страница может получить доступ к документу iframe и перемещаться по дереву DOM, и наоборот.

Это удобный метод, однако он сопряжен с риском для безопасности.

Проблемы безопасности, связанные с document.domain

Проблемы безопасности, связанные с document.domain , привели к изменению спецификации, в которой пользователям рекомендуется избегать его использования .

Например, если две страницы задают параметр document.domain , они могут имитировать один и тот же источник. Это особенно критично, когда эти страницы используют общий хостинг с разными поддоменами. Установка document.domain открывает доступ ко всем другим сайтам, размещенным на том же хостинге, что облегчает злоумышленникам доступ к вашим сайтам. Это возможно, потому что document.domain игнорирует часть домена, относящуюся к номеру порта.

Чтобы узнать больше о последствиях для безопасности, связанных с настройкой параметра document.domain , ознакомьтесь со страницей "Document.domain" на MDN .

Совместимость с браузерами

Как узнать, затронут ли мой сайт?

Если ваш веб-сайт затронут этим изменением, Chrome выдаст предупреждение в панели «Проблемы» в инструментах разработчика — это предупреждение было добавлено в 2022 году. Обратите внимание на желтый флажок в правом верхнем углу инструментов разработчика.

Скриншот предупреждения об ошибке в инструментах разработчика.

Вы также можете проверить свой сайт с помощью аудита устаревших API LightHouse, чтобы найти все API, которые планируется удалить из Chrome.

Если вы настроили API отчетов, Chrome отправил вам уведомления о предстоящем прекращении поддержки. Узнайте больше о том, как использовать API отчетов с существующими сервисами сбора отчетов или путем создания собственного решения.

Как я могу наблюдать эти изменения в действии?

Изменения будут внедряться постепенно, начиная с Chrome 115. Чтобы увидеть эти изменения в действии, даже если они еще не появились в вашем браузере Chrome, вы можете включить их следующим образом:

  1. Откройте chrome://flags/#origin-agent-cluster-default
  2. Выберите «Включить».
  3. Перезапустите Chrome.

Какие альтернативы я могу использовать?

Наилучший вариант — вообще не изменять document.domain , например, разместив страницу и все составляющие её фреймы на одном и том же источнике. Это работает во всех версиях всех браузеров. Но это может потребовать существенной переработки приложения, поэтому стоит также рассмотреть альтернативы, которые продолжают поддерживать междоменный доступ.

Используйте postMessage() или API обмена сообщениями через каналы вместо document.domain

В большинстве случаев для замены document.domain можно использовать postMessage() или Channel Messaging API для междоменных запросов.

В следующем примере:

  1. https://parent.example.com запрашивает у https://video.example.com внутри iframe возможность манипулировать DOM, отправляя сообщение через postMessage() .
  2. https://video.example.com манипулирует DOM сразу после получения сообщения и уведомляет родительский элемент об успехе.
  3. https://parent.example.com признает успех.

На сайте 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);
});

Попробуйте и посмотрите, как это работает. Если у вас есть особые требования, которые не будут работать с postMessage() или Channel Messaging API, сообщите нам об этом в Твиттере через @ChromiumDev или задайте вопрос на Stack Overflow, используя тег document.domain .

В крайнем случае, отправьте заголовок Origin-Agent-Cluster: ?0

Если у вас есть веские причины продолжать устанавливать document.domain , вы можете отправить заголовок ответа Origin-Agent-Cluster: ?0 вместе с целевым документом.

Origin-Agent-Cluster: ?0

Заголовок Origin-Agent-Cluster указывает браузеру, следует ли обрабатывать документ кластером агентов, связанным с источником, или нет. Чтобы узнать больше о Origin-Agent-Cluster , прочитайте статью «Запрос изоляции производительности с помощью заголовка Origin-Agent-Cluster .

Отправляя этот заголовок, вы позволяете вашему документу продолжать устанавливать document.domain даже после того, как он по умолчанию станет неизменяемым.

Все остальные документы, требующие такого поведения, также должны будут отправлять Origin-Agent-Cluster (обратите внимание, что document.domain не имеет эффекта, если его задает только один документ).

Настройте OriginAgentClusterDefaultEnabled для корпоративной политики.

При желании администратор может установить для параметра OriginAgentClusterDefaultEnabled значение false , чтобы параметр document.domain был доступен по умолчанию в экземплярах Chrome по всей организации. Для получения дополнительной информации см. раздел «Список и управление политиками Chrome Enterprise | Документация» .

Ресурсы

Благодарности

Фото Финана Акбара на Unsplash