Что такое изолированный iframe?

iframe в песочнице — это встроенный документ браузера с дополнительными ограничениями, налагаемыми iframe. песочница атрибут. С пустым песочница значение, браузер начинает с ограничительного базового уровня; индивидуальный разрешить-* токены возвращают только те возможности, которые необходимы встроенному контенту. Для предварительной версии HTML самый безопасный и полезный дизайн — не «доверять коду». Это «определить предварительный просмотр отдельной границей, добавить минимальные разрешения и не допускать попадания секретов в эксперимент».

Что меняется, когда iframe помещается в песочницу?

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

Добавление песочница просит браузер наложить дополнительный набор ограничений. WHATWG HTML Стандарт определяет атрибут как неупорядоченный набор токенов, разделенных пробелами. Отсутствие токена сохраняет соответствующее ограничение песочницы; добавление токена снимает определенное ограничение.

Это направление легко неверно истолковать:

```html

<iframe sandbox srcdoc="<p>Статический предварительный просмотр</p>"></iframe>

```

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

```html

<iframe

sandbox="allow-scripts разрешить-формы"

srcdoc="<button type='button'>Выполнить</button>">

</iframe>

```

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

Какие ограничения применяются по умолчанию?

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

Этот Ссылка на iframe MDN перечисляет текущие токены и объясняет, что восстанавливает каждый из них. Проверьте эту ссылку вместо копирования старого списка токенов в долгосрочный элемент управления безопасностью.

Что восстанавливают общие токены?

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

Некоторые токены взаимодействуют. Рассмотрение их по одному необходимо, но недостаточно. Происхождение документа в рамке, независимо от того, является ли оно исходный документ или удаленный URL-адрес, политика безопасности контента хоста и любой мост сообщений между фреймом и родительским элементом — все это влияет на границу.

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

Почему непрозрачное происхождение имеет значение?

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

Для встроенного исходный документ Предварительный просмотр показывает, что разделение имеет ценность. Предварительный просмотр может отображать документ, не рассматривая его как источник того же приложения, что и страница редактора. Он не может просто получить доступ к родительскому DOM или прочитать хранилище того же происхождения, как если бы это был другой компонент хоста.

Непрозрачное происхождение не означает «офлайн» или «сеть отключена». Если сценарии разрешены, код предварительного просмотра все равно может отправлять сетевые запросы, которые разрешены политикой браузера и местом назначения. Он может использовать процессор и память, манипулировать собственным DOM и взаимодействовать через каналы, которые хост намеренно предоставляет. Граница снижает авторитет; он не сертифицирует код.

MDN особенно предупреждает об объединении разрешить-скрипты и разрешить одно и то же происхождение когда внедренный контент имеет то же происхождение и может удалить собственный атрибут песочницы. Важный урок зависит от контекста: не восстанавливайте обе возможности только потому, что без них пример не работает.

Как предварительная версия ClockTools настраивает свою песочницу?

Живой ClockTools редактор HTML реального времени создает предварительный просмотр с помощью исходный документ. Когда JavaScript включен, его значение песочницы iframe равно:

разрешить-скрипты, разрешить-формы, разрешить-модальные окна

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

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

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

Что показала проверка работоспособности?

Я проверил визуализированный элемент предварительного просмотра в интерактивном рабочем пространстве ClockTools, а не полагался только на маркетинговый текст.

Заголовок iframe был «Живой предварительный просмотр HTML», что также дает вспомогательным технологиям метку цели для встроенного документа.

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

Какие комбинации токенов заслуживают особой осторожности?

Используйте проверку на основе угроз вместо универсального рецепта токена.

разрешить-скрипты плюс разрешить одно и то же происхождение

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

Формы плюс доступ к сети

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

Всплывающие окна и поведение побега

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

Верхняя навигация

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

Что не может защитить песочница?

Песочница — это один из механизмов браузера, а не полноценная платформа для вредоносного кода.

• Это не мешает пользователю открывать тот же контент непосредственно за пределами фрейма.
• Это не гарантирует, что разрешенные сценарии будут быстрыми, вежливыми или свободными от бесконечных циклов.
• Он не блокирует автоматически каждый сетевой запрос.
• Он не очищает HTML и не доказывает, что URL-адрес безопасен.
• Он не защищает секреты, уже размещенные в предварительном просмотре.
• Он не заменяет проверку реальных форм на стороне сервера.
• Он не проверяет доступность, семантику или кросс-браузерное поведение.
• Он не защищает другую службу, которая принимает запрос от предварительного просмотра.

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

Как следует разработать предварительный просмотр кода браузера?

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

Сохраняйте протокол сообщений родительского кадра узким. Проверьте отправителя, форму сообщения и разрешенные команды. Не принимайте произвольный код или инструкции по навигации через общее сообщение «выполнить», если только это не явно изолированный продукт, который вы собираетесь создать.

Предложите режим JavaScript-off для статической проверки. Добавьте элементы управления остановкой, сбросом или перезагрузкой для примеров выхода из-под контроля. Ошибки консоли Surface без зеркального отображения конфиденциальных родительских данных в фрейме. Считайте внешние таблицы стилей и сценарии сетевыми зависимостями, хосты и будущее содержимое которых находятся вне контроля редактора.

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