Встроенный контент — лучший способ удержать пользователей на вашем сайте и одновременно поделиться контентом с других страниц или сайтов. Это может быть небольшой встроенный твит, который отображается в стиле и формате Twitter. Это может быть совершенно отдельный сайт, встроенный в ваш собственный, например встроенный магазин Shopify, где посетители могут совершать покупки, не покидая ваш сайт.
Сейчас, как никогда, важно, чтобы наши сайты оставались безопасными при встраивании контента.
Разработчики могут встроить контент на веб-сайт несколькими способами. Самый распространенный метод — использование <iframe> , который позволяет встраивать любой контент на ваш сайт с помощью всего лишь URL-адреса. Уже можно добавить атрибут sandbox , чтобы сделать iframe более безопасным.
Альтернативно вы можете использовать предлагаемый элемент HTML:
-
<fencedframe>предлагается как способ встраивания стороннего контента, сохраняющий конфиденциальность. -
<portal>предлагается для более плавного перехода между страницами.
Читайте дальше, чтобы узнать, как повысить безопасность встроенного контента.
Встроить с помощью iframe
Iframes можно использовать для самых разных случаев, например для добавления карт или форм на страницу контактов и отображения рекламы.
<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, вы можете явно добавить аргумент в атрибут песочницы.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Существует ряд возможных значений для спецификации sandbox , включаяallow 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 будет создана огороженная рамка. API FLEDGE предоставит непрозрачный источник — независимую от местоположения схему 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 по мере его продвижения.
Изображение героя Джексона Со .