🔐 Security Practices для фронтенд-розробки

Цей документ описує базові принципи безпеки, яких має дотримуватись команда фронтенд-розробки при створенні, тестуванні та деплої веб-додатків.

---

🧠 Загальні принципи

• Безпека — частина архітектури, а не додаткова опція
• Всі розробники несуть відповідальність за безпеку свого коду
• Регулярні рев’ю безпеки мають бути частиною процесу розробки

---

🛡️ Захист від XSS (Cross-Site Scripting)

• Ніколи не вставляти неперевірені дані в DOM без екранування
• Використовувати бібліотеки шаблонів (наприклад, JSX, Vue templates), які автоматично екранують HTML
• Уникати dangerouslySetInnerHTML, v-html, innerHTML — лише з перевіреними джерелами
• Валідувати та санітизувати дані, отримані з API або збережені в localStorage

---

🧾 Захист від CSRF (Cross-Site Request Forgery)

• Використовувати HTTP-only cookies для зберігання токенів
• Впровадити CSRF-токени для форм, якщо бекенд не використовує SameSite cookies
• Всі запити мають бути автентифіковані та перевірені на сервері

---

🔑 Робота з токенами та автентифікацією

• Ніколи не зберігати access/refresh токени у localStorage або sessionStorage
• Використовувати HTTP-only Secure cookies для зберігання токенів
• Уникати передачі токенів через URL або query-параметри
• Всі запити мають бути через HTTPS

---

🧮 Валідація та обробка даних

• Всі форми мають клієнтську та серверну валідацію
• Уникати довір’я до даних, отриманих з API або користувача
• Валідувати типи, довжину, формат, допустимі значення

---

🧨 Вразливості в залежностях

• Регулярно запускати pnpm audit або npm audit
• Використовувати Dependabot або аналог для автоматичного оновлення
• Уникати залежностей без активної підтримки або з низькою довірою

---

🧰 Безпечне використання API

• Всі API-запити мають бути автентифіковані
• Не розкривати секрети, ключі, токени у фронтенд-коді
• Використовувати проксі або серверні обгортки для чутливих запитів

---

🧭 Безпечна навігація та маршрутизація

• Захищати приватні маршрути через guard'и або перевірку автентифікації
• Уникати витоку даних через URL (особливо токенів)
• Перевіряти права доступу до сторінок на клієнті та сервері

---

🧪 Тестування безпеки

• Писати тести для edge-case сценаріїв (довгі рядки, спецсимволи, SQL-подібні ін’єкції)
• Використовувати мокані дані для перевірки поведінки при помилках
• Перевіряти поведінку при втраті токенів, невалідних сесіях, таймаутах

---

📋 Рекомендовані інструменти

• ESLint Plugin Security
• DOMPurify — для санітизації HTML
• Helmet — для налаштування HTTP-заголовків (на сервері)
• Snyk — для перевірки залежностей

---

📌 Відповідальність

• Кожен розробник має проходити базове навчання з безпеки
• Техлід контролює дотримання практик та проводить періодичні рев’ю
• CI/CD має включати перевірку залежностей та лінтинг безпеки