React Безпека & Найкращі Практики
Запобігання XSS, захист від CSRF, dangerouslySetInnerHTML, Content Security Policy, HTTPS, санітизація
1Що таке XSS (Cross-Site Scripting) атака?
Що таке XSS (Cross-Site Scripting) атака?
Відповідь
Атака XSS полягає у впровадженні шкідливого JavaScript-коду у веб-застосунок для виконання його у браузерах інших користувачів. Зловмисник використовує вразливості валідації або екранування, щоб вкрасти cookies, токени сесій або виконати несанкціоновані дії. React забезпечує нативний захист, автоматично екрануючи значення JSX, але вразливості залишаються при використанні dangerouslySetInnerHTML або прямій маніпуляції DOM.
2Як React захищає від XSS атак за замовчуванням?
Як React захищає від XSS атак за замовчуванням?
Відповідь
React автоматично екранує всі значення, вставлені через JSX, перетворюючи їх на звичайний текст перед рендерингом. Цей захист запобігає виконанню шкідливих скриптів навіть якщо HTML-код впроваджується в дані. На відміну від innerHTML, який інтерпретує та виконує HTML, React обробляє теги як звичайний текст, роблячи неможливим впровадження шкідливого JavaScript через стандартні props або state.
3Чому dangerouslySetInnerHTML вважається небезпечним у React?
Чому dangerouslySetInnerHTML вважається небезпечним у React?
Відповідь
Ця властивість обходить нативний XSS-захист React, вставляючи сирий HTML безпосередньо в DOM без екранування. Якщо вміст надходить з ненадійного джерела або зовнішнього API, він може містити шкідливий JavaScript, який буде виконано. Явна назва dangerouslySetInnerHTML змушує розробників свідомо визнати ризик безпеки та реалізувати належну санітизацію за допомогою таких бібліотек як DOMPurify.
У чому головна різниця між Stored XSS та Reflected XSS атакою?
Який підхід слід надавати перевагу для відображення HTML з зовнішнього API у React?
+19 питань зі співбесід
Інші теми співбесід React / Next.js
Основи JavaScript
Основи React
React Hooks
Життєвий цикл компонента
React Router
Управління станом з Context
Форми та Controlled Components
Отримання даних та API
React Query (TanStack Query)
Styling & CSS-in-JS
Основи Next.js
TypeScript з React
Data Fetching у Next.js
Server Actions у Next.js
Маршрутизація та Навігація в Next.js
API Routes у Next.js
Metadata & SEO у Next.js
Middleware та Auth у Next.js
Тестування React
Zustand State Management
Оптимізація продуктивності React
Error Boundaries & обробка помилок
Advanced React Patterns
Розширені можливості Next.js
Розгортання та Продакшн Next.js
Architecture & Design Patterns
React Server Components
Інтернаціоналізація Next.js
Опануй React / Next.js для наступної співбесіди
Отримай доступ до всіх питань, flashcards, технічних тестів, вправ code review та симуляторів співбесід.
Почни безкоштовно