Главная » Обучение программированию

iframe в HTML


Содержание

Фреймы

Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.

Илон Маск рекомендует:  text-decoration-style в CSS

Создание фреймов

Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:

Пример: Структура HTML-документа с фреймами

frame_left

В приведенном примере страница содержит три области, в каждую из которых первоначально загружаются HTML-документы frame_top.html, frame_left.html и frame_right.html. Помимо HTML-документов, фрейм может содержать и графику. Для этого необходимо указать адрес соответствующего изображения в атрибуте src, например src=»http://wm-school.ru/html/image.gif». Обратите внимание, что элемент используется без закрывающего тега.
Внутри контейнера могут содержаться только теги или другой набор фреймов, охваченный тегами и .
Тег имеет следующие атрибуты:

  • rows — описывает разбиение страницы на строки:
  • cols — описывает разбиение страницы на столбцы:

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

В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:

  • cols=»20%, 80%» — окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 20%, а правая 80% окна браузера.
  • rows=»100, *» окно браузера разбивается на два горизонтальных окна с помощью атрибута rows, верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.

Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами и . Все, что находится между тегами и , игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер , тогда все пользователи смогут увидеть его веб-страницу.
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег . Атрибут src задает документ, который должен отображаться внутри данного фрейма, например: . Если атрибут src отсутствует, отображается пустой фрейм.

Границы или пространство между фреймами

По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента , позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border. По умолчанию значение толщины границы равно пяти.
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder. Атрибут frameborder может принимать только два противоположных значения. Если значение атрибута frameborder равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут frameborder, а для некоторых браузеров требуется еще добавить атрибут framespacing со значением «0»:

В следующем примере убираем границу между фреймами:

Что Такое iFrame?

iFrame это сокращение от Inline Frame. Это мощный элемент в веб-дизайне. Вероятно, вы видели бесчисленное количество видео на YouTube, размещённых на других сайтах, кроме YouTube. IFrame могут поддерживать все виды носителей. И поэтому вам может быть интересно, что такое iFrame и как его использовать. Веб-дизайнер обязательно поместит элемент iFrame на этой странице.

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

Что такое iFrame

IFrame — это кадр внутри кадра. Это компонент HTML-элемента, который позволяет встраивать документы, видео и интерактивные медиафайлы на страницу. Делая это, вы можете отобразить дополнительную веб-страницу на главной странице.

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

Вы не должны использовать iFrame чрезмерно, это может замедлить работу вашей страницы и создать угрозу безопасности, особенно если вы используете контент с подозрительного веб-сайта. Рассматривайте iFrame как часть вашего контента, но не как часть вашего сайта. Например, если вы хотите добавить видео из YouTube, чтобы стимулировать ваших читателей, вы можете вставить элемент iFrame в свой пост.

Дополнительно: Как Вставить Видео в WordPress (англ)

Как использовать іFrame

