УДК 004.432

Использование iframe в веб-разработке

Гамидов Шамсудин Селимханович – студент Национального исследовательского университета «Высшая школа экономики».

Аннотация: Данная статья предлагает полное понимание тега iframe и его роли в создании веб-приложений, а также объясняет его основную цель – встраивание внешнего контента на веб-страницу. Рассматривается практический пример использования iframe в рамках реального проекта. В рамках примера будет рассмотрен адаптивный подход к позиционированию фрейма на странице, масштабирование и корректное отображение на различных устройствах и разрешениях экрана. Кроме того, статья охватывает некоторые вопросы безопасности и методы защиты от уязвимостей, включая защиту от межсайтового скриптинга (XSS), политику безопасности и способы ограничения доступа к содержимому внутри iframe.

Ключевые слова: iframe, фрейм, веб-разработка, IFrame API, внедрение внешнего контента, адаптивность, позиционирование.

Введение

В современной веб-разработке существует множество инструментов и технологий, которые позволяют создавать интерактивные и многофункциональные веб-страницы. Один из таких инструментов – тег iframe [2]. Это гибкое и мощное средство для встраивания контента из внешних источников. Использование данной технологии позволяет встраивать видео, карты, формы, прикладной программный интерфейс и другой контент из сторонних источников непосредственно на страницу. Это открывает огромные возможности для расширения функциональности и обогащения пользовательского опыта.

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

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

Кроме того, при использовании iframe важно уделить внимание безопасности. Взлом встроенного контента или использование межсайтового скриптинга (XSS) могут представлять угрозу для вашего веб-приложения. Поэтому стоит рассмотреть меры защиты и использовать соответствующие политики безопасности для контроля взаимодействия между iframe и основной страницей.

Внедрение и конфигурация

Как уже было сказано выше, элемент iframe предназначен для размещения других веб-документов в текущем документе. Это отлично подходит для включения стороннего контента на сайт.

При внедрении iframe существует несколько основных шагов, которые необходимо выполнить для получения успешного результата:

  • Необходимо вставить тег iframe в HTML-код веб-страницы.
  • Нужно указать атрибут ‘src’ с ссылкой на веб-содержимое, которое вы хотите встроить в iframe. Это может быть ссылка на другую веб-страницу, видео, карту и т. д.
  • Также необходимо задать значения ширины и высоты, используя атрибуты ‘width’ и ‘height’ соответственно.

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

<iframe src="https://www.example.com" width="500" height="300"></iframe>

Также, можно дополнительно конфигурировать iframe с помощью других атрибутов. Например, атрибут ‘allowfullscreen’ нужен для разрешения полноэкранного режима, а атрибут ‘sandbox’ нужен для ограничения доступа к определённым функциям источника, ещё есть атрибут ‘frameborder’, позволяющий устанавливать нарисованную границу между фреймами.

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

Как уже говорилось выше мы рассмотрим пример реального проекта. Существует проект, который занимается разработкой комплекса Видео конференций на базе открытой системы трансляций Jitsi, с расширенным функционалом необходимым для ведения учебной и проектной деятельности. Для этого используется специальное API – прикладной программный интерфейс. Jitsi IFrame API [3] предоставляет возможность интегрировать и настраивать Jitsi Meet, популярную платформу видеоконференций, на веб-странице с использованием iframe. Он предлагает широкий спектр функций для управления видеоконференциями, включая создание комнат, управление аудио и видео потоками, обработку событий и многое другое. Для настройки такого фрейма, требуется создать специальный javascript объект – ‘api = new JitsiMeetExternalAPI(domain, options)’, где domain - домен, используемый для создания URL-адреса конференции, а options – объект с конфигурацией, которая содержит имя комнаты, ширину, высоту, родительский элемент для фрейма, обработчики загрузок, язык и многое другое. В коде такая настройка выглядит примерно следующим образом:

# const domain = 'meet.jit.si';

# const options = {

# roomName: 'JitsiMeetAPIExample',

# width: 700,

# height: 700,

# parentNode: document.querySelector('#meet'),

# lang: 'de'

# };

# const api = new JitsiMeetExternalAPI(domain, options);

Взаимодействие

Взаимодействие с iframe на веб-странице предоставляет возможность управлять и обмениваться данными между родительской страницей и встроенным содержимым.

Взаимодействовать с фреймом можно с помощью нативных методов JavaScript [4]:

  • Можно получить доступ к элементам внутри iframe, используя метод `contentWindow` для получения объекта окна встроенного документа и методы DOM для взаимодействия с элементами. Например: `contentWindow.document.getElementById('elementId')`.
  • Есть возможность передавать данные из родительской страницы в iframe, устанавливая значения его элементов или вызывая функции встроенного документа. Например: `contentWindow.document.getElementById('elementId').value = 'data'`.
  • Также можно получать данные из iframe, читая значения его элементов или вызывая функции встроенного документа. Например: `var data = iframe.contentWindow.document.getElementById('elementId').value`.

Кроме нативных методов, существуют ещё способы взаимодействия с фреймом. Давайте вернёмся к нашему примеру с jitsi. Jitsi IFrame API предоставляет свои собственные функции, с помощью которых можно воздействовать на iframe.

API предоставляет различные события, которые можно отслеживать. Такие как подключение к конференции, отключение участника, изменение состояния аудио/видео и другие. На эти события добавляются обработчики, которые выполняют дополнительные действия в соответствии с ними. Это называется подписка на событие. Рассмотрим реальный пример из проекта. Рассмотрим случай, когда к конференции присоединяется новый пользователь и нам нужно сообщить на сервер о том, что к конференции кто-то присоединился, для того чтобы была произведена запись в базу данных. Для этого надо добавить обработчик, который будет слушать это событие и отправлять сообщение на сервер, как только оно произойдёт. API предоставляет специальное событие, что кто-то подключился, и как только оно выполняется в работу вступает обработчик.

