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

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

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

В этом документе описывается новый элемент HTML: <fencedframe> .

• В общей доступности в Chrome .
• Статус платформы 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. В мире секционирования утечка информации через собственные хранилища будет значительно снижена.

Работа с межсайтовыми данными

Огражденные фреймы — это функция Privacy Sandbox , которая предполагает, что сайты верхнего уровня должны разделять данные. Многие предложения Privacy Sandbox и API направлены на удовлетворение потребностей в кросс-сайтовом использовании без сторонних файлов cookie или других механизмов отслеживания. Например:

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

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

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

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

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

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

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

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

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

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

Чем огражденные фреймы отличаются от iframes?

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

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

Заменят ли фреймы огражденные фреймы фреймы?

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

Фреймы того же сайта (иногда называемые дружественными фреймами) считаются доверенным контентом.

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

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

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

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

Более подробную информацию см. в описании вариантов использования огражденных рам .

Примеры

Чтобы получить объект config огороженного фрейма, необходимо передать resolveToConfig: true в вызов runAdAuction() API защищенной аудитории или в вызов selectURL() общего хранилища. Если свойство не добавлено (или ему присвоено значение false ), полученное обещание будет преобразовано в URN, который можно использовать только в iframe.

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 для запросов, сделанных из огражденных фреймов и встроенных в огражденный фрейм iframes.

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 , а затем сообщить их через частную агрегацию:

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);

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

Попробуйте огороженные рамы

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

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

Другие варианты, «Enabled with ShadowDOM» и «Enabled with multi-page architecture» , предлагают различные стратегии реализации, которые актуальны только для разработчиков браузеров. В настоящее время «Enabled» работает так же, как «Enabled with ShadowDOM» . В будущем «Enable» будет соответствовать «Enable with multi-page architecture» .

Обнаружение особенностей

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

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

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

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

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

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

Привлекайте и делитесь отзывами

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

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

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

• Статус платформы Chrome
• Намерение Blink создать прототип