Взаимодействие с встраиваемыми фреймами

В данной статье представлена информация о том, как отличается взаимодействие между встраивающим элементом и содержимым, вставленным в разные типы фреймов (например, <iframe> и <fencedframe>), и как можно хранить переданные данные.

Когда сторонний код встраивается в <iframe>, <iframe> и встраивающий элемент могут свободно обмениваться сообщениями, чтобы запрашивать данные для записи в их клиентское хранилище совместного хранения. Встраивающий элемент может отправить запрос этому <iframe> для записи данных в собственное стороннее хранилище с помощью канала междокументного взаимодействия, используя Window.postMessage(). Сторонний элемент также может отправлять postMessage() запросы встраивающему элементу.

Из <iframe>, можно прослушивать событие message, поступающее от встраивающего элемента. Когда встраивающий элемент отправляет сообщение <iframe> с использованием postMessage(), <iframe> может получить эти данные и сохранить их в собственном клиентском хранилище совместного доступа. И наоборот, <iframe> может отправлять сообщения, которые встраивающий элемент может прослушивать и реагировать, записывая данные в своё хранилище совместного доступа.

Фреймы с защищённой зоной предназначены для случаев, таких как отображение целевой рекламы, выбранной с помощью API защищённой аудитории и WindowSharedStorage.selectURL(). Взаимодействие между <fencedframe> и другими страницами вне <fencedframe> на странице преднамеренно ограничено, но один метод взаимодействия между встраивающим элементом и обработчиками совместного хранилища существует — FencedFrameConfig.setSharedStorageContext().

Давайте рассмотрим более сложный пример, использующий операцию шлюза выбора URL для отображения рекламы в <fencedframe>.

В этом примере издатель просит стороннего поставщика контента отобразить некоторый контент на странице. Контент, выбранный с помощью WindowSharedStorage.selectURL(), отображается в <fencedframe>, и этот контент содержит данные от поставщика измерений. Обратите внимание, что издатель может представлять любую сущность, которая встраивает сторонний <fencedframe>. Также, поставщик измерений представляет любой вложенный сторонний код, работающий в <fencedframe> другого стороннего поставщика.

Чтобы передать данные в <fencedframe> для использования в обработчике совместного хранилища, встраивающий элемент может установить данные в FencedFrameConfig. Это значение будет доступно как WorkletSharedStorage.context внутри обработчика совместного хранилища. Эти данные недоступны за пределами обработчика и могут быть доступны только внутри защищённой и частной среды, предоставляемой обработчиком совместного хранилища.

Когда вызов selectURL() возвращает FencedFrameConfig, встраивающий элемент фрейма может передать данные, вызвав setSharedStorageContext(data):

const fencedFrameConfig = await window.sharedStorage.selectURL(
  "creative-rotation",
  urls,
  {
    // …
    resolveToConfig: true,
  },
);

fencedFrameConfig.setSharedStorageContext("some-data");

// Navigate the fenced frame to the config.
document.getElementById("my-fenced-frame").config = fencedFrameConfig;

setSharedStorageContext(data) должен быть вызван на fencedFrameConfig до того, как целевой элемент <fencedframe> получит config атрибут, установленный в fencedFrameConfig, так как это запускает навигацию фрейма.

Внутри обработчика совместного хранилища WorkletSharedStorage.context затем может быть получен, чтобы извлечь данные:

class ReportingOperation {
  async run() {
    sharedStorage.set("some-data-from-embedder", sharedStorage.context);
  }
}
register("send-report", ReportingOperation);