🧐Как общаться между iframe и самой страницой?
Общение между
Метода
Доступа к
Передачи данных через
🛑'postMessage` – безопасный способ для разных доменов
Метод
🛑Передача данных из `iframe` в родительскую страницу
*Код в
Код в родительской странице (index.html)
🛑Передача данных из родителя в
Код в родительской странице (index.html)
Код в
🛑Доступ кокнами (
Если
Родительская страница →
🛑`localStorage` или
Можно сохранять данные в
Запись в
Чтение
Общение между
iframe и родительской страницей может происходить с помощью: Метода
postMessage (лучший способ) Доступа к
window.frames или window.parent (если тот же домен) Передачи данных через
localStorage или cookies 🛑'postMessage` – безопасный способ для разных доменов
Метод
window.postMessage() позволяет передавать сообщения между разными окнами (iframe, popup, другие вкладки) даже если они на разных доменах.🛑Передача данных из `iframe` в родительскую страницу
*Код в
iframe (child.html) // Отправляем сообщение родительскому окну
window.parent.postMessage({ type: "hello", data: "Привет, родитель!" }, "*");
Код в родительской странице (index.html)
window.addEventListener("message", (event) => {
console.log("Получено сообщение от iframe:", event.data);
});* в postMessage означает, что сообщение отправляется любому домену. Лучше указывать конкретный, например: window.parent.postMessage({ type: "hello" }, "https://example.com");🛑Передача данных из родителя в
ame (child Код в родительской странице (index.html)
const iframe = document.getElementById("myIframe");
// Ждём, когда iframe загрузится
iframe.onload = () => {
iframe.contentWindow.postMessage({ type: "greeting", data: "Привет, iframe!" }, "*");
};Код в
iframe (child.html) window.addEventListener("message", (event) => {
console.log("Получено сообщение от родителя:", event.data);
});🛑Доступ кокнами (
iframe, pи�Как общаться меж(только если тот же домен!) Если
iframe и основная страница находятся на одном домене, можно обращаться к их window напрямую.Родительская страница →
iframe const iframe = document.getElementById("myIframe");
// Получаем объект window внутриобщаться м
iframe.contentWindow.document.body.style.backgroundColor = "lightblue";
iframe → Родительская страница console.log(window.parent.document.title); // Доступ к заголовку страницы
🛑`localStorage` или
cookies (если оба окна на одном домене) Можно сохранять данные в
localStorage или cookies, а другая сторона будет их читать. Запись в
localStorage из iframe localStorage.setItem("message", "Привет от iframe!");Чтение
localStorage в родительской странице console.log(localStorage.getItem("message")); // "Привет от iframe!"💯3🔥2
Forwarded from Frontend | Вопросы собесов
Айтишники, это вам — в телеграм есть комьюнити по каждому направлению в IT
Там есть буквально всё: чаты для общения, тонны материала(книги, курсы, ресурсы и гайды), свежие новости и конечно же мемы
Выбирайте своё направление:
💩 Frontend 🐍 Python
🐧 Linux 👩💻 С/С++
👩💻 C# 🤔 Хакинг & ИБ
📱 GitHub 🖥 SQL
👩💻 Сисадмин 🤟 DevOps
⚙️ Backend 🖥 Data Science
🧑💻 Java 🐞 Тестирование
🖥 PM / PdM 👩💻 GameDev
🧑💻 Golang 🤵♂️ IT-Митапы
🧑💻 PHP 💻 WebDev
🖥 Моб. Dev 🖥 Анали.(SA&BA)
👩💻 Дизайн 🖥 Нейросети
💛 1C 🤓 Книги IT
➡️ Сохраняйте в закладки
Там есть буквально всё: чаты для общения, тонны материала(книги, курсы, ресурсы и гайды), свежие новости и конечно же мемы
Выбирайте своё направление:
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7💯2
🧐Как можно гибко изменять размеры flex-элементов?
С помощью:
- flex-grow — распределение свободного пространства;
- flex-shrink — сжатие при нехватке места;
- flex-basis — базовая ширина перед распределением;
- или flex — сокращённой записи всех трёх параметров.
С помощью:
- flex-grow — распределение свободного пространства;
- flex-shrink — сжатие при нехватке места;
- flex-basis — базовая ширина перед распределением;
- или flex — сокращённой записи всех трёх параметров.
🔥4⚡2💯1🆒1
🧐В чём разница между системами, приближёнными к реальному времени, и системами реального времени на производстве?
- Системы реального времени (hard real-time) — критично соблюдают сроки отклика, любое опоздание недопустимо (например, в авиации, медицине, автоматике).
- Приближённые к реальному времени (soft real-time) — желательно быстрое выполнение, но небольшие задержки допустимы (например, стриминг видео, веб-приложения).
- Системы реального времени (hard real-time) — критично соблюдают сроки отклика, любое опоздание недопустимо (например, в авиации, медицине, автоматике).
- Приближённые к реальному времени (soft real-time) — желательно быстрое выполнение, но небольшие задержки допустимы (например, стриминг видео, веб-приложения).
🔥5💯2🆒1
🧐 Что такое хук?
Хук — это функция в React, которая позволяет использовать состояние и другие возможности React в функциональных компонентах (например, useState, useEffect).
💯5🔥3⚡1🆒1
Forwarded from Frontend | Вопросы собесов
Вот отсортированная база с тонной материала (постепенно пополняется):
(363 видео, 87 книги) — Python
(415 видео, 68 книги) — Frontend
(143 видео, 33 книги) — ИБ/Хакинг
(352 видео, 89 книги) — С/С++/C#
(343 видео, 87 книги) — Java/QA
(176 видео, 32 книги) — Git/Linux
(174 видео, 91 книги) — DevOps
(167 видео, 53 книги) — PHP/1С
(227 видео, 83 книги) — SQL/БД
(114 видео, 77 книги) — Сисадмин
(107 видео, 43 книги) — BA/SA
(181 видео, 32 книги) — Go/Rust
(167 видео, 43 книги) — Kotlin/Swift
(112 видео, 24 книги) — Flutter
(137 видео, 93 книги) — DS/ML
(113 видео, 82 книги) — GameDev
(183 видео, 37 книги) — Дизайн
(136 видео, 33 книги) — PM/HR
Скачивать ничего не нужно — все выложили в Telegram
Please open Telegram to view this post
VIEW IN TELEGRAM
💯6🆒4⚡1🔥1
🎓Напоминалка для работы с DOM!
DOM — это то, через что JavaScript управляет HTML: ищет элементы, создаёт новые узлы, вешает события и реагирует на действия пользователя.
На картинке — базовые методы
Сохрани, чтобы не забыть!
DOM — это то, через что JavaScript управляет HTML: ищет элементы, создаёт новые узлы, вешает события и реагирует на действия пользователя.
На картинке — базовые методы
document и node, а также самые часто используемые события мыши, клавиатуры и форм.Сохрани, чтобы не забыть!
💯5⚡2🆒2🔥1
🚀 New Full Stack Project
I built this website by myself, handling both frontend and backend.
🔹 Frontend: React
🔹 Backend: Node.js
🔹 Additional features and integrations
This project helped me improve my full stack development skills and working with real-world functionality.
Live demo:
👉 click for see
I built this website by myself, handling both frontend and backend.
🔹 Frontend: React
🔹 Backend: Node.js
🔹 Additional features and integrations
This project helped me improve my full stack development skills and working with real-world functionality.
Live demo:
👉 click for see
💯5🔥2🆒1
🧐Какие семантические группы есть?
В HTML есть теги, которые несут семантическое значение, то есть описывают смысл содержимого, а не просто визуальное оформление.
Примеры групп:
- Структура страницы: <header>, <main>, <footer>, <section>, <article>, <aside>, <nav>
- Контент: <p>, <h1>–<h6>, <blockquote>, <figure>
- Формы и элементы управления: <form>, <input>, <button>, <label>
- Таблицы и списки: <ul>, <ol>, <table>, <thead>, <tbody>
Семантика помогает поисковикам, скринридерам и поддерживает доступность.
Примеры групп:
- Структура страницы: <header>, <main>, <footer>, <section>, <article>, <aside>, <nav>
- Контент: <p>, <h1>–<h6>, <blockquote>, <figure>
- Формы и элементы управления: <form>, <input>, <button>, <label>
- Таблицы и списки: <ul>, <ol>, <table>, <thead>, <tbody>
Семантика помогает поисковикам, скринридерам и поддерживает доступность.
⚡3💯2🆒2🔥1
🎓В каких случаях перерисовывается компонент?
Компонент React перерисовывается, если:
- Изменился его state.
- Пришли новые props.
- Изменилась его родительская структура.
- Используется forceUpdate() (в классовом компоненте). Также useEffect, useMemo, memo и другие хуки влияют на контроль рендеринга.
Компонент React перерисовывается, если:
- Изменился его state.
- Пришли новые props.
- Изменилась его родительская структура.
- Используется forceUpdate() (в классовом компоненте). Также useEffect, useMemo, memo и другие хуки влияют на контроль рендеринга.
⚡3🔥3💯2🆒1
🎓 В чём отличия props от состояния (state)?
- Props — это входные данные, которые компонент получает от родителя. Они неизменяемы внутри компонента. Используются для передачи информации "сверху вниз".
- State — это локальные данные компонента. Компонент может их менять, и изменения вызывают перерисовку.
Props — это внешний контроль, state — внутреннее состояние.
- Props — это входные данные, которые компонент получает от родителя. Они неизменяемы внутри компонента. Используются для передачи информации "сверху вниз".
- State — это локальные данные компонента. Компонент может их менять, и изменения вызывают перерисовку.
Props — это внешний контроль, state — внутреннее состояние.
💯4⚡2🆒2🔥1
Когда в марте 2024 года Андрес Фройнд, контрибьютор ядра Linux и инженер Microsoft, разбирался с медленными SSH-логинами на своей Debian-машине, он заметил странность:
Атакующий под именем “Jia Tan” в течение двух лет постепенно внедрялся в небольшой проект XZ Utils – библиотеку сжатия, которая используется практически во всех крупных Linux-дистрибутивах.
Бэкдор находился не в исходниках. Он был зарыт глубоко в build-скриптах. Если бы была использована специально сформированная SSH-ключевая пара, атакующий получил бы удалённый root-доступ к миллионам серверов.
Фройнд обнаружил это за считаные дни до того, как заражённая версия ушла бы в Debian, Fedora, Ubuntu и другие дистрибутивы
Один человек, одна аномалия, один обычный сеанс дебага – и потенциальная катастрофа для интернета была предотвращена
Респект 🫡
@linuxos_tg
liblzma (часть XZ Utils) жрала подозрительно много CPU, и он продолжил копать. В итоге он вскрыл многоходовую supply-chain-атаку, которая готовилась несколько лет.Атакующий под именем “Jia Tan” в течение двух лет постепенно внедрялся в небольшой проект XZ Utils – библиотеку сжатия, которая используется практически во всех крупных Linux-дистрибутивах.
Бэкдор находился не в исходниках. Он был зарыт глубоко в build-скриптах. Если бы была использована специально сформированная SSH-ключевая пара, атакующий получил бы удалённый root-доступ к миллионам серверов.
Фройнд обнаружил это за считаные дни до того, как заражённая версия ушла бы в Debian, Fedora, Ubuntu и другие дистрибутивы
Один человек, одна аномалия, один обычный сеанс дебага – и потенциальная катастрофа для интернета была предотвращена
Респект 🫡
@linuxos_tg
💯3🔥1
LinkedIn - lets connect♦️
https://www.linkedin.com/in/abror-bakhromovv-b32592403?utm_source=share_via&utm_content=profile&utm_medium=member_ios
https://www.linkedin.com/in/abror-bakhromovv-b32592403?utm_source=share_via&utm_content=profile&utm_medium=member_ios
🔥4💯1🆒1
Active Directory: проектирование, развертывание и защита, 3-е издание. 2026
Дишан Фрэнсис
Книга подробно разбирает архитектуру Active Directory и принципы построения корпоративной инфраструктуры идентификации. Рассматриваются вопросы проектирования доменов, управления пользователями и ролями, а также внедрения современных механизмов аутентификации. Отдельное внимание уделено обновлениям Windows Server 2022 и практикам повышения безопасности.
Автор показывает, как выстраивать гибридные среды с Azure AD, защищать учетные записи и контролировать доступ в распределённых системах. Описаны подходы к обнаружению угроз, настройке политик безопасности и устранению типовых проблем в инфраструктуре. Книга подойдёт системным администраторам, которые работают с Active Directory и хотят глубже разобраться в её безопасности и управлении.
☑️ Скачать бесплатно
Хакер | Red Team 🧸 @Red_Team_hacker
Дишан Фрэнсис
Книга подробно разбирает архитектуру Active Directory и принципы построения корпоративной инфраструктуры идентификации. Рассматриваются вопросы проектирования доменов, управления пользователями и ролями, а также внедрения современных механизмов аутентификации. Отдельное внимание уделено обновлениям Windows Server 2022 и практикам повышения безопасности.
Автор показывает, как выстраивать гибридные среды с Azure AD, защищать учетные записи и контролировать доступ в распределённых системах. Описаны подходы к обнаружению угроз, настройке политик безопасности и устранению типовых проблем в инфраструктуре. Книга подойдёт системным администраторам, которые работают с Active Directory и хотят глубже разобраться в её безопасности и управлении.
☑️ Скачать бесплатно
Хакер | Red Team 🧸 @Red_Team_hacker
🔥2💯2🆒1
Linux-инсайт: shell - это просто обычная программа
Ваш терминал не разговаривает с ядром напрямую магическим языком. Shell - это обычная userspace-программа. Просто таких программ целое семейство:
С точки зрения ядра все они делают примерно одну и ту же работу:
- читают байты из file descriptor
- парсят их как командный язык
- вызывают
- вызывают
- запускают другие программы
Разница почти вся живёт в userspace: какой синтаксис shell принимает, насколько он удобен в интерактивной работе, насколько строго следует POSIX и какие расширения добавляет сверху.
POSIX описывает shell-язык, который часто называют просто
Поэтому
Небольшой сюрприз: в Debian и Ubuntu
может вести себя не так, как вы ожидаете, если вы писали его «как bash-скрипт».
Проверьте у себя:
И вы увидите, какой shell реально стоит за /bin/sh на вашей машине.
Ваш терминал не разговаривает с ядром напрямую магическим языком. Shell - это обычная userspace-программа. Просто таких программ целое семейство:
bash, zsh, fish, dash, ksh, ash, встроенный shell из BusyBox.С точки зрения ядра все они делают примерно одну и ту же работу:
- читают байты из file descriptor
- парсят их как командный язык
- вызывают
fork- вызывают
exec- запускают другие программы
Разница почти вся живёт в userspace: какой синтаксис shell принимает, насколько он удобен в интерактивной работе, насколько строго следует POSIX и какие расширения добавляет сверху.
POSIX описывает shell-язык, который часто называют просто
sh. Большинство shell реализуют его как базу, а потом добавляют свои фичи.Поэтому
bash и dash - это не «разные терминалы». Это разные реализации одной идеи.Небольшой сюрприз: в Debian и Ubuntu
/bin/sh обычно не bash, а dash. Он проще, меньше и стартует быстрее. Поэтому скрипт с первой строкой:
#!/bin/sh
может вести себя не так, как вы ожидаете, если вы писали его «как bash-скрипт».
Проверьте у себя:
readlink -f /bin/sh
И вы увидите, какой shell реально стоит за /bin/sh на вашей машине.
⚡2💯2