Словник веб-розробника

WAF (Web Application Firewall) — брандмауер прикладного рівня (L7), що аналізує HTTP-трафік і блокує шкідливі запити до того як вони дістануться застосунку. Захищає від SQL-ін'єкцій, XSS, CSRF, DDoS на рівні HTTP та інших атак із OWASP Top 10. Режими роботи Detection mode — логує підозрілі запити, але не блокує. Для початкового налаштування Prevention mode — активно блокує атаки Типи Network-based — апаратне рішення перед серверами Host-based — модуль на сервері (ModSecurity для Nginx/Apache) Cloud-based — Cloudflare WAF, AWS WAF, Fastly. Найпростіше підключити Обмеження WAF — не замінник безпечного коду, а додатковий шар захисту. False positives (блокування легітимних запитів) потребують тонкого налаштування правил.

Web Components — набір нативних браузерних API для створення власних HTML-елементів із інкапсульованою логікою і стилями. Без фреймворку, на чистому JavaScript. Три технології Custom Elements — реєстрація власного тегу: <my-button> Shadow DOM — ізольоване дерево DOM зі своїми стилями, що не витікають назовні HTML Templates — <template> та <slot> для вмісту Приклад class MyCard extends HTMLElement { connectedCallback() { const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = ` .card { border: 1px solid #ddd; padding: 16px; } `; } } customElements.define('my-card', MyCard); // Використання в HTML: // Контент тут Web Components vs React/Vue Web Components — нативний стандарт, без залежностей. React/Vue — бібліотеки з кращим DX і екосистемою. Можна комбінувати: Lit (Google) спрощує написання Web Components.

Webhook — механізм push-сповіщень між сервісами: замість того щоб постійно питати «чи є новини?» (polling), зовнішній сервіс сам надсилає HTTP POST-запит на вашу URL при виникненні події. Ефективніше і простіше, ніж polling.ПрикладиStripe надсилає payment.succeeded на ваш endpoint — ви активуєте підпискуGitHub надсилає push event — ваш CI запускає білдTelegram Bot API надсилає нове повідомлення на ваш webhook URLБезпекаЗовнішній сервіс підписує тіло запиту секретним ключем (HMAC-SHA256). Ваш обробник перевіряє підпис до виконання будь-яких дій — щоб переконатися, що запит прийшов справді від довіреного джерела, а не від зловмисника.НадійністьWebhook-обробник повинен відповідати швидко (200 OK) і ставити реальну роботу в чергу — інакше зовнішній сервіс може вважати доставку невдалою і повторити запит.

WebSocket — протокол повнодуплексного з'єднання між браузером і сервером поверх TCP. На відміну від HTTP, де клієнт завжди ініціює запит, WebSocket дозволяє серверу надсилати дані клієнту в будь-який момент — ідеально для чатів, онлайн-ігор і live-дашбордів.Як встановлюється з'єднанняПочинається як звичайний HTTP-запит з заголовком Upgrade: websocket. Сервер підтверджує апгрейд — і TCP-з'єднання залишається відкритим. Обидві сторони можуть надсилати повідомлення в будь-який час без накладних витрат нового HTTP-запиту.АльтернативиSSE (Server-Sent Events) — однобічний потік від сервера до клієнта, простіший у реалізаціїLong polling — клієнт чекає відповіді сервера, потім одразу робить новий запит. Старіший підхідСерверні бібліотекиNode.js: Socket.io, ws. PHP: Ratchet, Swoole, ReactPHP. Go: gorilla/websocket. Python: websockets, FastAPI WebSocket. Для продакшну часто використовують окремий WebSocket-сервер поряд з основним HTTP-застосунком.