iframe: как устроена встроенная рамка и чем она рискованна

Что такое iframe?

Тег iframe открывает внутри вашей страницы окно с другой страницей. Браузер загружает чужой документ в рамку заданного размера и показывает его так, будто он часть вашей вёрстки. Название расшифровывается как inline frame, то есть встроенная рамка. Это один из старейших тегов HTML.

Чаще всего в такую рамку помещают то, что неудобно писать самому: карту, видеоплеер, платёжную форму, чат поддержки, виджет бронирования. Сервис отдаёт готовый код, вы вставляете его в нужный блок, а сложная часть работы остаётся на стороне сервиса.

Разработчики ценят iframe за изоляцию. По описанию Topvisor, встроенный документ остаётся изолированным от CSS и JavaScript вашей страницы: чужие стили не ломают вашу вёрстку, и ваши правила не затрагивают чужое содержимое. Изоляция не абсолютна, и к этому мы вернёмся в разделе про безопасность.

У рамки есть и неудобная сторона: содержимое остаётся чужим. Авторы справочника Дока объясняют это образом окна. Если карту, видео или пост удалят у владельца, на вашей странице останется пустое место или надпись вроде «Контент недоступен». Вы ничего не меняли, но страница выглядит сломанной, поэтому важные встраивания стоит время от времени открывать глазами.

Атрибуты iframe и способы встроить рамку

Минимальный код - это тег с адресом и размерами. Атрибут src указывает страницу, которую нужно показать, а width и height задают размер рамки. Если встраивать нужно свой фрагмент разметки, вместо адреса используют srcdoc: по справочнику Дока, так можно передать целиком HTML-код, а при его наличии ссылка src игнорируется. Тег iframe всегда нужно закрывать.

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

• src - адрес встраиваемой страницы;
• srcdoc - готовый HTML-код вместо адреса;
• width и height - размеры рамки, лучше задавать их всегда, чтобы страница не прыгала при загрузке;
• title - короткое название рамки для программ экранного чтения и поисковых систем;
• loading - загружать рамку сразу или когда посетитель долистает до неё;
• sandbox - набор ограничений для содержимого рамки;
• allow - разрешения вроде полноэкранного режима.

Атрибут srcdoc хорошо показывает, зачем нужна изоляция. Разработчица, написавшая путеводитель по iframe на Хабре, делала сервис, где пользователи сохраняли письма как шаблоны. Список шаблонов выводился на общей странице, и CSS сайта портил их вид. Каждый шаблон она показала в рамке со srcdoc: у письма появилась своя среда, и стили страницы его больше не задевали.

Когда iframe оправдан и когда лучше обойтись?

Оправдан он там, где чужой функционал сложнее вашей задачи: карта, плеер, платёжная форма, запись на приём. Хороший признак - вы не хотите отвечать за внутреннюю логику того, что показываете. Плохой признак - в рамку кладут текст, который должен приводить людей из поиска.

Цену встроенного плеера видно в килобайтах. Авторы статьи web.dev измерили, что ролик YouTube с отложенной загрузкой экономит около 500 КБ при первой загрузке страницы, а плеер Spotify - 514 КБ. Если на странице три-четыре таких встраивания, лишний вес выходит заметным.

Лучше отказаться от рамки, если:

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

Что рамка делает со скоростью страницы

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

Лечится это атрибутом loading со значением lazy: браузер откладывает загрузку рамки, пока посетитель не приблизится к ней. Это штатный способ не тратить трафик посетителя на то, что он ещё не увидел.

Если рамка нужна ради ролика, у ленивой загрузки есть более сильный приём. Lighthouse в документации Chrome считает проверку непройденной, когда страница подгружает ресурсы встроенного плеера YouTube, и советует фасад: на странице лежит статичная картинка, похожая на плеер, а по клику она заменяется настоящим плеером. Для YouTube в списке рекомендаций стоят готовые решения вроде lite-youtube-embed.

Тяжелее всего обычно виджеты соцсетей, о которых мы писали в материале про виджеты для сайта. По замерам web.dev, встраивание Instagram (принадлежит Meta, организации, признанной в России экстремистской и запрещённой) с отложенной загрузкой экономит около 100 КБ, а кнопка Like от Facebook при обычной вставке тянет около 215 КБ, из них 197 КБ приходится на JavaScript.

В среднем эффект скромнее. По данным исследования Chrome, о котором пишет web.dev, отложенная загрузка даёт медианную экономию данных на 2-3% и ускоряет первую отрисовку на 1-2%. Логичный вывод для владельца страницы: lazy нужен рамкам ниже первого экрана, а рамку в самом верху лучше грузить сразу.

Как считать посетителей внутри рамки?

Цифры в отчётах портятся так же легко, как скорость. Типичная история: виджет записи на чужом домене, а в отчётах ни целей, ни записей визитов.

Справка Метрики прямо описывает, при каких условиях Вебвизор пишет содержимое iframe. Если у страницы и рамки один домен, счётчик с Вебвизором ставят в родительское окно. Если домены разные, один и тот же счётчик с включённым Вебвизором нужен в обоих окнах, а в код счётчика внутри рамки добавляют параметр trustedDomains с адресом родительской страницы. Когда код внутри рамки вам не принадлежит, записать в ней посетителя по этим условиям не получится.

С целями та же беда. В вопросе в базе знаний GetCourse владелец сайта поставил на другой сайт форму-виджет и не увидел ни одной цели Метрики: у виджета и у сайта разные счётчики. Сервис назвал два рабочих места для кода счётчика, на всех страницах аккаунта GetCourse или в самом виджете, и после этого цель срабатывала и на стороннем сайте, где виджет размещён.

