Код фрейма что это
Перейти к содержимому

Код фрейма что это

  • автор:

iFrame плавающий фрейм

iFrame (Inline Frame, фрейм)— это код HTML, используемый для встраивания интерактивных медиа, сторонних страниц в ваш сайт. iFrame создает плавающий фрейм (отдельное окно html документа), который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы, видео и интерактивные медиафайлы на вашу страницу.

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

iFrame современная реализация тега , был объявлен устаревшим в HTML 5.

Где используют фреймы

Встроенные видео, презентации и прочий визуальный контент.

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

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

Встраивание апплетов — приложений, работающих в контексте веб-сайта, например, формы оплаты или интерактивные карты.

Как использовать іFrame и его атрибуты

iframe src="ссылка на нужный тебе сайт" width="ширина" height="высота" border="рамка" align="размещение фрейма"> Здесь пишешь текст, который увидят посетители, если их браузер не поддерживает фреймы /iframe>

Атрибуты тега iframe:

Тег контейнер в котором вы поисывае что хотите подгрузить на свою страницу, например видео с ЧаВо о каналах на YouTube.

Источник іFrame (src) является источником контента с внешнего или внутреннего сервера.

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

iFrame и SEO

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

Использование тега iFrame зачастую рискованно получением фильтра, потому что сайт перестает полностью контролировать содержимое документа, так как его часть подгружается с другого сайта. Так как вы перестаёте контролировать содержимое, то через iframe возможна подгрузка нежелательного контента (18+, вирусы и так далее), что и может привести к санкциям от поисковых систем.

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

Атака типа clickjacking или зачем X-Frame-Options

Атака типа clickjacking (англ. «захват клика») позволяет вредоносной странице кликнуть по сайту-жертве от имени посетителя. Многие сайты были взломаны подобным способом, включая Twitter, Facebook, Paypal и другие. Все они, конечно же, сейчас защищены.

Идея этой атаки очень проста. Вот как clickjacking-атака была проведена на Facebook:

Посетителя заманивают на вредоносную страницу (неважно как).

На странице есть ссылка, которая выглядит безобидно (например, «Разбогатей прямо сейчас» или «Нажми здесь, это очень смешно»).

Поверх этой ссылки вредоносная страница размещает прозрачный

При попытке клика на эту ссылку посетитель на самом деле нажимает на кнопку.

Вот так выглядит вредоносная страница. Для наглядности полупрозрачный (на реальных вредоносных страницах он полностью прозрачен):

 body> style> iframe < /* ифрейм с сайта-жертвы */ width: 400px; height: 100px; position: absolute; top:0; left:-20px; opacity: 0.5; /* в реальности opacity:0 */ z-index: 1; >/style> div>Нажми, чтобы разбогатеть:/div> iframe src="/clickjacking/facebook.html">/iframe> button>Нажмите сюда!/button> div>. И всё будет супер (у меня, хакера)!/div> /body>

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

В результате, если пользователь авторизован на сайте Facebook («Запомнить меня» обычно активировано), то он добавляет «лайк». В Twitter это будет кнопка «читать», и т.п.

Всё, что нам необходимо для атаки — это расположить на вредоносной странице так, чтобы кнопка находилась прямо над ссылкой. Так что пользователь, кликающий по ссылке, на самом деле будет нажимать на кнопку в . Обычно это можно сделать с помощью CSS -позиционирования.

Clickjacking-атака для кликов мыши, а не для клавиатуры. Эта атака срабатывает только на действия мыши (или аналогичные, вроде нажатия пальцем на мобильном устройстве). Клавиатурный ввод гораздо сложнее перенаправить. Технически, если у нас есть текстовое поле для взлома, мы можем расположить ифрейм таким образом, чтобы текстовые поля перекрывали друг друга. Тогда посетитель при попытке сфокусироваться на текстовом поле, которое он видит на странице, фактически будет фокусироваться на текстовом поле внутри ифрейм.

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

Заголовок X-Frame-Options