В коде это может выглядеть следующим образом:

# // Создаём обработчик

# participant_joined() {

# send_info_to_server();

# },

# // Добавляем обработчик на событие

# api.addEventListeners({

# participantJoined: participant_joined

# });

Кроме того, IFrame API предоставляет специальные команды для взаимодействия с фреймом. Использовать их можно с помощью метода – ‘api.executeCommand(command, ...arguments)’, где command – это идентификатор комнады, а arguments – опциональный параметр, позволяющий задать необходимые для команды настройки.

Адаптивность и позиционирование

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

  • Можно использовать стили CSS, такие как position, top, left, right, bottom, чтобы задать точное местоположение iframe на странице. Например, вы можете установить position: absolute и задать координаты, чтобы разместить iframe в нужном месте.
  • Есть возможность поместить iframe в родительский контейнер, например, <div>, и применить стили к этому контейнеру для управления его позиционированием и размерами.

Также, часто возникает потребность открывать веб-приложение, содержащее страницы с iframe на разных экранах. Для этого нужна адаптивность. Её можно также добиться несколькими способами:

  • Использование отзывчивых размеров, с помощью задания процентное значение ширины и высоты вместо фиксированных пикселей. К примеру, установка ‘width: 100%’ позволит iframe автоматически растягиваться по ширине родительского контейнера.
  • Есть возможность применить медиа-запросы CSS, чтобы изменять размеры и стили iframe в зависимости от ширины экрана устройства. Это позволит адаптировать iframe к различным разрешениям экранов, обеспечивая лучшую читаемость и пользовательский опыт.

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

Стоит рассмотреть позиционирование и адаптивность на реальном примере из проекта. Для позиционирования используется родительский контейнер:

# <div id="jitsi-container" class="my-container m-0 p-0"

# style="width: 100%; height: 100%; background: #e6e6e6; display: none; ">

Для адаптивности используются атрибуты ширины и высоты элемента, а также специальная система сеток сторонней библиотеки Bootstrap [5], позволяющая задавать размеры для различных экранов и разрешений. В проекте реализована специальная функция, отслеживающая является ли устройство мобильным и зависимости от результата работы функции регулируется ширина контейнера содержащего iframe. Выглядит это следующим образом:

# iframe_container_width() {

# if (isMobile()) {

# jitsi_container_width = ‘col-10’;

# } else {

# jitsi_container_width = ‘col-10’;

# }

# }

Такой подход позволяет контролировать адаптивность и предотвращать ошибки в интерфейсе.

Безопасность

Iframe, несмотря на свою полезность, может представлять определенные проблемы безопасности, которые следует учитывать при его использовании. Вот некоторые из этих проблем:

  • При неправильном позиционировании или прозрачности iframe, злоумышленники могут скрыть его от пользователя и обмануть их, заставив невольно выполнить нежелательные действия, такие как нажатие на вредоносную кнопку или ссылку [1]. Такое обычно используется для кражи персональных данных, паролей и т. д.
  • XSS-атаки (межсайтовый скриптинг). Если содержимое, загруженное в iframe, не проходит должной фильтрации или проверки, злоумышленники могут внедрить вредоносный скрипт, который будет выполняться на странице, содержащей iframe. Это может привести к краже данных пользователя или злоупотреблению привилегиями.

Существуют некоторые меры, для снижения рисков безопасности при использовании iframe:

  • Следует всегда проверять и фильтровать внедряемое содержимое, чтобы предотвратить внедрение вредоносных скриптов.
  • Установка правильных заголовков Content Security Policy (CSP) [6] для ограничения доступа к ресурсам и запрета выполнения небезопасного кода.
  • Использование атрибута ‘sandbox’ для установки ограничений на доступ к функциям источника в iframe.
  • Обеспечение правильного позиционирование и прозрачность iframe, для предотвращения clickjacking.

Выводы

Подводя итоги, можно сказать, что использование iframe в веб-разработке открывает перед разработчиками широкий спектр возможностей. Данный инструмент позволяет встраивать веб-контенты сторонних сервисов, приложений и виджетов, расширяя функциональность и улучшая взаимодействие с пользователями.

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

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

Кроме того, взаимодействие с iframe позволяет обмениваться данными и управлять содержимым, открывая двери для создания интерактивных функций и динамических веб-приложений. Благодаря методам, таким как JavaScript и API postMessage, разработчики могут передавать данные, управлять состоянием и обрабатывать события между родительской страницей и iframe.

Списоклитературы

  1. Sahani R., Randhawa S. Clickjacking: Beware of Clicking // Wireless Personal Communications. 2021. № 4 (121). C. 2845–2855.
  2. From object to iframe – other embedding technologies - Learn web development // MDN [Электронный ресурс]. URL: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies (дата обращения: 26.06.2023).
  3. Developer Guide // Jitsi Meet [Электронный ресурс]. URL: https://jitsi.github.io/handbook/docs/dev-guide/ (дата обращения: 01.03.2023).
  4. JavaScript documentation – DevDocs [Электронный ресурс]. – URL: https://devdocs.io/javascript (дата обращения: 01.03.2023).
  5. Bootstrap · The most popular HTML, CSS, and JS library in the world. [Электронный ресурс]. – URL: https://getbootstrap.com/ (дата обращения: 01.03.2023).
  6. Content-Security-Policy Header // CSP Reference & Examples [Электронный ресурс]. – URL: https://content-security-policy.com/ (дата обращения: 26.06.2023).

Интересная статья? Поделись ей с другими: