Элемент iframe встраивает другие веб-страницы непосредственно в текущую страницу. HTML5 вводит три новых атрибута этого элемента, чтобы помочь решить проблемы безопасности и удобства использования реализации iframe HTML4 .
Атрибут «песочница»
Песочница атрибут IFrame элемента является полезной функцией безопасности для фреймов. Когда вы помещаете его в элемент iframe , пользовательский агент запрещает функции, которые могут представлять угрозу безопасности для сайта и его пользователей.
Например:
<iframe sandbox = "" >
поручает браузеру запретить все функции, которые могут представлять угрозу безопасности, — таким образом, нет плагинов, форм, сценариев, исходящих ссылок, файлов cookie , локального хранилища и доступа к страницам на одном сайте.
Затем, используя значения ключевых слов песочницы , повторно включите некоторые функции. Эти ключевые слова:
- allow-формы : разрешить отправку формы.
- allow-same-origin : разрешить сценариям получать доступ к содержимому, подобному файлам cookie, из одного домена происхождения.
- allow-scripts : разрешить выполнение сценариев в этом IFRAME.
- allow-top-navigation : разрешить ссылки и скрипты iframe для цели _top
Не устанавливайте вместе ключевые слова allow-scripts и allow-same-origin в одном и том же фрейме . Если вы это сделаете, встроенная страница может затем удалить атрибут песочницы , сводя на нет его преимущества безопасности.
Атрибут ‘srcdoc’
Srcdoc атрибут дает веб — дизайнер больше контроля над фреймов, а также более высокий уровень безопасности. Вместо ссылки на веб-страницу с другим URL-адресом веб-дизайнер размещает HTML — код, который должен отображаться в iframe, в атрибуте srcdoc .
Поместив HTML-код, созданный ненадежным источником, таким как форма, в iframe, вы можете поместить в песочницу ненадежный контент и по-прежнему отображать его на странице. Комментарии блога являются примером. Большинство блогов предлагают ограниченное количество HTML-тегов, которые комментаторы могут использовать в своих комментариях. Но помещая эти комментарии в изолированную рамку iframe с использованием атрибута srcdoc , комментарии могут быть более надежными, при этом защищая сайт в целом.
Безопасность и фреймы
Два вышеупомянутых атрибута обеспечивают безопасность ваших элементов iframe , но они не являются защитой от всех вредоносных сайтов. Если вредоносный сайт может убедить посетителей вашего сайта получить прямой доступ к враждебному контенту (например, введя URL-адрес в браузере), они все равно могут подвергнуться атаке.
Если вы можете, установите содержимое в изолированном iframe как MIME-тип text / html-sandboxed .
«Бесшовный» атрибут
Бесшовная атрибут является логическим атрибутом , который указует браузер , чтобы отобразить IFRAME , как если бы она была частью родительского документа. Если вы хотите, чтобы ваш iframe отображался без проблем, просто включите этот атрибут в элемент:
<iframe seamless>
Но создание бесшовного iframe — это не только внешний вид, но и взаимодействие страницы с фреймом. Несколько советов:
- Ссылки в iframe будут открываться в родительском окне, если на странице iframe не установлена цель «_SELF».
- CSS в iframe будет добавлен в каскад всего документа.
- Корневой элемент страницы iframe считается дочерним элементом iframe .
- Ширина и высота iframe устанавливаются аналогично тому, как будут установлены другие элементы уровня блока .
- Когда родительский документ просматривается инструментом рендеринга, таким как программа чтения с экрана, iframe будет считан без объявления его в качестве отдельного документа.
Любые сценарии в родительском документе влияют на документ iframe таким же образом. Например, если в сценарии перечислены все фреймы на странице, ссылки в фрейме также будут перечислены.
Другими словами, атрибут seamless делает гораздо больше, чем просто удаляет границы из iframe . Если вы хотите, чтобы iframe был бесшовным, вы должны быть очень уверены в его содержании, чтобы не добавлять никакой угрозы безопасности для своего сайта, внедряя вредоносный сайт.