Заголовок X-Frame-Options со стороны сервера может разрешать или запрещать отображение страницы внутри фрейма.

Это должен быть именно HTTP-заголовок: браузер проигнорирует его, если найдёт в HTML -теге . Поэтому при ничего не произойдёт.

Заголовок может иметь 3 значения:

DENY Никогда не показывать страницу внутри фрейма.

SAMEORIGIN Разрешить открытие страницы внутри фрейма только в том случае, если родительский документ имеет тот же источник.

ALLOW-FROM domain Разрешить открытие страницы внутри фрейма только в том случае, если родительский документ находится на указанном в заголовке домене.

Атака сlickjacking – это способ хитростью «заставить» пользователей кликнуть на сайте-жертве, без понимания, что происходит. Она опасна, если по клику могут быть произведены важные действия.

Хакер может разместить ссылку на свою вредоносную страницу в сообщении или найти другие способы, как заманить пользователей. Вариантов множество.

С одной стороны — эта атака «неглубокая», ведь хакер перехватывает только один клик. Но с другой стороны, если хакер знает, что после этого клика появятся другие элементы управления, то он может хитростью заставить пользователя кликнуть на них.

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

Для защиты от этой атаки рекомендуется использовать X-Frame-Options: SAMEORIGIN на страницах или даже целиком сайтах, которые не предназначены для просмотра во фрейме.

Как добавить заголовок X-Frame-Options в Nginx, Apache

Если вы хотите в NginX задать X-Frame-Options для всех сайтов, добавьте строку в раздел http <> файл nginx.conf

add_header X-Frame-Options "SAMEORIGIN" always;
Header always set X-Frame-Options "SAMEORIGIN"

Проверяем стандартно утилитой curl:

curl -I https://wow2.top . x-frame-options: SAMEORIGIN

Инглекс (Englex) — онлайн школа английского языка.

11 Самых Популярных Статей

  1. ulimit (limits.conf) управление ограничениями ресурсов ОС Linux
  2. 7 способов сравнения файлов по содержимому в Windows или Linux
  3. Что такое страны tier 1,2,3 и как правильно выбрать ГЕО для рекламной кампании
  4. Настройка, использование GitLab CI/CD
  5. Что означает «> /dev/null 2>&1» или перенаправление STDIN, STDOUT и STDERR?
  6. Настройка и использование сервера OpenVPN в Linux
  7. PostgreSQL: создать БД, пользователя, таблицу, установить права
  8. Виды кодировок символов
  9. Использование rsync в примерах
  10. my.cnf примеры конфигурации MySQL, MariaDB
  11. dig проверка DNS сервера

11 Самых Популярных Обзоров

  1. ТОП 4 лучших антидетект браузеров в 2023 (Бесплатные & Платные)
  2. Обзор и отзывы о Namecheap в 2023 году
  3. Хостинг Zomro (Зомро)
  4. Обзор браузера Dolphin
  5. ТОП 3 Проверенных VPN, Прокси, Хостинг VPS Турция в 2023
  6. Что такое абузоустойчивый хостинг (bulletproof)?
  7. Обзор и отзывы о 4VPS (FourServer) в 2023 году
  8. Обзор и отзывы AstroProxy в 2023 году
  9. Обзор и отзывы о PQ Hosting в 2023 году
  10. Обзор и отзывы о Hostinger в 2023 году: преимущества и недостатки
  11. Проверенные VPS / VDS хостинг провайдеры

Код фрейма что это

Мы встроили одну страницу в другую страницу, чтобы ты смотрел страницу пока смотришь страницу.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Этот контейнер обычно называют фреймом. Внешний вид фрейма и его положение на странице можно задать через CSS.

Пример

Скопировать ссылку «Пример» Скопировано

