Встроенный контент — лучший способ удержать пользователей на вашем сайте, одновременно делясь контентом с других страниц или сайтов. Это может быть как небольшой встроенный твит, отображаемый в стиле и формате Twitter, так и целый отдельный сайт, встроенный в ваш сайт, например, встроенный магазин Shopify, где посетители могут совершать покупки, не покидая ваш сайт.
Сейчас как никогда важно, чтобы наши сайты оставались безопасными при размещении на них контента.
Разработчики могут встраивать контент на сайт несколькими способами. Наиболее распространённый способ — использование <iframe> , который позволяет встраивать любой контент на сайт, просто указав URL. Уже сейчас можно добавить атрибут sandbox , чтобы повысить безопасность iframe.
В качестве альтернативы вы можете использовать предлагаемый элемент HTML:
-
<fencedframe>предлагается как способ сохранения конфиденциальности для встраивания стороннего контента. -
<portal>предлагается для более плавного перехода между страницами.
Продолжайте читать, чтобы узнать, как повысить безопасность встроенного контента.
Встроить с помощью фреймов
Элементы iframe можно использовать в самых разных случаях, например, для добавления карт или форм на страницу контактов, а также для показа рекламы.
<iframe src="https://example.com/maps"></iframe>
Каждый iframe имеет собственный контекст просмотра со своей историей сеанса и документом . Контекст, в который встроен iframe, называется родительским контекстом просмотра.
Сторонний контент, отображаемый в iframe, может взаимодействовать с родительским сайтом через postMessage() . Это позволяет разработчикам отправлять произвольные значения между контекстами просмотра. Получатель сообщений может использовать прослушиватель событий onmessage для получения этих значений.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Дополнительная безопасность с атрибутом sandbox
Если вредоносный контент развёрнут в iframe, возможно выполнение непреднамеренных действий (например, выполнение JavaScript или отправка формы). Чтобы избежать этого, атрибут sandbox ограничивает исполняемые API в iframe и отключает потенциально опасные функции.
<iframe src="https://example.com" sandbox></iframe>
В песочнице некоторые API, важные для встроенного контента, могут быть недоступны. Чтобы разрешить отключенный API, вы можете явно добавить аргумент в атрибут sandbox.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Существует ряд возможных значений для спецификации sandbox , включая allow-forms , allow-same-origin , allow-popups и другие.
Политика разрешений
По мере развития всё более мощных функций веба были созданы политики разрешений для управления ими. Политика разрешений может применяться к родительскому сайту и к содержимому iframe. Разрешения, предоставленные родительскому сайту, также могут быть предоставлены iframe с помощью атрибута allow .
<iframe src="https://example.com" allow="fullscreen"></iframe>
Встроить с огражденными рамами
Огороженный фрейм ( <fencedframe> ) — это предлагаемый HTML-элемент для встроенного контента, аналогичный iframe. В отличие от iframe, ограждённый фрейм ограничивает взаимодействие с контекстом внедрения, позволяя фрейму получать доступ к межсайтовым данным без их передачи контексту внедрения. Аналогично, данные первой стороны на родительской странице не могут быть переданы ограждённому фрейму.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames — это предложение Privacy Sandbox , которое предполагает, что сайты верхнего уровня должны разделять данные. Многие предложения Privacy Sandbox направлены на удовлетворение потребностей в кросс-сайтовом использовании без сторонних файлов cookie и других механизмов отслеживания. Некоторые API Privacy Sandbox могут требовать отображения отдельных документов в огороженном фрейме .
Например, для победителя аукциона рекламы FLEDGE API будет создан огороженный фрейм. FLEDGE API предоставит непрозрачный источник (независимую от местоположения схему URN), который может отображаться внутри огороженного фрейма. Непрозрачные источники позволяют сайтам отображать контент на своих сайтах, не раскрывая URL-адрес источника рекламы владельцу сайта.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
В конечном счёте, огороженные фреймы не заменят iframe. Вам не придётся их использовать. Огороженные фреймы предлагаются для более приватного использования, когда данные из разных разделов верхнего уровня должны отображаться на одной странице.
Встроить с порталами
Портал ( <portal> ) — это предлагаемый HTML-элемент с независимым контекстом просмотра, который может улучшить взаимодействие со страницами. Порталы встраивают контент, как iframe, но пользователь не может получить доступ к коду портала. Портал доступен только для просмотра и не может взаимодействовать с ним.
Порталы сочетают в себе простоту многостраничного приложения и плавность переходов, характерную для одностраничных приложений. Эти переходы могут быть анимированными, быстро заменяя содержимое в окне браузера.
<portal src="https://example.com/"></portal>
Спецификация портала все еще находится на ранней стадии разработки.
Другие элементы HTML, используемые для встраивания
На протяжении всей истории веба было предложено множество HTML-элементов и создано API для встраивания контента. Некоторое время сайты часто создавались с несколькими элементами <frame> и <frameset> . На сайтах с несколькими элементами <frameset> в адресной строке отображался URL родительской страницы, независимо от источника множества отдельных фреймов. Это затрудняло обмен ссылками на контент внутри сайта. С тех пор эти API устарели.
Было время, когда технологии плагинов, такие как элемент Java <applet> , использовались для решения других задач. Позже он был заменён элементом <object> . Оба этих элемента обычно использовались для отображения плагинов Flash, но также использовались для отображения других HTML-элементов (аналогичных iframe). Другие элементы, такие как <canvas> , <audio> , <video> и <svg> , сделали элементы <object> и <applet> устаревшими.
Хотя <object> и <embed> официально еще не объявлены устаревшими, лучше избегать их использования, особенно учитывая их странное поведение . <applet> был удален из спецификации HTML в 2017 году.
Заключение
Вы можете безопасно встраивать контент на любой веб-сайт, используя существующую спецификацию iframe. Для улучшения безопасности и стиля предложены дополнительные HTML-элементы, включая <fencedframe> и <portal> . Мы продолжим делиться информацией о ходе работы над предложением Fenced Frames по мере его развития.
Встроенный контент — лучший способ удержать пользователей на вашем сайте, одновременно делясь контентом с других страниц или сайтов. Это может быть как небольшой встроенный твит, отображаемый в стиле и формате Twitter, так и целый отдельный сайт, встроенный в ваш сайт, например, встроенный магазин Shopify, где посетители могут совершать покупки, не покидая ваш сайт.
Сейчас как никогда важно, чтобы наши сайты оставались безопасными при размещении на них контента.
Разработчики могут встраивать контент на сайт несколькими способами. Наиболее распространённый способ — использование <iframe> , который позволяет встраивать любой контент на сайт, просто указав URL. Уже сейчас можно добавить атрибут sandbox , чтобы повысить безопасность iframe.
В качестве альтернативы вы можете использовать предлагаемый элемент HTML:
-
<fencedframe>предлагается как способ сохранения конфиденциальности для встраивания стороннего контента. -
<portal>предлагается для более плавного перехода между страницами.
Продолжайте читать, чтобы узнать, как повысить безопасность встроенного контента.
Встроить с помощью фреймов
Элементы iframe можно использовать в самых разных случаях, например, для добавления карт или форм на страницу контактов, а также для показа рекламы.
<iframe src="https://example.com/maps"></iframe>
Каждый iframe имеет собственный контекст просмотра со своей историей сеанса и документом . Контекст, в который встроен iframe, называется родительским контекстом просмотра.
Сторонний контент, отображаемый в iframe, может взаимодействовать с родительским сайтом через postMessage() . Это позволяет разработчикам отправлять произвольные значения между контекстами просмотра. Получатель сообщений может использовать прослушиватель событий onmessage для получения этих значений.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Дополнительная безопасность с атрибутом sandbox
Если вредоносный контент развёрнут в iframe, возможно выполнение непреднамеренных действий (например, выполнение JavaScript или отправка формы). Чтобы избежать этого, атрибут sandbox ограничивает исполняемые API в iframe и отключает потенциально опасные функции.
<iframe src="https://example.com" sandbox></iframe>
В песочнице некоторые API, важные для встроенного контента, могут быть недоступны. Чтобы разрешить отключенный API, вы можете явно добавить аргумент в атрибут sandbox.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Существует ряд возможных значений для спецификации sandbox , включая allow-forms , allow-same-origin , allow-popups и другие.
Политика разрешений
По мере развития всё более мощных функций веба были созданы политики разрешений для управления ими. Политика разрешений может применяться к родительскому сайту и к содержимому iframe. Разрешения, предоставленные родительскому сайту, также могут быть предоставлены iframe с помощью атрибута allow .
<iframe src="https://example.com" allow="fullscreen"></iframe>
Встроить с огражденными рамами
Огороженный фрейм ( <fencedframe> ) — это предлагаемый HTML-элемент для встроенного контента, аналогичный iframe. В отличие от iframe, ограждённый фрейм ограничивает взаимодействие с контекстом внедрения, позволяя фрейму получать доступ к межсайтовым данным без их передачи контексту внедрения. Аналогично, данные первой стороны на родительской странице не могут быть переданы ограждённому фрейму.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames — это предложение Privacy Sandbox , которое предполагает, что сайты верхнего уровня должны разделять данные. Многие предложения Privacy Sandbox направлены на удовлетворение потребностей в кросс-сайтовом использовании без сторонних файлов cookie и других механизмов отслеживания. Некоторые API Privacy Sandbox могут требовать отображения отдельных документов в огороженном фрейме .
Например, для победителя аукциона рекламы FLEDGE API будет создан огороженный фрейм. FLEDGE API предоставит непрозрачный источник (независимую от местоположения схему URN), который может отображаться внутри огороженного фрейма. Непрозрачные источники позволяют сайтам отображать контент на своих сайтах, не раскрывая URL-адрес источника рекламы владельцу сайта.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
В конечном счёте, огороженные фреймы не заменят iframe. Вам не придётся их использовать. Огороженные фреймы предлагаются для более приватного использования, когда данные из разных разделов верхнего уровня должны отображаться на одной странице.
Встроить с порталами
Портал ( <portal> ) — это предлагаемый HTML-элемент с независимым контекстом просмотра, который может улучшить взаимодействие со страницами. Порталы встраивают контент, как iframe, но пользователь не может получить доступ к коду портала. Портал доступен только для просмотра и не может взаимодействовать с ним.
Порталы сочетают в себе простоту многостраничного приложения и плавность переходов, характерную для одностраничных приложений. Эти переходы могут быть анимированными, быстро заменяя содержимое в окне браузера.
<portal src="https://example.com/"></portal>
Спецификация портала все еще находится на ранней стадии разработки.
Другие элементы HTML, используемые для встраивания
На протяжении всей истории веба было предложено множество HTML-элементов и создано API для встраивания контента. Некоторое время сайты часто создавались с несколькими элементами <frame> и <frameset> . На сайтах с несколькими элементами <frameset> в адресной строке отображался URL родительской страницы, независимо от источника множества отдельных фреймов. Это затрудняло обмен ссылками на контент внутри сайта. С тех пор эти API устарели.
Было время, когда технологии плагинов, такие как элемент Java <applet> , использовались для решения других задач. Позже он был заменён элементом <object> . Оба этих элемента обычно использовались для отображения плагинов Flash, но также использовались для отображения других HTML-элементов (аналогичных iframe). Другие элементы, такие как <canvas> , <audio> , <video> и <svg> , сделали элементы <object> и <applet> устаревшими.
Хотя <object> и <embed> официально еще не объявлены устаревшими, лучше избегать их использования, особенно учитывая их странное поведение . <applet> был удален из спецификации HTML в 2017 году.
Заключение
Вы можете безопасно встраивать контент на любой веб-сайт, используя существующую спецификацию iframe. Для улучшения безопасности и стиля предложены дополнительные HTML-элементы, включая <fencedframe> и <portal> . Мы продолжим делиться информацией о ходе работы над предложением Fenced Frames по мере его развития.