Как безопасно встроить сторонний контент на сайт

Перевод статьи из блога Google для разработчиков.

Встраивание стороннего контента — лучший способ показать посетителям сайта что‑то, что находится в другом месте в интернете, и при этом не уводить их с вашего ресурса. Встроенный контент бывает разным: от небольшого твита до целого сайта в сайте.

Есть несколько способов безопасно встроить контент на сайт:

1. <iframe> — позволяет встраивать контент при помощи URL‑адреса, а с помощью атрибута sandbox делать встраивание безопасным.

2. <fencedframe> — подходит для конфиденциального встраивания стороннего контента.

3. <portal> — позволяет сделать переходы между страницами более плавными.

Разберём все эти способы по порядку.

Тег iframe

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

<iframe src="https://example.com/maps"></iframe>

У каждого элемента iframe есть контекст просмотра (browsing context) с отдельной историей и объектом document. Контекст, в котором находится iframe, называется родительским контекстом просмотра (parent browsing context).

Сторонний контент, который отображается в HTML‑элементе типа iframe, может взаимодействовать с родительским сайтом через метод postMessage(). Он позволяет разработчикам пересылать произвольные значения между контекстами просмотра.

Чтобы принимать эти значения, получателю нужно использовать обработчик событий onmessage.

// Внутри HTML‑элемента типа iframe.
window.parent.postMessage("ping", "https://example.com");

// Родительское окно.
window.addEventListener("message", (event) => {
  console.log(event.data);
})

Как повысить безопасность HTML‑элемента iframe

Если в HTML‑элементе типа iframe будет размещён какой‑то вредоносный контент, это может спровоцировать нежелательное выполнение JavaScript‑кода или отправку формы.

Чтобы этого избежать, можно воспользоваться атрибутом sandbox. Он ограничивает обращения к API из элемента iframe и отключает потенциально опасные функции.

<iframe src="https://example.com" sandbox></iframe>

Атрибут sandbox может запретить доступ к разным API, важным для встроенного контента. Чтобы разрешить использование какого‑либо API, можно добавить sandbox значение атрибута.

<iframe sandbox="allow‑forms" src="https://example.com"></iframe>

Список значений атрибута sandbox

Как разграничить доступ к возможностям сайта

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

Политика управления доступом может применяться и к родительскому сайту, и к содержимому элемента типа iframe.

С помощью атрибута allow можно дать доступы и родительскому сайту, и HTML‑элементу:

<iframe src="https://example.com" allow="fullscreen"></iframe>

Тег fencedframe

Fencedframe (<fencedframe>) — это HTML‑элемент, похожий на iframe. Только в отличие от iframe он ограничивает взаимодействие с родительским контекстом.

Fencedframe обеспечивает доступ к межсайтовым данным без обмена ими с родительским контекстом. Таким же образом и данные родительской страницы не могут быть переданы элементу типа fencedframe.

<fencedframe src="https://3rd.party.example"></fencedframe>

Элементы типа fencedframe — это часть проекта Privacy Sandbox («Тестовая среда конфиденциальности»). Этот проект предлагает сайтам верхнего уровня сегментировать данные.

Подробнее о Privacy Sandbox

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

Некоторые API этого проекта могут требовать, чтобы отдельные документы отображались в элементе fencedframe.

<fencedframe src="urn:uuid:c36973b5‑e5d9‑de59‑e4c4‑364f137b3c7a"></fencedframe>

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

Тег portal

Портал (<portal>) — это новый HTML‑элемент. У него независимый контекст просмотра. Страницы, встроенные таким образом, наиболее «плавные» с точки зрения пользователя.

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

Порталы сочетают в себе простоту многостраничного веб‑приложения с плавными переходами одностраничного. Переходы могут быть анимированными и быстро заменять содержимое окна браузера.

<portal src="https://example.com/"></portal>

Спецификация HTML‑элемента типа portal всё еще на ранних стадиях разработки.