Полная интерпретация характеристик IFRAME

предисловие

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

<iframe src='https://blog.5udou.cn'>

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

Весь приведенный ниже код можно найти здесь:GitHub.com/Лин Сяову66…

Особенности фреймов

Все характеристики iframe реализуются конфигурацией параметров.Теперь отсортированы следующие полезные свойства:

Атрибуты	объяснять	Примечание
allow	Можно указать для iframeПолитика функций
allowfullscreen	Разрешить ли iframe вызывать метод requestFullscreen() для активации полноэкранного режима, это свойство эквивалентно следующей конфигурации свойства allow:`allow="fullscreen"`
allowpaymentrequest	Разрешить ли междоменный вызов iframeAPI запроса платежа
csp	Встроенные ресурсы применяют политику одного источника
height	Высота iframe, по умолчанию 150px.
importance	Идентифицирует приоритет загрузки ресурса, указанного в атрибуте iframe src, с`auto`/`high`/`low`три уровня
name	Целевое имя встроенного содержимого просмотра
referrerpolicy	Указывает реферер, который переносится при получении ресурсов фрейма, по умолчанию`no-referrer-when-downgrade`, то есть информация Referrer не отправляется только при понижении версии протокола (например, при импорте HTTP-ресурсов HTTPS-страницами, переходе со HTTPS-страниц на HTTP и т. д.). Это правило используется большинством браузеров по умолчанию;
sandbox	Примените дополнительные ограничения к содержимому фрейма, поля которого подробно описаны ниже.

Подробное объяснение разрешающего атрибута iframe

Использование атрибута allow требует ссылкиПолитика функцийэта секция.特性策略可以允许你控制页面或者iframe可以使用哪些特性。页面控制的话设置在HTTP头部的Feature-Policy的这个字段，iframe的话就是我们要说的这个allow字段。

Правила написания политики функций:<feature name> <allowlist of origin(s)>

Полная ссылка на название функции:Policy Controlled FeaturesилиFeature-Policy

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

*: указывает, что эта функция разрешена в этом документе, включая все вложенное содержимое браузера (iframes), независимо от источника этого содержимого.
self: указывает, что эта функция разрешена в этом документе и доступна только для вложенного содержимого браузера (iframe) с тем же источником.
src: (специально для атрибута allow iframes) Указывает, что эта функция разрешена в этом iframe, если источник загруженного документа и источник iframesrcURL-адрес, указанный атрибутом, имеет то же происхождение.
none: указывает, что функция отключена на верхнем уровне и во вложенном содержимом браузера.
<origin(s)>: указывает, что эта функция разрешена только для некоторых указанных источников, а несколько источников разделены пробелами.

Сегодня мы в основном говорим об атрибуте allow под iframe. Например, вы не разрешаете странице iframe быть полноэкранной, и вам не разрешено вызывать камеру. Можно настроить так:

<iframe allow="camera 'none'; fullscreen 'none'">

Например, только тот же источник может использовать полноэкранный режим:

<iframe src="https://example.com..." allow="fullscreen 'src'"></iframe>

Например, только указанный источник может использовать функцию позиционирования:

<iframe src="https://google-developers.appspot.com/demos/..." allow="geolocation https://google-developers.appspot.com"></iframe>

Подробное объяснение атрибута referrerpolicy iframe

Этот атрибут включает стратегию реферера HTTP, Мы знаем, что стратегия реферера выглядит следующим образом:

No Referrer: ни при каких обстоятельствах не отправляйте информацию о Referrer;
No Referrer When Downgrade: информация No Referrer отправляется только в случае понижения версии протокола (например, страницы HTTPS, импортирующие ресурсы HTTP, переход со страниц HTTPS на HTTP и т. д.). Это правило используется большинством браузеров по умолчанию;
Только источник: отправьте реферер, который содержит только часть хоста. Когда это правило включено, независимо от того, понижен протокол или нет, является ли это ссылкой на этом сайте или внешней ссылкой, информация Referrer будет отправлена, но только часть протокола + хоста (не включая конкретную часть). путь и параметры и другая информация);
Происхождение при перекрестном происхождении: Referrer, содержащий только хост, отправляется только тогда, когда происходит междоменный доступ, и он все еще не поврежден в том же домене. Разница между ним и Origin Only заключается в том, что он оценивает, является ли он кросс-происхождением. Следует отметить, что протокол, доменное имя и порт все одинаковые, что будет рассматриваться браузером как один и тот же домен;
Небезопасный URL-адрес: независимо от того, был ли протокол понижен или нет, является ли это ссылкой на этом сайте или за его пределами, вся информация о реферере будет отправлена. Как следует из названия, это самая свободная и наименее безопасная политика;