С помощью такого нехитрого кода мы можем встроить карту размером 560 на 400 пикселей на любую страницу:

   title="Inline Frame Map" width="560" height="400" frameborder="1" allowfullscreen="true" src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A">  iframe id="inlineFrameExample" title="Inline Frame Map" width="560" height="400" frameborder="1" allowfullscreen="true" src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A" > iframe>      

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Встраивать файлы можно либо по ссылке с помощью атрибута src , либо целиком HTML-код файла с помощью srcdoc .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Часто сервисы, из которых мы хотим что-то встроить (карты, посты и тому подобное), сами могут сгенерировать вам . Его останется только добавить в свой код.

Контейнер . . . < / iframe>нужно всегда закрывать.

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

src — URL-адрес файла, который вы встраиваете.

srcdoc — позволяет встроить HTML-код целиком, так что браузеру не придётся подгружать что-то по внешней ссылке. Если используется этот атрибут, то ссылка src игнорируется.

sandbox — ограничивает определённые действия и функции встраиваемого документа. Если просто указать атрибут sandbox , то он применит сразу все возможные ограничения. Либо можно указать нужные ограничения в любом порядке через пробел:

Возможные значения атрибута sandbox

  • allow — forms — позволяет отправлять формы внутри .
  • allow — modals — позволяет открывать модальные окна, которые мы все так не любим: вроде «Оставьте свой имейл» или «Не уходите так быстро! У вас товар в корзине». Обычно эти окна не дают пользоваться сайтом, пока их не закроешь.
  • allow — orientation — lock — позволяет фиксировать горизонтальное или вертикальное положение экрана.
  • allow — pointer — lock — позволяет пользователю управлять содержимым с помощью курсора через Pointer Lock API.
  • allow — popups — разрешает показ всплывающих окон, вызванных с помощью window . open ( ) , target = » _ blank» или show Modal Dialog ( ) .
  • allow — popups — to — escape — sandbox — позволяет содержимому фрейма открывать новые окна. С этим параметром у таких окон не будет тех ограничений, которые есть у с атрибутом sandbox .
  • allow — presentation — разрешает использовать Presentation API.
  • allow — same — origin — контент из загружается по тем же правилам и с теми же ограничениями, что и страница, на которой он находится.
  • allow — scripts — позволяет загружать скрипты. При этом всплывающие окна будут запрещены.
  • allow — top — navigation — позволяет открывать ссылки, которые есть в , в том же окне, в которое встроен фрейм.
  • allow — top — navigation — by — user — activation — позволяет контенту из фрейма управлять страницей, на которой он находится. Но только по инициативе пользователя.

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

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Атрибут sandbox будет игнорироваться, если использовать одновременно значения allow — scripts и allow — same — origin и если исходная страница и на ней загружаются из одного и того же источника.

�� Помните, что — этот как будто ещё одна страница, которая загружается внутри вашей страницы. Содержимое фрейма может загружаться дольше, чем ваш сайт.

�� В стоит добавить атрибут title на случай, если пользователь не может увидеть страницу и использует инструмент чтения с экрана. Например, так:

  iframe title="Страница в Википедии о лемурах" src="https://ru.wikipedia.org/wiki/Обыкновенные_лемуры">iframe>      

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

�� Я редко использую . Только когда надо, например, встроить видео с YouTube.

Почти всегда лучше настроить заголовок cross — origin (это делается на уровне сервера) так, чтобы сторонние сайты не могли встраивать к себе ваш сайт как фрейм — это часто используется для всяких махинаций.

Код фрейма что это

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

Тег .

Синтаксис

Атрибуты

align Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом. allowtransparency
Устанавливает прозрачный фон фрейма, через который виден фон страницы. frameborder Устанавливает, отображать границу вокруг фрейма или нет. height Высота фрейма. hspace Горизонтальный отступ от фрейма до окружающего контента. marginheight Отступ сверху и снизу от содержания до границы фрейма. marginwidth Отступ слева и справа от содержания до границы фрейма. name Имя фрейма. sandbox Позволяет задать ряд ограничений на контент загружаемый во фрейме. scrolling Способ отображения полосы прокрутки во фрейме. seamless Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа. src Путь к файлу, содержимое которого будет загружаться во фрейм. srcdoc Хранит содержимое фрейма непосредственно в атрибуте. vspace Вертикальный отступ от фрейма до окружающего контента. width Ширина фрейма.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx

    Тег IFRAME     

