Атрибут sandbox тега <iframe>
Описание
Атрибут sandbox применяет набор ограничений безопасности к содержимому элемента <iframe>, изолируя его от основного документа. Это мощный инструмент для безопасного встраивания ненадежного контента.
<iframe
src="https://external-widget.com"
sandbox="allow-scripts allow-same-origin"
width="400"
height="300">
</iframe>
Основные флаги разрешений:
| Флаг | Разрешение | Когда использовать |
|---|---|---|
allow-forms |
Разрешить отправку форм | Для iframe с формами входа/регистрации |
allow-scripts |
Разрешить выполнение JavaScript | Для интерактивных виджетов |
allow-same-origin |
Разрешить доступ к cookies/хранилищу того же origin | Для доверенных внутренних iframe |
allow-popups |
Разрешить всплывающие окна | Для виджетов с внешними ссылками |
allow-modals |
Разрешить alert/confirm/prompt | Для отладки или специальных случаев |
Типовые комбинации:
<!-- Максимальная защита -->
<iframe sandbox src="untrusted.html"></iframe>
<!-- Для интерактивных виджетов -->
<iframe sandbox="allow-scripts allow-popups" src="widget.html"></iframe>
<!-- Для форм авторизации -->
<iframe sandbox="allow-forms allow-same-origin" src="login.html"></iframe>
Рекомендации по безопасности:
- Всегда используйте sandbox для ненадежного контента
- Давайте минимально необходимые разрешения
- Избегайте
allow-same-originдля сторонних ресурсов - Комбинируйте с CSP для дополнительной защиты
Проверка ограничений:
<iframe id="testFrame" sandbox="allow-scripts" src="about:blank"></iframe>
<script>
const frame = document.getElementById('testFrame');
try {
frame.contentDocument.write('Тест ограничений');
console.log('Запись разрешена');
} catch (e) {
console.log('Sandbox блокирует:', e.message);
}
</script>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- В IE10+ поддерживается частично
- Некоторые флаги (pointer-lock) имеют ограниченную поддержку
- Не влияет на загрузку ресурсов (используйте CSP)
Примечание: Атрибут sandbox — важнейший инструмент безопасности для работы с iframe. Для максимальной защиты комбинируйте его с Content Security Policy (CSP) и другими мерами безопасности веб-приложений.