Browsing context в веб: WindowProxy, iframes, безопасность

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Browsing context – это как отдельная комната для каждой вкладки или iframe в браузере 🚪. Она гарантирует, что ваши сайты не "подсматривают" друг за другом, поддерживая безопасность и изоляцию 🛡️.

Эта "комната" решает проблему изоляции: код на одной вкладке не может влиять или просматривать код на другой. Это как иметь отдельные квартиры для каждого сайта, где они не могут беспокоить соседей или воровать у них. 🏠➡️🏠

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

Пример

Представьте, что вы открыли в своем браузере несколько вкладок: одна с видео на YouTube, другая с почтой, а третья – с социальной сетью. Каждая из этих вкладок – это отдельный "browsing context". Это значит, что каждая вкладка работает независимо от других. Если вы закроете вкладку с почтой, это не повлияет на воспроизведение видео на YouTube или вашу активность в социальной сети.

👉 Пример с iframe:

Представим, что вы создаете веб-страницу для своего блога и хотите встроить на нее карту Google Maps. Вы используете iframe для этого:

HTML

Скопировать код

<!DOCTYPE html>
<html>
<head>
    <title>Мой блог</title>
</head>
<body>
    <h1>Добро пожаловать в мой блог!</h1>
    <p>Здесь я делюсь своими мыслями и идеями.</p>
    <h2>Где меня найти:</h2>
    <!-- Встраиваем карту с помощью iframe -->
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d243647.3165825472!2d-74.0059413!3d40.7127753!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1590244512624!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</body>
</html>

В этом случае, iframe с картой Google Maps создает свой собственный "browsing context" внутри вашей веб-страницы. Это означает, что карта работает независимо от остального содержимого вашей страницы. Вы можете взаимодействовать с картой (приближать, отдалять, перемещаться по ней), и это не будет влиять на содержимое вашего блога.

Таким образом, "browsing context" позволяет изолировать разные части веб-страницы друг от друга, обеспечивая независимость и безопасность взаимодействия с различным контентом.

Основы изоляции и безопасности в вебе

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

WindowProxy: страж безопасности

WindowProxy играет роль стража между разными "комнатами" веба. Этот объект действует как прокси, позволяя взаимодействовать с объектами Window разных контекстов просмотра, но при этом сохраняя строгие границы безопасности. WindowProxy и безопасность – это о том, как веб-разработчики могут манипулировать контекстами, не нарушая принципы изоляции и безопасности.

Как контексты общаются: iframes и вкладки

Взаимодействие между разными контекстами просмотра – это как общение между разными комнатами через звукоизолированные стены. Работа с iframes и вкладками требует знания о том, как эти "стены" можно безопасно преодолеть. BroadcastChannel – это один из инструментов, позволяющих "комнатам" обмениваться сообщениями, оставаясь при этом независимыми и безопасными.

Цикл событий: сердце каждого контекста

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

Практические советы для безопасной работы

В заключительной части статьи давайте рассмотрим практические примеры использования browsing context в реальных проектах. Вот несколько советов и рекомендаций:

Используйте iframe с осторожностью: Встраивание контента через iframe может быть полезным, но всегда убеждайтесь, что вы делаете это безопасно, используя атрибуты sandbox для ограничения возможностей встроенного контента.
Ограничьте доступ между вкладками: Если ваше приложение открывает новые вкладки или окна, используйте rel="noopener" для тега <a>, чтобы предотвратить доступ новой вкладки к объекту window.opener родительской вкладки.
Используйте BroadcastChannel с умом: Этот API может быть мощным инструментом для общения между контекстами с одинаковым источником, но помните о безопасности и не передавайте чувствительные данные.

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