Код фрейма что это

Тег (от англ. inline frame — встроенная рамка) создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.

.

Демо¶

Изображения и мультимедиа

Синтаксис¶

iframe>. iframe> 

Закрывающий тег обязателен.

Атрибуты¶

Определяет политику элемента

Разрешает для фрейма полноэкранный режим. Этот атрибут считается устаревшим атрибутом и переопределяется как allow=»fullscreen» .

Установите в значение true , если нужно разрежить вызывать функции API платежей. Этот атрибут считается устаревшим атрибутом и переопределяется как allow=»payment» .

Указывает, какой реферер отправить при получении ресурса фрейма

Позволяет задать ряд ограничений на контент загружаемый во фрейме.

Способ отображения полосы прокрутки во фрейме.

Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.

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

Хранит содержимое фрейма непосредственно в атрибуте.

allowfullscreen¶

Атрибут allowfullscreen разрешает для фрейма полноэкранный режим.

Синтаксис

iframe allowfullscreen>iframe> 

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

height¶

Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что фрейм будет занимать всю ширину веб-страницы.

Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.

Синтаксис

iframe height="">iframe> 

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

width — 300 пикселей, height — 150 пикселей.

name¶

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

Синтаксис

iframe name="">. iframe> 

Значения

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

Значение по умолчанию

sandbox¶

Атрибут sandbox позволяет установить ряд ограничений на контент, загружаемый во фрейме, к примеру, блокировать формы и скрипты. Это позволяет повысить безопасность текущего документа, особенно в том случае, когда во фрейм загружается документ из непроверенного источника.

Синтаксис

1 2 3 4
iframe src="URL" sandbox="allow-same-origin || allow-top-navigation || allow-forms || allow-scripts" >iframe> 

Значения

Позволяет содержимому фрейма отправлять формы.

Разрешает открытие модальных окон, вроде тех, которые делаются с помощью функции alert в JavaScript.

Позволяет отключать возможность блокировки экрана.

Позволяет фрейму использовать Pointer Lock API.

Разрешает всплывающие окна (такие как window.open , target=»_blank» , showModalDialog ).

Разрешает фрейму использовать Presentation API.

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

Разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено.

Позволяет открывать ссылки фрейма в родительском документе.

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

При одновременном использовании значений allow-scripts и allow-same-origin , когда исходный и загружаемый документ одного происхождения, атрибут sandbox игнорируется.

Значение по умолчанию

scrolling¶

Если содержимое фрейма не помещается в отведённые размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling .

Синтаксис

iframe scrolling="auto | no | yes">. iframe> 

Значения

  • auto — Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
  • no — Запрещает отображение полос прокрутки.
  • yes — Всегда вызывает появление полос прокрутки, независимо от объёма информации.

Значение по умолчанию

seamless¶

Устанавливает, что содержимое фрейма должно отображаться так, словно оно является частью документа. При этом соблюдается ряд условий:

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

Синтаксис

iframe seamless>iframe> 

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

src¶

Указывает адрес файла, который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.

Синтаксис

iframe src="">. iframe> 

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

srcdoc¶

Синтаксис

iframe srcdoc="">. iframe> 

Значения

HTML-код содержимого, включая необходимые теги.

Значение по умолчанию

width¶

Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что фрейм будет занимать всю ширину веб-страницы.

Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.

Синтаксис

iframe height="">iframe> 

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

width — 300 пикселей, height — 150 пикселей.

Спецификации¶

  • Referrer Policy
  • WHATWG HTML Living Standard
  • HTML5
  • HTML 4.01 Specification
  • Screen Orientation API
  • Presentation API

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
 html> head> meta charset="utf-8" /> title>IFRAMEtitle> head> body> iframe src="page/banner.html" width="468" height="60" align="left" > Ваш браузер не поддерживает встроенные фреймы! iframe> body> html> 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *