Измените языковые настройки Топвизор для работы с сервисом на родном языке. Вы также сможете выбрать и установить язык интерфейса позже в настройках Аккаунта. Измените языковые настройки Топвизор для работы с сервисом на родном языке. ru Русский Выбрать

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

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

Перевод статьи из блога 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>

Пример

Рекламный аукцион проводится с помощью API FLEDGE. Для победителя будет использоваться fencedframe. FLEDGE API будет предоставлять неявный источник рекламы (opaque source) — тип URN, который не зависит от местоположения источника и может отображаться в элементе типа fencedframe. 

Неявные источники позволяют сайтам отображать сторонний контент, не разглашая URL‑адрес источника рекламы владельцу сайта.

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

Тег portal

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

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

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

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

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



17 0
Оставьте свой комментарий
Чтобы оставить комментарий, авторизуйтесь

Советуем почитать

Топвизор проверил новый код Я.Метрики

Топвизор проверил новый код Я.Метрики

Яндекс говорит, что код Метрики стал быстрее и не влияет на скорость загрузки сайта, так ли это?
Как создать систему для отслеживания индексации сайтов, используя URL Inspection API и Analytics Edge

Как создать систему для отслеживания индексации сайтов, используя URL Inspection API и Analytics Edge

Пошаговое руководство по созданию собственной системы отслеживания индексации в Excel на основе данных из Google. Перевод статьи Гленна Гейба.
Александр Бурлай о том, как зарабатывать на SEO-аудитах

Александр Бурлай о том, как зарабатывать на SEO-аудитах

Почему не нужно недооценивать работу за «спасибо», как искать клиентов на аудиты и список обучающих статей и каналов по SEO-аудитам для начинающих специалистов.