С Google Analytics картина сложнее. Симо Ахава, автор блога об аналитике и Tag Manager, разбирает случай рамки с другого сайта: браузер должен разрешить cookie в стороннем контексте, а если он их блокирует, рамка не запишет cookie, и учёт в Google Analytics не сработает. Поводом для его разбора стал Chrome 80, который потребовал для таких cookie флаги SameSite=None и Secure. Рабочий выход, который он предлагает: рамка отправляет каждое событие родительской странице через postMessage, и считает уже родитель.

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

Влияет ли iframe на SEO?

Короткий ответ: поисковики умеют читать рамки, но надеяться на них не стоит. Источники расходятся, и полезно увидеть обе позиции, прежде чем решать.

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

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

Что говорит сам поиск, пересказывает Search Engine Journal. В треде на Reddit участник был уверен, что Google вообще не читает iframe, и спросил об этом напрямую. Джон Мюллер из Google возразил: Google пытается обойти содержимое рамки и включить его в проиндексированную страницу, если это разрешено, но делает это не всегда просто. В ответе он назвал три рычага: заголовок X-Frame-Options, мета-тег noindex и директиву indexifembedded. Для важного текста он советует другой путь:

Я бы вставил это прямо в страницу вместо iframe

Джон Мюллер, Google, о том, что должно попасть в индекс

Официальный ответ Google на встрече для вебмастеров осторожнее, чем любой пересказ. Представитель Google объяснил, что при индексировании системы обычно считают содержимое подстраницы частью основной страницы, но гарантии нет: обе страницы остаются обычными HTML-страницами. Чтобы подстраница индексировалась только как часть основной, на неё добавляют метатеги noindex и indexifembedded, а чтобы она не попадала в индекс в составе основной, встраивание запрещают заголовком x-frame-options.

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

Чем рискуют посетители и как это ограничить

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

Главный инструмент защиты - атрибут sandbox. По справочнику Дока, достаточно написать его без значений, и рамка получит все ограничения сразу, а нужное возвращают флагами через пробел. Частые флаги собраны в таблице.

Есть ловушка с одинаковым источником. Если встраиваемая страница лежит на вашем же домене, MDN категорически не советует сочетать allow-scripts и allow-same-origin: такой документ сам снимет атрибут sandbox, и защиты станет не больше, чем без него.

Рамки опасны и для самих посетителей. Исследователи Роберт Хансен и Джереми Гроссман сначала описали clickjacking в общих чертах, а через две недели опубликовали подробности: Хансен разобрал дюжину сценариев, в части из них рамка нужна, чтобы заставить кликнуть в одну точку. Adobe подтвердила в рекомендации, что Flash на всех платформах уязвим: человек нажимал безобидную кнопку, а на деле разрешал сайту включить веб-камеру и микрофон. Уязвимость получила высший ранг угрозы, и до выхода патча Adobe советовала выбрать в менеджере настроек «always deny».

Перед публикацией чужой рамки пройдите короткий список:

1. источник встраивания вам знаком, и вы ему доверяете;
2. у рамки задан title, а размеры не ломают вёрстку на телефоне;
3. рамка ниже первого экрана получила loading со значением lazy;
4. в sandbox выданы только нужные флаги;
5. важный для поиска текст лежит на странице, а не в рамке.

Защита своей страницы от чужих рамок

Наглядный пример, зачем это нужно, - история с Twitter, которая теперь называется X. Разработчик Дэниел Сэндлер разобрал атаку «Don't Click». Страница показывала кнопку «Don't Click», которая ничего не делала. Поверх неё стояла рамка с twitter.com, спрятанная прозрачностью. Кто был залогинен, нажимал на невидимую кнопку отправки в Twitter и публиковал сообщение сам.

Текст попадал в поле заранее: Twitter умел принимать сообщение через параметр ?status= в адресе. Подписчики видели «Don't Click» со ссылкой, из любопытства кликали и повторяли цикл. По словам Сэндлера, никого не взламывали и менять пароль не требовалось, но механизм работал бы так же и с чем-то серьёзнее шутки. Сам разбор Сэндлер опубликовал утром, а к 13:40 по восточному времени Twitter уже добавил скрипт, который замечает загрузку страницы внутри рамки. Одна невидимая рамка и одна кнопка заняли у сайта полдня.

Тот же приём позже сработал в большом масштабе. По рассказу Грэма Клули из Sophos, сотни тысяч пользователей Facebook (принадлежит Meta, организации, признанной в России экстремистской и запрещённой) попались на страницу с надписью «Click here to continue»: клик в любой точке через невидимый iframe публиковал ссылку на их собственной странице, и она расходилась по друзьям. Специалисты Sophos назвали такую атаку likejacking.

Сегодня от этого защищают заголовки. По справочнику MDN, X-Frame-Options со значением DENY запрещает показывать документ в любой рамке, а SAMEORIGIN разрешает только рамки с вашего домена. Если заголовка нет и других ограничений тоже, браузер позволит любому сайту встроить ваш документ. Современная замена - директива frame-ancestors в Content-Security-Policy: она гибче. Через тег meta заголовок не работает, его отдаёт только сервер.

У запрета бывает побочный эффект, о котором когда-то предупреждал Яндекс. Плеер Вебвизора и код четырёх других инструментов (карт кликов, ссылок, скроллинга и аналитики форм) переехали на отдельный домен webvisor.com, и сайты с заголовком X-Frame-Options: SAMEORIGIN перестали открываться в Метрике. Без правки сервера для них не работали бы все пять инструментов сразу. Яндекс дал владельцам готовое решение, одно правило для nginx с двумя исключениями: реферер с вашего домена и реферер с webvisor.com. Такие правила проще настраивать вместе с тем, кто отвечает за веб-сервер.

Частые вопросы