Обзор огороженных рамок

Безопасное встраивание контента на страницу без обмена данными между сайтами.

Статус реализации

• Планируется поэтапное прекращение производства.
• Планируется выпустить: удалить API элемента FencedFrame и window.fence.
• Статус платформы Chrome

Зачем нам нужны ограждения для каркасных конструкций?

Ограниченный фрейм ( <fencedframe> ) — это HTML-элемент для встраивания контента, похожий на iframe. В отличие от iframe, ограниченный фрейм ограничивает взаимодействие со своим контекстом встраивания, позволяя фрейму получать доступ к данным из других сайтов, не передавая их контексту встраивания. Некоторые API Privacy Sandbox могут требовать, чтобы определенные документы отображались внутри ограниченного фрейма .

Аналогичным образом, любые собственные данные, находящиеся в контексте встраивания, не могут быть переданы в защищенный фрейм.

Например, если news.example (контекст встраивания) встраивает рекламу из shoes.example в фрейм с защитой, news.example не может извлекать данные из рекламы shoes.example , и shoes.example не может получать собственные данные из news.example .

Усильте защиту конфиденциальности между сайтами с помощью разделения хранилища.

Просматривая веб-сайты, вы, вероятно, видели товары на одном сайте, а затем замечали, что они снова появляются в рекламе на совершенно другом сайте.

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

Chrome работает над разделением хранилища , которое позволяет разделить хранилище браузера для каждого сайта. Без разделения, если iframe с сайта shoes.example встроен в news.example , и этот iframe хранит значение в хранилище, то это значение можно прочитать с сайта shoes.example . После разделения хранилища, межсайтовые iframe больше не будут использовать общее хранилище, поэтому shoes.example не сможет получить доступ к информации, хранящейся в iframe. Если iframe обслуживается с сайта *.shoes.example и встроен в *.shoes.example , хранилище браузера будет использоваться совместно, поскольку они считаются находящимися на одном сайте .

Разделение хранилища будет применяться к стандартным API хранилища, включая LocalStorage, IndexedDB и cookie. В условиях разделения хранилища утечка информации между собственными хранилищами будет значительно снижена.

Работа с данными, полученными на разных сайтах.

Функция «изолированных фреймов» в рамках «песочницы конфиденциальности» предполагает, что сайты верхнего уровня должны разделять данные. Многие предложения и API для «песочницы конфиденциальности» направлены на удовлетворение потребностей пользователей в межсайтовых сценариях без использования сторонних файлов cookie или других механизмов отслеживания. Например:

• API защищенной аудитории позволяет показывать рекламу на основе интересов, обеспечивая при этом конфиденциальность.
• Общее хранилище данных обеспечивает доступ к неразделённым данным между площадками в безопасной среде.

Ограниченные рамки предназначены для работы с API защищенной аудитории . С помощью API защищенной аудитории интересы пользователя регистрируются на сайте рекламодателя в группах интересов , вместе с объявлениями, которые могут представлять интерес для пользователя. Затем на отдельном сайте (известном как «издатель») объявления, зарегистрированные в соответствующих группах интересов, выставляются на аукцион, и победившее объявление отображается в ограниченной рамке.

Если издатель отображает выигрышную рекламу во фрейме, и скрипт может считывать атрибут src этого фрейма, издатель может получить информацию об интересах посетителя из URL-адреса этой рекламы. Это не обеспечивает конфиденциальность.

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

Как работают ограждения-рамы?

Для навигации в фреймах, ограниченных рамками, используется объект FencedFrameConfig . Этот объект может быть возвращен аукционом API защищенной аудитории или операцией выбора URL-адреса в общем хранилище. Затем объект конфигурации устанавливается в качестве атрибута config для элемента фрейма, ограниченного рамками. Это отличается от iframe, где URL-адрес или непрозрачный URN назначается атрибуту src . Объект FencedFrameConfig имеет свойство url , доступное только для чтения; однако, поскольку в текущих сценариях использования требуется скрыть фактический URL-адрес внутреннего ресурса, это свойство возвращает строку opaque при чтении.

Ограниченный фрейм не может использовать postMessage для связи со своим встраиваемым элементом. Однако ограниченный фрейм может использовать postMessage с iframe внутри ограниченного фрейма.

Защищенные фреймы будут изолированы от издателя и другими способами. Например, издатель не будет иметь доступа к DOM внутри защищенного фрейма, а защищенный фрейм не сможет получить доступ к DOM издателя. Кроме того, такие атрибуты, как name (которому издатель может присвоить любое значение и которое будет отслеживаться издателем), недоступны в защищенных фреймах.

Ограниченные фреймы ведут себя как контекст просмотра верхнего уровня (например, вкладка браузера). Хотя в некоторых случаях использования (например, в ретаргетинговой рекламе на основе интересов) ограниченный фрейм может содержать данные, относящиеся к нескольким сайтам (например, группу интересов из API защищенной аудитории), он не может получить доступ к неразделенному хранилищу или файлам cookie. Ограниченный фрейм может получить доступ к уникальному файлу cookie на основе одноразового числа (nonce) и разделу хранилища.

Характеристики огражденных каркасов более подробно описаны в пояснительной статье .

Чем отличаются каркасные ограждения от каркасных конструкций из листового металла?

Теперь, когда вы знаете, на что способны и на что не способны рамочные окна с ограждениями, полезно сравнить их с существующими функциями iframe.

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

Заменят ли каркасные ограждения каркасные конструкции из листового металла?

