Нативная отложенная загрузка для изображений была добавлена в Chrome 76 через атрибут loading, а затем пришла и в Firefox. Мы рады сообщить, что встроенная отложенная загрузка для iframe теперь стандартизирована и также поддерживается в браузерах на основе Chrome и Chromium.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
Встроенная lazy-loading загрузка iframe откладывает загрузку закадровых элементов iframe до тех пор, пока пользователь не прокрутит их рядом. Это сохраняет данные, ускоряет загрузку других частей страницы и уменьшает использование памяти.
Элемент iframe (сокращение от встроенного фрейма), вероятно, является одним из старейших тегов HTML и был представлен ещё в далеком 1997 году в HTML 4.01 Microsoft Internet Explorer.
Хотя все современные браузеры поддерживают данный тег, многие разработчики пишут бесконечные статьи, не советуя им пользоваться. Я считаю, что плохая репутация, которая сформировалась, около данного тега не должна мешать вам использовать его. У данного тега есть много хороших примеров применения. Кроме того, iframe не так сложно защитить, поэтому вам не придется беспокоиться о заражении компьютера вашего пользователя.
Чтобы помочь Вам сформировать собственное мнение и отточить свои навыки разработчика, мы расскажем обо всем, что вам нужно знать об этом противоречивом теге.
Мы рассмотрим большинство функций, которые предоставляет элемент iframe, и поговорим о том, как их использовать, а также о том, как iframe может быть полезен для преодоления некоторых сложных ситуаций. Наконец, мы поговорим о том, как вы можете защитить свой iframe, чтобы избежать потенциальных уязвимостей.
Многим разработчикам периодически требуется наладить общение между несколькими вкладками браузера: возможность посылать сообщения из одной в другую и получать ответ. Такая задача встала и перед нами.
Существуют стандартные решения вроде BroadcastChannel, однако поддержка в браузерах сейчас оставляет желать лучшего, поэтому мы решили реализовать свою библиотеку. Когда библиотека была готова, выяснилось, что такая функциональность уже не нужна, зато появилась другая задача: нужно было общаться между iframe и основным окном.
При ближайшем рассмотрении выяснилось, что две трети библиотеки при этом можно не менять, необходимо только немного порефакторить код. Библиотека представляет из себя скорей ПРОТОКОЛ общения, который может работать с текстовыми данными. Его можно применять во всех случаях, если есть возможность передавать текст (iframe, window.open, worker, вкладки браузера, WebSocket).
На данный момент в протоколе есть две функциональности: отправка сообщения и подписка на события. Любое сообщение в протоколе — это объект с данными. Главное поле этого объекта — поле type, которое говорит нам, что это за сообщение. Поле type — это enum со значениями:
Польский исследователь безопасности в конце декабря опубликовал детали и пример рабочего кода, который можно использовать для создания обладающего всеми необходимыми возможностями червя для Facebook.
Этот код эксплуатирует уязвимость платформы Facebook, за злоупотреблением которой группой спамеров наблюдал польский исследователь, использующий в интернете псевдоним Lasq. Уязвимость скрывается в мобильной версии всплывающего диалога, предлагающего поделиться информацией с другими пользователями. На десктопе этой уязвимости нет.
Lasq говорит, что уязвимость, основанная на кликджекинге, существует в мобильной версии диалога «поделиться», которую атакующий использует через элементы iframe. Группа спамеров, которая, по всей видимости, обнаружила эту уязвимость до Lasq, использует её для размещения ссылок на стенах пользователей Facebook.
Читать полностью »
Виджеты сегодня являются неотъемлемой частью многих крупных порталов, поскольку позволяют использовать сложные партнерские разработки избегая долгие процедуры внедрения. Веб-аналитика виджетов при этом интересна всем сторонам, но в случае с iFrame возникают трудности в плане передачи 100% данных участникам партнерства. Какие это трудности и как нам удалось обойти их, хотелось бы рассказать в данной статье. Прежде всего она будет интересна всем, кто занимается разработкой и внедрением виджетов на iFrame, а также привлеченным аналитикам.
Читать полностью »
В целом, не только на них. Сегодня, во время просмотра анемэ некого контента, была обнаружена подгрузка подозрительного js скриптаЧитать полностью »
На портале государственных услуг Российской Федерации (gosuslugi.ru) специалисты компании «Доктор Веб» обнаружили внедрённый неизвестными потенциально вредоносный код. В связи с отсутствием реакции со стороны администрации сайта gosuslugi.ru мы вынуждены прибегнуть к публичному информированию об угрозе.
Дату начала компрометации, а также прошлую активность по этому вектору атаки, установить на данный момент не представляется возможным. Вредоносный код заставляет браузер любого посетителя сайта незаметно связываться с одним из не менее 15 доменных адресов, зарегистрированных на неизвестное частное лицо. В ответ с этих доменов может поступить любой независимый документ, начиная от фальшивой формы ввода данных кредитной карточки и заканчивая перебором набора уязвимостей с целью получить доступ к компьютеру посетителя сайта.
«Не надо, я сам»
Хромой Итальянец
Предлагается следующий сценарий: заказчик хочет разместить на сайтах своих партнёров небольшой горизонтальный динамический баннер с некой бизнес логикой, несложная калькуляция, табличка, локализация. Помимо этого, требуется всплывающее окно с крупной картинкой и контентом, которые по высоте больше чем родительский баннер.
Сразу дали понять, что партнёры, хоть и партнёры, но размещать у себя что-либо сложное не будут, то есть про jQuery забыли. Стандартное решение – iframe с минимальной функцией resize на голом JavaScript.
Сегодня я хочу рассказать о том, как мы в своем проекте indexisto.com сделали дешевую китайскую подделку аналог инструмента Google Webmaster Marker. Напомню, что Marker это инструмент в кабинете Google Webmaster, который позволяет аннотировать ваши страницы Open Graph тегами. Для этого вы просто выделяете мышкой кусок текста на странице и указываете что это title, а это рейтинг. Ваша страница при этом грузиться в Iframe в кабинете вебмастера.
Теперь Google, встретив подобную страницу на вашем сайте, уже знает, что за контент на ней опубликован, и как его красиво распарсить в сущность (статью, товар, видео..)
Нам был нужен подобный функционал. Задача казалась несложной и исключительно клиентсайд. Однако на практике решение лежит на стыке клиентсайда и серверсайда («чистые» JS программисты могу ничего не знать про различные прокси серверы и очень долго подходить к снаряду). При этом я не нашел в интернетах статью которая описывала бы всю технологию от начала до конца. Также хочется сказать спасибо пользователю BeLove и нашим безопасникам за помощь.