Клиенты также сообщают, что встроенная сторонняя страница недоступна в обычном режиме!
Приходите и узнайте об знаниях, связанных с IFrame, и получите Iframe в одном.
что такое айфрейм?
iframe — это HTML-тег.
<iframe></iframe>
Некоторые свойства тега iframe:
| Атрибуты | эффект |
|---|---|
| frameborder | показывать ли границу |
| width | ширина |
| height | высоко |
| name | имя |
| src | URL-адрес целевого веб-сайта для отображения в iframe |
| scrolling | показывать ли полосу прокрутки |
| sandbox | ограничения безопасности |
Опция песочницы используется контекстом верхнего уровня для управления безопасностью iframe.Элементы конфигурации:
| элемент конфигурации | эффект |
|---|---|
| allow-scripts | Разрешить запуск скриптов |
| allow-downlods | разрешить загрузку |
| allow-same-origin | Разрешить запросы того же происхождения: ajax |
| allow-top-navigation | Разрешить навигацию с использованием контекста верхнего уровня: window.top |
| allow-popups | Разрешить появление новых окон из фреймов: window.open |
| allow-forms | Разрешить отправку формы формы |
Для получения дополнительных параметров нажмитеПосмотреть здесь
Что могут фреймы?
Роль тега iframe заключается в том, чтобы вкладывать документы в документы или вкладывать веб-страницы в веб-страницы. Например:
Вложить страницу B внутрь страницы A
Страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>page A</title>
</head>
<body>
<p>这是a页面</p>
<!-- 在A页面中使用iframe内嵌了B页面 -->
<iframe src="./b.html"></iframe>
</body>
</html>
Страница Б
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>page B</title>
</head>
<body>
<p>这是b页面</p>
</body>
</html>
Страница B встроена в страницу A
Откройте страницу А и посмотрите
Вложение прошло успешно, разве это не приятно? Таким образом, мы можем напрямую повторно использовать функции веб-сайта B.
Попробуйте вложить Baidu на страницу A
Далее мы пытаемся вложитьБайдустраница Измените src iframe:
<iframe src="https://www.baidu.com"></iframe>
Снова откройте страницу А и посмотрите:
Что случилось с OOXX, почему нельзя разрешить вложенность?
Присмотревшись к ошибке, можно обнаружить две проблемы:
-
Ваш браузер запрещает использование сторонних файлов cookie. Baidu, вложенный в страницу A, не может использовать файл cookie Baidu, сохраненный в браузере. Браузер не устанавливает cookie-файл SameSite по умолчанию. Значением SameSite по умолчанию является Lax, и через сайт передается только cookie-файл с Same-Site=None и Secure (то есть протокол https). Атрибут sameSite файла cookie имеет следующие параметры:
SameSite option Strict Сторонние файлы cookie строго запрещены Lax Отправляется только для получения запросов None Файлы cookie могут быть отправлены только по протоколу HTTPS и должны иметь поле «Безопасный». Дополнительные сведения о спецификации хрома могут открыть хромДокумент 1,Документ 2К пониманию
-
целевой сайтwww.baidu.comУстановите X-Frame-Options на тот же источник Свойство X-Frame-Options — это поле, установленное веб-сайтом в заголовке ответа, которое имеет следующие параметры:
| X-Frame-Options | option |
|---|---|
| deny | Он отказался быть вложенным |
| sameOrigin | Разрешает вложение сайтов с одним и тем же доменным именем |
| allow-from example.com/ | Разрешает вложение сайтов с указанным доменным именем |
Оказывается, Baidu ограничил источник веб-сайта, отклонив все веб-сайты с разными доменами для его вложения. Как настроить это поле в nginx, см.MDN. Ограничение ссылок iframe может эффективно избежать многих угроз безопасности из источника, таких как кликджекинг, которого можно избежать напрямую.
Не на всех сайтах есть ограничения на цитирование, такие как Лепестки (www.huaban.com), Meituan (https://www.meitua…
Говорить о стратегиях доставки файлов cookie и ограничениях ссылок кажется еще далеко, но эти функции продолжают влиять на разработку iframe.
Преимущества фреймов
-
разрешать междоменные Вложение iframe поддерживает метод postMessage, что позволяет избежать междоменных проблем.здесьПросмотр конкретного использования postMessage
-
Функция мультиплексирования Избегайте дублирования функций
-
загрузить объявление Рекламные страницы и страницы верхнего уровня, как правило, не предполагают межстраничную коммуникацию, и очень подходят только функции вложенности.
-
природная песочница Реализована изоляция css и изоляция js, и есть место в практике микро-интерфейса.
Недостатки iframe
- Стили страниц несовместимы
Стили и стили страницы верхнего уровня и встроенной страницы сильно отличаются, страница не выглядит красиво, нет ощущения единства проекта, а пользовательский опыт деградирует. - Блокировать событие загрузки страницы верхнего уровня
После загрузки встроенной страницы загружается главная страница. - Общий пул соединений
Страница верхнего уровня и страница внутреннего слоя делят пул подключений.Под хромом одновременно можно отправить только 6 HTTP-запросов.Встраивание iframe повлияет на загрузку ресурсов главной страницы.
tips
-
Могут ли веб-страницы https вкладывать веб-страницы http? Нет, это вызовет следующую ошибку
Mixed Content: The page at 'www.a.com' was loaded over HTTPS, but requested an insecure frame 'www.b.com'. This request has been blocked; the content must be served over HTTPS.
-
Chrome предоставляет возможность вручную установить поддержку https jump http
chrome://flags/#cookies-без-того же-сайта-должен-быть-защищен Это использование не рекомендуется из соображений безопасности. Решение: сделайте так, чтобы страница перехода поддерживала https. -
Chrome предоставляет возможность вручную настроить поддержку https-сайтов для загрузки http-контента.
chrome://flags/#treat-unsafe-downloads-as-active-content Это использование не рекомендуется из соображений безопасности. Решение. Сделайте так, чтобы служба ресурсов загрузки поддерживала https. -
Chrome предоставляет возможность вручную настроить автоматическое сохранение сторонних файлов cookie.
chrome://flags/#тот же-сайт-по-умолчанию-куки Это использование не рекомендуется из соображений безопасности. -
Что такое кликджекинг
В первые годы метод атаки хакеров заключался в использовании перехвата кликов для встраивания банковской страницы в фишинговый веб-сайт. банковская страница. .
Суммировать
По мере повышения осведомленности людей о защите личной информации различные производители браузеров уделяют больше внимания защите конфиденциальности пользователей. Например, Google каждый год нужно платить огромные штрафы за нарушение конфиденциальности пользователей, поэтому ограничения доступа Chrome к файлам cookie становятся все более строгими. Браузеры более строго контролируют файлы cookie, что, несомненно, оказывает большое влияние на фреймы. Представьте себе, что в ближайшем будущем браузеры полностью запретят сторонние куки-файлы, а междоменные вложенные веб-сайты iframe не могут содержать куки-файлы, поэтому вложенное сотрудничество многих компаний может оказаться невозможным.
Если есть какие-либо недостающие пункты, добро пожаловать, чтобы оставить сообщение в области комментариев! Эта лекция по iframe распространяется на файлы cookie и безопасность браузера. Позже Мисс напишет отдельную статью о веб-безопасности и CSP, обратит внимание на Мисс и будет учиться вместе.