<fencedframe> элемент HTML для изолированного фрейма

Элемент <fencedframe> из HTML представляет собой вложенный контекст просмотра, в который встраивается другая HTML-страница. <fencedframe>ы очень похожи по форме и функциям на элементы <iframe>, за исключением того, что:

• Взаимодействие между содержимым <fencedframe> и встраивающим его сайтом ограничено.
• <fencedframe> может получать доступ к данным с других сайтов, но только при строго определенных контролируемых условиях, обеспечивающих конфиденциальность пользователей.
• <fencedframe> нельзя изменять, а доступ к его данным нельзя получить с помощью обычных скриптов (например, прочитать или задать исходный URL). Содержимое <fencedframe> можно встраивать только с помощью специальных API.
• <fencedframe> не может обращаться к DOM встраивающего контекста, а встраивающий контекст не может обращаться к DOM <fencedframe>.

Элемент <fencedframe> — это тип <iframe> со встроенными дополнительными средствами защиты конфиденциальности. Он устраняет недостатки <iframe>ов, например зависимость от сторонних файлов cookie и другие риски для конфиденциальности. Подробнее см. в разделе Fenced Frame API.

Атрибуты

Этот элемент включает глобальные атрибуты.

allow

Задает политику разрешений для <fencedframe>, которая определяет доступные <fencedframe> функции в зависимости от источника запроса. Подробнее о том, какие функции можно контролировать с помощью политики, заданной для изолированного фрейма, см. в разделе Политики разрешений, доступные для изолированных фреймов.

height

Безразмерное целое число, обозначающее высоту изолированного фрейма в пикселях CSS. Значение по умолчанию — 150.

width

Безразмерное целое число, обозначающее ширину изолированного фрейма в пикселях CSS. Значение по умолчанию — 300.

Политики разрешений, доступные для изолированных фреймов

Разрешения, передаваемые из контекста верхнего уровня изолированному фрейму для включения или запрета функций, могут использоваться как канал связи и поэтому представляют угрозу конфиденциальности. В результате стандартные веб-функции, доступность которых можно контролировать с помощью политики разрешений (например, camera или geolocation), недоступны в изолированных фреймах.

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

• Protected Audience API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url
• Shared Storage API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url

В настоящее время эти функции всегда включены внутри изолированных фреймов. В будущем набор включенных функций можно будет контролировать с помощью атрибута <fencedframe> allow. Блокировка функций Privacy Sandbox таким способом также заблокирует загрузку изолированного фрейма — канал связи будет полностью отсутствовать.

Перемещение фокуса между границами изолированного фрейма

Возможность перемещать активный фокус документа через границы изолированного фрейма (то есть с элемента за пределами фрейма на элемент внутри него или наоборот) ограничена. Это можно сделать с помощью действий пользователя, например щелчка или нажатия клавиши Tab, поскольку такие действия не создают риска снятия цифрового отпечатка.

Однако переход через границу с помощью вызова API, например HTMLElement.focus(), запрещен: вредоносный скрипт может использовать серию таких вызовов, чтобы передать выведенную информацию через границу.

Позиционирование и масштабирование

Поскольку <fencedframe> является замещаемым элементом, положение встроенного документа внутри его контейнера можно настроить с помощью свойства object-position.

Размер встроенного содержимого может задаваться внутренними свойствами contentWidth и contentHeight объекта <fencedframe> config. В таких случаях изменение width или height элемента <fencedframe> изменит размер встроенного контейнера на странице, но документ внутри контейнера будет визуально масштабирован, чтобы поместиться в него. Сообщаемые ширина и высота встроенного документа (то есть Window.innerWidth и Window.innerHeight) останутся неизменными.

Доступность

Люди, использующие вспомогательные технологии, например программы чтения с экрана, могут добавить описание содержимого с помощью атрибута title элемента <fencedframe>. Значение атрибута title должно кратко описывать встроенное содержимое:

<fencedframe
  title="Advertisement for new Log. From Blammo!"
  width="640"
  height="320"></fencedframe>

Без этого описания пользователям придется перейти к <fencedframe>, чтобы понять, что именно в него встроено. Такая смена контекста может сбивать с толку и отнимать много времени, особенно на страницах с несколькими <fencedframe>ами и/или если встроенные элементы содержат интерактивный контент, например видео или аудио.

Примеры

Чтобы задать содержимое, которое будет отображаться в <fencedframe>, использующий API (например, Protected Audience или Shared Storage) создает объект FencedFrameConfig, который затем задается в качестве значения свойства config элемента <fencedframe>.

В следующем примере объект FencedFrameConfig извлекается из рекламного аукциона Protected Audience API, а затем используется для отображения выигравшего объявления в <fencedframe>:

<fencedframe width="640" height="320"></fencedframe>

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

const frame = document.querySelector("fencedframe");
frame.config = frameConfig;

Техническая сводка

Спецификации

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

См. также

• API изолированных фреймов
• Изолированные фреймы на privacysandbox.google.com
• Песочница конфиденциальности на privacysandbox.google.com