👩‍💻 Безопасность фронтенд приложения

Не многие осознают важность безопасности фронтенд приложения. Иногда кажется, что фронтендеры занимаются только отрисовкой интерфейса, но не забывайте, что за отрисовкой и отправкой, есть работа с данными. Поговорим о полезных практиках, которые необходимо учитывать при создании фронтенд приложения.

Валидация данных на стороне клиента и сервера

1. Все данные, вводимые пользователем, должны проверяться как на стороне клиента (для удобства), так и на стороне сервера (для безопасности). Мы не можем доверять бэкэнду проверку данных, хотя они так же должны это делать. В любом случае сделав валидацию у себя, мы уже совершаем большой шаг от неконтролируемых событий.

Пример валидации почты: `function validateEmail(email) { const regex = /^[^s@]+@[^s@]+.[^s@]+$/; return regex.test(email); }

if (!validateEmail(userInput)) { alert('Пожалуйста, введите корректный email.'); }

Защита от XSS (межсайтового скриптингa)

Всегда экранируйте пользовательский ввод перед выводом на страницу. Используйте безопасные методы для работы с DOM, например, textContent вместо innerHTML. Для Vue.js разработчиков с большой осторожностью необходимо использовать директиву v-html. Используйте библиотеки, которые получают только тело html документа, а не его скрипты. Например DOMPurify `const cleanHTML = DOMPurify.sanitize(userInput); document.getElementById('output').innerHTML = cleanHTML;

Использование HTTPS

Убедитесь, что ваш сайт использует HTTPS для шифрования данных между клиентом и сервером.

Ограничение доступа к консоли браузера

Не выводите чувствительную информацию в консоль браузера.

Защита от атак на сессии

Используйте HttpOnly и Secure флаги для кук, если речь идет например про авторизацию.

`res.cookie('sessionId', '12345', { httpOnly: true, secure: true, sameSite: 'strict' });

Логирование и мониторинг

Ведите логи ошибок и подозрительных действий. Настройте мониторинг для оперативного выявления аномалий.```