Например, мы настраиваем это так:

<iframe allow="fullscreen 'none'" referrerpolicy="no-referrer" src='http://127.0.0.1:3000/iframe.html'></iframe>

Мы можем видеть, что соответствующий запрос выглядит так, перехватив пакет:

Подробное объяснение атрибута песочницы iframe

Режим песочницы iframe может предоставить некоторую дополнительную настройку.Когда вы устанавливаете iframe в качестве песочницы, это означает, что поведение содержимого в песочнице полностью контролируется вами.

Например, если вы настроите его так под iframe:

<iframe sandbox="" src='http://127.0.0.1:3000/iframe1.html'></iframe>

Однако в iframe1.html есть соответствующий js-скрипт, так что вы можете увидеть эту ошибку в консоли:

Blocked script execution in 'http://127.0.0.1:3000/iframe1.html' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

Поэтому, когда у вашего iframe есть скрипт, он в основном будет настроенallow-scriptsэто свойство.

Другой пример, когда на вашей странице будет тег формы для отправки данных, если нетallow-forms, об этой ошибке будет сообщено:

Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.

Далее объясните значение каждой конфигурации:

Атрибуты	объяснять
allow-forms	Разрешить ресурсам отправлять формы
allow-modals	Разрешить ресурсам открывать модальные окна, такие как window.alert(), window.confirm(), window.print(), window.prompt()
allow-orientation-lock	Разрешить ресурсам блокировать ориентацию экрана
allow-pointer-lock	разрешить использование ресурсовPointer Lock API
allow-popups	Разрешить всплывающие окна (такие как window.open(), target="_blank" или showModalDialog()), если это ключевое слово отсутствует, всплывающее окно просто не откроется.
allow-popups-to-escape-sandbox	Позволяет документам в песочнице открывать новые окна, которым не нужно наследовать режим песочницы.
allow-presentation	Позволяет встраивающему устройству контролировать, разрешает ли iframe сеанс презентации.
allow-same-origin	Позволяет рассматривать содержимое как нормальное происхождение. Если это ключевое слово не используется, встроенный контент будет рассматриваться как отдельный источник.
allow-scripts	Разрешить встроенным контекстам просмотра запускать скрипты (но не создавать всплывающие окна)
allow-top-navigation	Контексты, которые позволяют встроенным страницам перемещаться (загружать) содержимое в контекст просмотра верхнего уровня. Если это ключевое слово не используется, эта операция будет недоступна
allow-storage-access-by-user-activation	Разрешить запросы встроенных страницStorage Access APIИспользуйте объем хранилища родительской страницы
allow-top-navigation-by-user-activation	Контексты, которые позволяют встроенным страницам перемещаться (загружать) содержимое в контекст просмотра верхнего уровня, но могут быть инициированы только активными жестами пользователя.

Примечания к режиму песочницы

Если встроенный документ имеет то же происхождение, что и главная страница, настоятельно не рекомендуется использовать обаallow-scriptsа такжеallow-same-origin, В противном случае это позволит внедрить документ, удалив кодsandboxАтрибуты. Хотя вы можете сделать это, это не так безопасно, как без использования песочницы.
Если злоумышленник может отобразить потенциально вредоносное содержимое внутри изолированного iframe пользователя, безопасность изолированной программной среды больше не является надежной. Такой контент рекомендуется размещать на отдельном выделенном домене, чтобы уменьшить возможные потери.
Свойство песочницы (sandbox) не поддерживается в Internet Explorer 9 и более ранних версиях.

После приведенного выше объяснения вы должны знать ответ на вопрос в начале, верно?

Tips

window.frames

Свойство frameworks — это объект, подобный массиву; поскольку frameworks на самом деле является псевдонимом для объекта window, а свойство framework доступно для обхода, это объект, подобный массиву:window.frames.length === window.length;

Каждый из атрибутов кадров - это окно в рамке, то есть окно объекта внутри кадра; каждый из свойств кадров не является узлом DOM IFrame!frames[0].frameElement

Если iframe находится в режиме песочницы и не установленallow-same-origin, то хотя вы можете получить доступ к window.frames с длиной 2, будет такая ошибка, когда вы получите window.frames[1].location:

DOMException: Blocked a frame with origin "http://127.0.0.1:3000" from accessing a cross-origin frame

настроенallow-same-originкогда:

нет конфигурацииallow-same-originкогда:

window.top: окно верхнего уровня, то есть окно верхнего уровня
window.parent: родительское окно, если у окна нет родительского окна, его родительское свойство является ссылкой на себя;
window.self: текущее окно, то есть ссылка на себя;

Ссылаться на

iframe