В конечном итоге, изолированные фреймы не заменят iframe, и вам не придётся их использовать. Изолированные фреймы — это более приватные фреймы, используемые, когда данные из разных разделов верхнего уровня необходимо отображать на одной странице.

Встроенные в сайт iframe-элементы (иногда называемые «дружественными iframe-элементами») считаются доверенным контентом.

Используйте огражденные каркасы.

Ограниченные фреймы будут работать в сочетании с другими API Privacy Sandbox для отображения документов из разных разделов хранилища на одной странице. Возможные API находятся на стадии обсуждения.

В настоящее время кандидатами на эту комбинацию являются:

• В рамках семейства API TURTLEDOVE (которое является основой для API защищенной аудитории) фреймы с ограждением могут работать с измерением прироста конверсии с использованием общего хранилища .
• Другой вариант — разрешить использование огражденных рам только для чтения или доступ к неразделённому хранилищу .

Для получения более подробной информации обратитесь к пояснению к примерам использования ограждений .

Примеры

Для получения объекта config фрейма с ограничением доступа необходимо передать параметр resolveToConfig: true в вызов runAdAuction() API Protected Audience или вызов selectURL() Shared Storage. Если это свойство не добавлено (или установлено в значение false ), результирующий промис разрешится в URN, который можно использовать только во фрейме.

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

Получив конфигурацию, вы можете присвоить её атрибуту config фрейма, чтобы перенаправить фрейм к ресурсу, представленному конфигурацией. Более ранние версии Chrome не поддерживают свойство resolveToConfig , поэтому перед переходом по ссылке необходимо убедиться, что промис разрешился в FencedFrameConfig .

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

Для получения более подробной информации см. пояснения к разделам «Ограждение» и «Настройка ограждения» .

Заголовки

Браузеры будут устанавливать Sec-Fetch-Dest: fencedframe для запросов, поступающих из фреймов, содержащих ограждение, и iframe, встроенных в такой фрейм.

Sec-Fetch-Dest: fencedframe

Для загрузки документа в огороженный фрейм сервер должен установить заголовок ответа Supports-Loading-Mode: fenced-frame . Этот заголовок также должен присутствовать для любых iframe-элементов внутри огороженного фрейма.

Supports-Loading-Mode: fenced-frame

Контекст общего хранилища

Возможно, вам потребуется использовать частную агрегацию для передачи данных на уровне событий в изолированных фреймах, связанных с контекстными данными от встраивающего устройства. Используя метод fencedFrameConfig.setSharedStorageContext() , вы можете передавать некоторые контекстные данные, такие как идентификатор события, от встраивающего устройства к рабочим модулям общего хранилища, инициируемым API защищенной аудитории.

В следующем примере мы сохраняем некоторые данные, доступные на странице встраивания, и некоторые данные, доступные в изолированном фрейме, в общем хранилище. Со страницы встраивания в качестве контекста общего хранилища устанавливается фиктивный идентификатор события. Из изолированного фрейма передаются данные события фрейма.

На странице встраивания вы можете установить контекстные данные в качестве контекста общего хранилища:

const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });

// Data from the embedder that you want to pass to the shared storage worklet
frameConfig.setSharedStorageContext('some-event-id');

const frame = document.createElement('fencedframe');
frame.config = frameConfig;

Из изолированного кадра можно передавать данные уровня события в рабочий модуль общего хранилища (не связанные с контекстными данными из встраивающего модуля, описанного выше):

const frameData = {
  // Data available only inside the fenced frame
}

await window.sharedStorage.worklet.addModule('reporting-worklet.js');

await window.sharedStorage.run('send-report', {
  data: {
    frameData
  },
});

Вы можете прочитать контекстную информацию встраиваемого элемента из sharedStorage.context , а данные уровня события фрейма — из объекта data , а затем передать их через Private Aggregation:

class ReportingOperation {
  convertEventIdToBucket(eventId) { ... }
  convertEventPayloadToValue(info) { ... }

  async run(data) {
    // Data from the embedder
    const eventId = sharedStorage.context;

    // Data from the fenced frame
    const eventPayload = data.frameData;

    privateAggregation.contributeToHistogram({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

Чтобы узнать больше о контексте встраивания в объекте конфигурации фрейма, заключенного в рамку, см. пояснение .

Попробуйте каркасы с ограждением.

Для включения API Fenced Frame используйте флаги Chrome по адресу chrome://flags/#enable-fenced-frames .

В диалоговом окне есть несколько вариантов. Мы настоятельно рекомендуем выбрать * Включить *, что позволит Chrome автоматически обновляться до новой архитектуры по мере её появления.

Другие варианты, «Включено с ShadowDOM» и «Включено с многостраничной архитектурой» , предлагают различные стратегии реализации, которые актуальны только для разработчиков браузеров. Сегодня «Включено» работает так же, как и «Включено с ShadowDOM» . В будущем «Включено» будет соответствовать «Включено с многостраничной архитектурой» .

Обнаружение признаков

Чтобы определить, определены ли ограждения:

if (window.HTMLFencedFrameElement) {
  // The fenced frame element is defined
}

Чтобы определить, доступна ли конфигурация с ограждением:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
   // The fenced frame config is available
}

Поддержка браузеров

• МДН
• Статус платформы Chrome

Принимайте участие и делитесь отзывами.

Функция Fenced Frames находится в стадии активного обсуждения и может быть изменена в будущем. Если вы попробуете этот API и у вас появятся отзывы, мы будем рады их услышать.

• GitHub : Прочитайте пояснение , задавайте вопросы и участвуйте в обсуждении .

Узнать больше

• Статус платформы Chrome
• Blink Intent to Prototype