Современные веб-приложения объединяют новые впечатления в один опыт. Подумайте, виджеты Twitter, показывающие последние твиты о продукте. Или комментарии в Facebook обсуждают статью. Или даже просто встроенные веб-страницы через элемент IFRAME . Эти события могут увеличить нарушения безопасности вашего сайта.
Не волнуйтесь … в блоке есть новый ребенок, который поможет вам: песочница HTML5. Но прежде чем я вернусь к этому, давайте быстро рассмотрим проблемы элементов IFRAME .
Черный ящик
Встраивание контента в IFRAME — это все равно, что публично объявить вечеринку в Facebook. Вы думаете, что знаете, кого пригласили, но на самом деле вы не представляете, кто это передал и кто появится.
То же самое верно для создания контента. Вы знаете, на что ссылаетесь, но понятия не имеете, как будет развиваться сайт в будущем. Содержание или функциональность (или оба) могут измениться в любое время. Без вашего ведома … и без вашего согласия.
Проблемы безопасности при использовании iframe
Браузеры обрабатывают страницы, которые используют IFRAME, как любую другую веб-страницу. Формы могут использоваться для извлечения пользовательского ввода, сценарии могут быть выполнены, страница может перемещаться в окне браузера, и могут быть выполнены плагины браузера. И так же, как нарушители вечеринок, которые выходят из-под контроля, вы не контролируете, что будет делать размещенный контент.
По умолчанию существует один механизм, предотвращающий некоторые виды атак: междоменная политика.
Повторное размещение контента из другого домена
Если размещенный контент поступает из другого домена, вступает в действие междоменная политика, которая запрещает «чужому» контенту доступ к объектной модели документа родителя.
Таким образом, встроенная страница не может читать, например, файлы cookie или локальное хранилище браузера для размещенного домена. Но риски все еще остаются.
Размещенный контент все еще может перемещаться на верхнем уровне. Отображая контент, который может ожидать пользователь, сайт может пытаться получить конфиденциальную информацию от пользователя. Или, используя подобную стилизованную форму, попытайтесь злонамеренно захватить пользовательскую информацию таким образом.
Вот почему даже при наличии междоменной политики все еще существуют большие угрозы безопасности.
Повторный хостинг контента из того же домена
Случай повторного размещения контента с того же домена еще хуже.
Когда контент поступает из того же домена, ограничения безопасности по умолчанию отсутствуют. Встроенный контент может получить доступ ко всему загруженному DOM браузера и манипулировать всем.
Это имеет смысл, что контент в одном домене должен быть безопасным. Риск здесь главным образом связан с пользовательским контентом, который повторно размещается в IFRAME.
Подход с песочницей
Эти действительные проблемы безопасности долгое время не были должным образом рассмотрены органом по стандартизации. Без четкого стандарта W3C было необходимо каким-то образом защитить хост от содержимого в рамке. Например, Microsoft предоставила проприетарную реализацию защиты IFRAME в Internet Explorer 8. Другие взяли ее на вооружение и обсудили как основу для своих браузеров. Но стандарты значительно выросли со времен IE8.
Современные браузеры, включая Chrome, Firefox и IE10 Platform Preview.основаны на атрибуте песочницы IFrame W3C .
Вот что мы построим сегодня с песочницей. Смотрите демо здесь .
Давайте начнем с применения песочницы. Просто добавьте его как пустой атрибут в элемент IFRAME :
<iframe sandbox src="http://somewebsite.com/default.html"></iframe>
Это оно!
Теперь содержимое песочницы IFRAME повторно размещается в браузере со следующими ограничениями:
- Плагины отключены. Плагин ActiveX, Flash или Silverlight не будет выполняться.
- Формы отключены. Размещаемому контенту запрещается отправлять формы на любую цель.
- Скрипты отключены. JavaScript отключен и не будет выполняться.
- Ссылки на другие контексты просмотра отключены. Якорный тег, нацеленный на разные уровни браузера, не будет выполняться.
- Уникальное происхождение лечения. Весь контент обрабатывается с уникальным происхождением. Контент не может проходить через DOM или читать информацию cookie.
Это означает, что даже контент, поступающий из того же домена, обрабатывается междоменной политикой, поскольку каждый контент IFRAME будет рассматриваться как уникальный источник.
Встроенный контент разрешен только для отображения информации. Внутри IFRAME нельзя предпринимать никаких действий, которые могли бы поставить под угрозу хостинг веб-сайт или воспользоваться доверием пользователей.
Проверка атрибута песочницы
Мы знаем, что IFRAME — это открытые ворота. Мы знаем, что атрибут sandbox блокирует безопасность размещенного контента. Решение очевидно: используйте элементы IFRAME только с атрибутом sandbox!
Вы можете подтвердить, что браузер поддерживает атрибут песочницы IFRAME с помощью простой проверки в JavaScript:
if( "sandbox" in document.createElement( "IFRAME" ) ) {
// render the iframe element...
} else {
// embed content through other ways,
// as the browser does not support the sandbox
}
Если это поддерживается, просто используйте атрибут песочницы. Если нет, попробуйте внедрить контент другими способами или попросите пользователя отправить сообщение о том, что ему следует обновить его до современного браузера .
Настройка Песочницы
Есть случаи, когда вам понадобится некоторый уровень настройки ограничений, что абсолютно возможно.
Несколько значений атрибутов ослабляют стандартную политику песочницы:
Allow-формы
Если вы хотите включить отправку форм обратно в элемент IFRAME , вы просто указываете значение allow-forms для атрибута песочницы.
<iframe sandbox="allow-forms" src="xyz.html"></iframe>
Если это значение присутствует, встроенной странице разрешается отправлять обратно, используя форму отправки внутри фрейма.
Allow-скрипты
JavaScript является мощным языком и часто используется для динамического взаимодействия на стороне клиента без повторной отправки информации на сервер. Но эта сила также создает риски при повторном размещении иностранных веб-страниц. Поэтому вы должны тщательно продумать, действительно ли вы хотите включить JavaScript в сценариях IFRAME, особенно если контент из неизвестного источника.
Включение JavaScript выполняется через значение allow-scripts.
<iframe sandbox = «allow-scripts» src = «xyz.html»> </ iframe>
позволяют-же-происхождения
По умолчанию страница IFRAME из того же домена имеет возможность доступа к объектной модели документа родителя.
При наличии атрибута «песочница» страница будет обрабатываться как не принадлежащая одному источнику. Эта страница не имеет доступа к ресурсам, даже если они принадлежат одному домену.
Чтобы повторно включить обработку того же источника в изолированном сценарии, вы должны указать атрибут allow-same-origin .
<iframe sandbox="allow-same-origin" src="xyz.html"></iframe>
Само значение не очень полезно, так как вам нужны некоторые возможности сценария, чтобы использовать его.
Например, если вы хотите получить доступ к локальному хранилищу текущего домена следующим образом:
function loadFromStorage( key ) {
if( localStorage ) {
return localStorage.getItem( key );
}
});
… вам также нужно значение allow-scripts:
<iframe sandbox="allow-scripts allow-same-origin" src="xyz.html"></iframe>
Теперь доступ работает!
Но будьте осторожны: размещение нескольких скриптов в одной песочнице может привести к уязвимости в безопасности. Например, размещенный вами контент может манипулировать атрибутами песочницы и снимать дополнительные ограничения.
позволяют-топ-навигации
При использовании атрибута «песочница» привязка, нацеленная на другие контексты просмотра, по умолчанию игнорируется и не выполняется. Это защищает веб-сайт, на котором размещен контент IFRAME, от замены размещенного контента.
Например, эта ссылка не будет выполняться в изолированной программной среде по умолчанию, так как цель заменит всю веб-страницу:
<a href="xyz.html" target="_top">Click me</a>
Ослабление этой политики рекомендуется только в том случае, если вы доверяете содержанию, которое вы размещаете.
<iframe sandbox="allow-top-navigation" src="xyz.html"></iframe>
мс-позволяют-всплывающие окна
Иногда полезно, чтобы внедренный контент открывал новые всплывающие окна. Прекрасным примером является картографический сервис, такой как Bing Maps.
При встраивании карт Bing во всплывающих окнах можно найти дополнительные функции, такие как направление движения или сведения о пункте назначения. Но поскольку песочница запрещает это, в Internet Explorer 10 есть настройка, которая будет разрешать всплывающие окна без ущерба для песочницы.
Следующий код показывает, как настроить ms-allow-popups .
<iframe sandbox="ms-allow-popups" src="xyz.html"></iframe>
При установке этого значения встроенные сайты могут отображать информацию в новом окне.
<a href="xyz.html" target="_new">Show Info</a>
Собираем все вместе
Вы можете объединить несколько значений атрибутов в одной песочнице. Например, если вы хотите включить пост-возврат форм, навигацию верхнего уровня и JavaScript, просто укажите
<iframe sandbox = «allow-forms allow-top-navigation allow-scripts» src = «xyz.html»> </ iframe>
Также полезно знать, что песочница ведет себя правильно, когда используется в иерархических ситуациях , используя несколько вложенных IFRAMES с различными значениями атрибутов песочницы. Песочница высшего уровня всегда доминирует в иерархии.
Получить руки!
В этой демонстрации вы можете поиграть с песочницей HTML . И вы можете скачать копию этого демо с Github. Чтобы включить демонстрационную форму обратной реакции, просто откройте папку проекта в WebMatrix и запустите проект оттуда.
Затем загрузите современный браузер (например, Internet Explorer 10 Platform Preview ) и ознакомьтесь с песочницей, прочитав руководство для разработчика IE . Этот единственный атрибут — большой шаг к более безопасной сети … и современные браузеры наконец-то готовы к внедрению встроенного контента в песочницу.
Лицензия
Эта статья, наряду со всеми связанными исходным кодом и файлами, распространяется под лицензией The Code Project Open License (CPOL).
об авторе