Теперь вы знаете, что іFrame — это дополнительный элемент для обмена контентом с других сайтов. Вы можете добавить его, чтобы предоставить читателям контекст на определённую тему. Вы можете вставить элемент iFrame HTML, используя тег используется для размещения видео в іFrame.

  • Источник іFrame (src) является источником контента с внешнего или внутреннего сервера. Не забудьте добавить встроенный код в URL.
  • Width и height — это соотношение сторон кадра. Вы можете вставить фиксированные размеры, такие как 680 × 480 пикселей (px), как в примере. Или вы можете использовать метод на основе процента (10% -100%) для автоматической настройки іFrame.

    • Угрозы безопасности

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

    В 2008 году произошёл всплеск внедрения кода іFrame на некоторых законных веб-сайтах, таких как новости ABC. Этот тип атаки перенаправляет посетителей на вредоносный сайт, который затем устанавливает вирус на компьютер посетителей или пытается украсть конфиденциальную информацию. Вот почему не рекомендуется включать iFrame как неотъемлемую часть вашего сайта.

    Если вы считаете, что веб-сайт небезопасен, даже не связывайте его и не помещайте его содержимое в элемент iFrame.

    Вам нужен сайт? Вы в поисках лучшего хостинг-провайдера? Тогда обязательно попробуйте Hostinger.

    Заключение

    В общем, іFrame является мощным элементом, если вы хотите, чтобы ваши посетители обратили больше внимания. Думайте об іFrame как о части контента, которую вы создаёте, а не как о неотъемлемой части вашего сайта. Вы не должны использовать іFrame чрезмерно. Лучше, если вы сможете разработать свой сайт без іFrame. Если вам всё ещё нужно использовать его в целях разработки, не забывайте использовать только контент с заслуживающего доверия сайта. Мы надеемся, что эта статья поможет вам в реализации и понимании, что такое iFrame.

    HTML тег ) тегами.

    Атрибут src является обязательным для тега . Он указывает адрес документа, который должен отображаться в фрейме.

    Пример

    Чтобы установить размер iframe, вы можете использовать атрибуты height и width или использовать CSS. Значения атрибута устанавливаются в пикселях по умолчанию, но они также могут быть в процентах.

    Пример

    По умолчанию у iframe есть граница вокруг. Чтобы удалить границу, вы можете использовать атрибут style и / или CSS свойство border.


    Нажав кнопку «Принять и продолжить», вы соглашаетесь с Политики конфиденциальности

    Мы запустили рейтинг зарплат интернет-маркетологов! Прими участие в анонимном опросе.

    How-to – Читать 7 минут – 7 декабря 2020

    Использование данного тега зачастую рискованно получением фильтра: сайт перестает полностью контролировать содержимое документа, так как его часть подгружается с другого сайта через iframe.

    Поскольку мы перестаем контролировать содержимое, то через iframe возможна подгрузка нежелательного контента (18+, вирусы и прочее), что, в свою очередь, может привести к санкциям. А это отразится на продвижении в выдаче.

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

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

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

    Так выглядит простейший пример iframe: фрагмент кода с заданным размером фонового окна под баннер:

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

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

    Например, вы вызываете кликом справку, в ответ появляется общее меню, рядом с которым в фоне открывается окошко, отвечающее за выбранный вами блок информации:

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

    Кроме того, использование айфрейма может быть обусловлено анимацией управляемой JS, которая не так медленно работает в отдельном окне.

    • встраивание медиаконтента — как своего, так и стороннего;
    • встраивание примеров фрагментов кода;
    • встраивание апплетов — приложений, работающих в контексте веб-сайта, например, формы оплаты или интерактивные карты. Так Яндекс предоставляет возможность запускать Яндекс.Карты через iFrame.
    • фотогалереи;
    • окно чата;
    • навигация;
    • накрутка фонового трафика.

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

    А самое главное — это подгружать контент только из доверенных источников!

    Преимущества:

      Быстрая подгрузка видеоматериалов, карт, презентаций и прочего контента.

    Фреймы в HTML позволяют показать посетителю одновременно несколько страниц, которые абсолютно самостоятельны.

    Посетитель сможет переключать экраны, не перезагружая при этом страницу.

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

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

    • А теперь подробнее о возможных рисках:

      Существует вероятность, что индексирование веб-сайта поисковыми роботами будет прерываться при переходе на фрейм.

    Ряд браузеров не поддерживает подобное отображение. Они либо устаревшие, либо предназначены только для аудио и т.п.

  • Угроза фильтров. Санкции от поисковых систем возможны, когда во фреймах находится контент запрещенного характера.

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

    С технической точки зрения получается следующий код:

    Как сделать iframe? Скрипт iframe.

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

    Это бывает нужно, например, чтобы установить свой счетчик Яндекс Метрики или Google Analytics, либо код ретаргетинга ВК или FB.


    Iframe – это, если говорить простыми словами, встроенная рамка (область), содержащая контент с внешних источников (сайтов).

    Например, чтобы отобразить на своем домене мой сайт, достаточно прописать в index.php:

    Как сделать iframe на чужой сайт

    “Установить” чужой сайт на свой домен через iframe крайне просто.

    Достаточно создать файл index.php, прописать в нём следующий код iframe и разместить на своем хостинге в нужном домене:

    В коде заменяем https://kelansky.ru на свой сайт.

    Параметры UTM-меток указываем при необходимости. Данные параметры позволят передавать в метрику исходного (чужого сайта) ваши UTM-метки. Это бывает нужно чтобы отслеживать источники конверсий в личном кабинете партнерки.

    Например, при использовании данных параметров в Яндекс Директ:

    utm_source= — передает источник трафика

    utm_medium= $_GET[‘utm_medium’];?> — передает тип трафика (cpc, cpm)

    utm_campaign= ; ?> — передает название/номер рекламной кампании

    utm_term= ;?> — передает ключевое слово/фразу

    utm_content= $_GET[‘utm_content’];?> — передает номер объявления

    Убираем рамку iframe

    Чтобы при вставке тега iframe на сайт у нас не было прокрутки или у iframe не отображалась рамка, нужно добавить в тег iframe атрибуты:

    frameborder=»0″ scrolling=»yes» height=»100%» w

    frameborder – ширина рамки iframe

    scrolling – включена отключена прокрутка iframe

    height – высота iframe (в нашем случае высота на 100% экрана, т.к. мы отображаем весь сайт)

    width – ширина iframe (аналогично 100%)

    Отслеживание событий через

    Итак, мы разобрались как сделать iframe чужого сайта на свой домен. Наверняка мы сделали это не просто так, а чтобы установить свой код для отслеживания статистики. А чтобы в статистике учитывать события/конверсии/заказы, нам нужно настроить отслеживание этих событий.

    А вот тут не всё так просто. Мы не можем только со своей стороны настроить отслеживание событий, т.к. сайт чужой, и соответственно, доступа к его коду у нас нет.

    Но мы можем попробовать договориться с владельцем сайта, чтобы он установил нужные нам элементы на свой сайт, и тогда мы сможем отслеживать, например, событие нажатия кнопки.

    Для этого нам нужно будет настроить в Яндекс Метрике (если говорить о Метрике) в качестве цели JavaScript событие и в коде сайта в теге кнопки прописать:

    onsubmit=»yaCounter ХХХХХХХХ .reachGoal(‘ SOBYTIE ‘); return true;»

    где yaCounter ХХХХХХХХ – номер счетчика Яндекс Метрики (указываем номер вместо ХХХ),

    а SOBYTIE – идентификатор события, которое мы указали в Метрике в качестве цели.

    После этого, все нажатия на кнопку для вашей Яндекс Метрики должны начать работать.

    Более подробно узнать о настройке целей в Яндекс Метрике можно здесь.

    Как видите, использовать iframe достаточно просто.

    Если остались какие-то вопросы – пишите их в комментариях, либо лично мне.

    Не получается установить iframe? – тоже пишите, помогу.


    Как видите, достаточно указать лишь ссылку на источник, с которого будет браться информация. За счет атрибутов width и height мы задаем область фрэйма, а frameborder отключает рамку вокруг него. Если высота фрэйма недостаточна для отображения всего содержимого, то появится полоса прокрутки.

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

    frame

    Второй тип фрэймов является предшественником iframe и работает на тегах frameset (это уже устаревающий вариант). Для организации таких фрэймов создайте отдельную страницу и пропишите следующий код:

    Важной особенностью работы таких фрэймах является отсутствие тегов и на странице. Здесь мы видим, что подключаются сразу два сайта внутри frameset. В нем rows означает, что фрэймы будут распологаться друг за другом в строковом виде (если поставить cols — то стобиками). 20%,80% — первый фрэйм займет 20% всего пространства, а второй 80%. Если поставить *,* — то пространство поделится поровну.

    Доступ к контенту iFrame с другого домена

    Сегодня я хочу рассказать о том, как мы в своем проекте indexisto.com сделали аналог инструмента Google Webmaster Marker. Напомню, что Marker это инструмент в кабинете Google Webmaster, который позволяет аннотировать ваши страницы Open Graph тегами. Для этого вы просто выделяете мышкой кусок текста на странице и указываете что это title, а это рейтинг. Ваша страница при этом грузится в Iframe в кабинете вебмастера.

    Теперь Google, встретив подобную страницу на вашем сайте, уже знает, что за контент на ней опубликован, и как его красиво распарсить в сущность (статью, товар, видео..)

    Нам был нужен подобный функционал. Задача казалась несложной и исключительно клиентсайд. Однако на практике решение лежит на стыке клиентсайда и серверсайда («чистые» JS программисты могу ничего не знать про различные прокси серверы и очень долго подходить к снаряду). При этом я не нашел в интернетах статью которая описывала бы всю технологию от начала до конца. Также хочется сказать спасибо пользователю BeLove и нашим безопасникам за помощь.

    В нашем случае хотелось чтобы вебмастер мог удобно (пометив мышкой) получить значение xPath к определенным элементам на своей странице.

    Iframe «Same Origin»

    И так в нашей админке человек должен ввести URL страницы своего сайта, мы отобразим ее в iFrame, человек тыкнет мышкой куда надо, мы получим искомый xPath. Все бы ОК, но у нас нет доступа к контенту страницы с другого домена загруженной в iframe в нашей админке (наш домен), из за политики безопасности браузера.

    CORS — Cross origin resource sharing

    Одни люди мне посоветовали использовать CORS. Модная технология которая решает множество проблем с доступом к контенту с другого домена в браузере и позволяет обойти same origin policy ограничения.
    Сайт который хочет дать доступ к своему контенту на страницах чужого домена просто пишет в http заголовок:

    А в заголовоке http запроса идущего со страницы другого домена из браузера должно быть поле origin:

    понятно что поле origin к запросу браузер дописывает сам. Плюсанем статью на Хабре и увидим что современные браузеры добавляют Origin даже к запросу на тот же самый домен:

    однако:

    1. браузер не проставляет origin в загловке запроса на страницу загружаемую в iframe (кто-нибудь может пояснить почему?)
    2. мы не хотим просить вебмастеров прописывать заголовок Access-Control-Allow-Origin

    Iframe sandbox

    Еще одна модная технология. Sandbox это атрибут тега Iframe. В качестве одного из значений этого атрибута можно выставить значение allow-same-origin. До того как я начал копать эту тему я не знал что точно делает этот аттрибут, а звучало очень заманчиво. Однако атрибут sandbox просто ограничивает то, что может делать страница загруженная в iframe и не имеет отношения к проблеме доступа из родительского документа к содержимому фрейма.

    Конкретно значение allow-same-origin (вернее его отсутствие) всего лишь говорит что iframe нужно всегда расценивать как загруженный с чужого домена (нельзя например из такого фрейма послать AJAX запрос на домен родительского документа)

    Посмотрим как сделано у Google

    Время рисеча того, как сделано у большого брата

    Обратим внимание на аттрибут src элемента iframe: src=»https://wmthighlighter.googleusercontent.com/webmasters/data-highlighter/RenderFrame/007.» — наша страница грузится в админку с домена Google. Далее еще более сурово: даже скрипты и картинки в исходном документе прогоняются через прокси. Все src, href… заменены в html на проксированные. Примерно вот так:

    Все ресурсы которые использует ваша страница еще и сохраняются на прокси серверах Гугл. Вот например наш логотип на прокси сервере Google.

    CGIProxy?

    Visit the script’s URL to start a browsing session. Once you’ve gotten a page through the proxy, everything it links to will automatically go through the proxy. You can bookmark pages you browse to, and your bookmarks will go through the proxy as they did the first time.

    Свой Proxy!

    Однако, если сузить задачу, написать простой proxy намного проще самому. Дело в том, что делать так делает Google, прогоняя весь контент страницы через прокси совершенно не обязательно. Нам просто нужно чтобы html любой страницы отдавался с нашего домена, а ресурсы можно подгрузить и из оригинального домена. Https мы пока отбросили.
    Задача супер производительности или удобств настроек здесь не стоит, и сделать это можно по быстрому и на чем угодно, от node.js до php. Мы написали сервлет на Java.

    Качаем страницу

    Что должен делать прокси сервлет? Через get параметр получаем url страницы которую нужно загрузить, далее качаем страницу.

    Обязательно определяем кодировку страницы (через http ответ или charset в html) — наш прокси должен ответить в той же кодировке что и страница которую мы загрузили. Так же определим Content-Type на всякий случай, хотя и так понятно что мы получаем страницу в text/html и отдадим ее так же.

    *Для любителей оценить чужой код: у нас в команде у всех одинаковые настройки форматирования кода eclicpse, и при сохранении файла эклипс сам дописывает ко всем переменным final если они более нигде не меняются. Что кстати довольно удобно в итоге.

    Меняем относительные URL на абсолютные в коде страницы

    Надо пройтись по всем атрибутам с src и href в странице (пути файлов стилей, картинки), и заменить относительные урлы на абсолютные. Иначе страница будет пытаться загрузить картинки с каких-то папок на нашем прокси, которых у нас естественно нет. В любом языке есть готовые классы или можно найти сниппеты кода для этого дела на stackoverflow:

    Отсылаем html

    Вот и все, прокси сервлет готов. Посылаем ответ, выставив нужную кодировку и mime.

    Деплоим и тестим

    Деплоим наш прокси сервлет на том же адресе, что и админка adminpanel.indexisto.com, грузим в наш iframe страницу сайта вебмастера через прокси и все кроссдоменные проблемы исчезают.
    Наш прокси работает по адресу

    — вот так хабр загрузится с нашего домена. Отдаем этот адрес в iframe и пробуем получить доступ к DOM дереву хабра через JS в админке — все работает. CSRF естественно не пройдет так как страница загружена с нашего прокси у которого нет куки.

    Проблемка SSRF

    Загрузим в наш iframe сайт с адресом «localhost» — опа, вот стартовая страница нашего nginx. Попробуем какой-нибудь внутренний (не видный наружу) ресурс в той же сети, что и наш прокси сервер. Например secured_crm.indexisto.com — все на месте.
    Конечно пытаемся запретить эти вещи в нашем прокси, в случае если кто-то пытается запроксировать localhost мы выходим ничего не возвращая:

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

    Проблемка XSS

    Загрузим в наш iframe свою страничку на которой напишем:


    Всплывает алерт. Печально. Это можно обойти атрибутом iframe sandbox allow-scripts , однако как быть со старыми браузерами которые этот атрибут не очень понимают? Угнать можно только свои куки, но все равно так оставлять нельзя.
    Выносим сервлет не только на отдельную машину, но и делаем ей отдельный поддомен highlighter.indexisto.com.

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

    Интересная мысль.

    Продолжая ресечить решение от гугла я открыл нашу страницу отдающуюся через прокси в отдельном окне

    и обратил внимание на странную ошибку в консоли.

    Стало ясно что все организованно сложнее, чем просто загрузить страницу в iframe со своего домена. Страницы общаются между собой. Соответственно двигаемся в сторону window.postMessage

    Post Message

    Заставлять внедрять вебмастера в свою страницу наш скрипт который бы обеспечивал выделение элементов страницы мышкой, а потом бы отсылал xPath этих элементов к нам в родительский документ через postMessage было не гуманно. Однако никто не мешает нашему прокси внедрить любые скрипты на загружаемую в iFrame страницу.
    Все необходимые для внедрения скрипты сохраняем в файл, и вставляем их перед закрывающим body:

    для пробы вставляем alert — все работает.

    JS часть — подсвечиваем дом элемент под мышкой и получаем xpath

    Окей, переходим собственно к JS который мы вставили на страницу вебмастера.
    Нам необходимо подсвечивать dom элементы над которыми человек водит мышкой. Лучше делать это с помощью shadow так как тогда элемент не будет смещаться, а вся страница прыгать. Вешаем onmouseover на body и смотрим на target события. В этом же обработчике я вычисляю xpath элемента. Вычислять xPath элемента лучше на клик, но никаких тормозов и в такой реализации я не заметил.

    Я не привожу здесь реализацию получения xPath элемента DOM. Существует множество сниппетов того как это сделать. Эти сниппеты можно модифицировать под свои задачи, например вам нужны в xpath только тэги. Или вам нужны id если они есть и классы если нет id — у всех свои требования.

    JS часть — обрабатываем клик

    Клик человека на странице в iframe сразу же «гасится» (перехода по ссылке в iframe не произойдет). А так же мы посылаем в родительское окно строку полученного xPath (мы его сохранили еще на этапе вождения мышкой над элементом)

    Profit!

    Вот и все, теперь в нашей админке вебмастер может намного проще быстро получить xpath пути к элементам на своих страницах.

    Добавим еще секьюрности

    Окей, у нас все заработало, однако есть момент с тем, что наш прокси смотрит в мир совершенно незащищенный. Кто угодно может запроксировать что угодно.

    Ставим перед прокси nginx, он слушает 80 порт, сам прокси убираем на другой порт. Все другие порты кроме 80 закрываем от внешнего мира.

    Теперь сделаем так чтобы прокси работал только через панель администратора. В момент когда вебмастер вводит URL своего сайта мы быстро бегаем на сервер где генерим md5 хэш от текущего TimeStamp + 1 час, самой URL и суперсекретного когда:

    Так же обратите внимание что в коде мы получачаем md5 строку не как привычный hex, а в base64 кодировке, плюс в полученном md5 мы делаем странные замены символов слэша и плюса на подчеркивание и тире.
    Дело в том что ngnix использует base64 Filename Safe Alphabet tools.ietf.org/html/rfc3548#page-6
    А Java дает каноничсекий base64.

    Получив в нашей админке ответ от сервера с секьюрной md5, мы пытаемся загрузить в iframe вот такой url:
    highlighter.indexisto.com/?md5=Dr4u2Yeb3NrBQLgyDAFrHg==&url=http%3A%2F%2Fhabrahabr.ru&expires=1389791582

    Теперь настраиваем модуль nginx HttpSecureLinkModule. Этот модуль сверяет md5 всех параметров которые к нему пришли (в модуле прописан тот же секретный ключ что и в сервлете админки), проверяет не проэкпарйилась ли ссылка и только в этом случае пробрасывает запрос на наш прокси сервлет.

    Теперь никто не может воспользоваться нашим прокси не из админки, а так же не может куда-нибудь вставить запроксированную на наш сервер картинку — она все равно умрет через час.