Какие клиентские уязвимости встречаются во frontend?

Основные клиентские уязвимости во frontend

Клиентские уязвимости — это проблемы безопасности, которые возникают на стороне браузера пользователя. Они могут привести к краже данных, выполнению несанкционированных действий или компрометации сессии. Наиболее распространённые типы: XSS, CSRF, Clickjacking и небезопасное хранение данных.

XSS (Cross-Site Scripting)

XSS позволяет злоумышленнику внедрить вредоносный JavaScript-код на страницу, которая затем выполняется в браузере жертвы. Различают три типа: отражённый (reflected), хранимый (stored) и DOM-based. Пример уязвимого кода:

// Уязвимый код: вставка пользовательского ввода напрямую в HTML
document.getElementById('output').innerHTML = userInput;

// Безопасный вариант: использование textContent
document.getElementById('output').textContent = userInput;

Защита: экранирование всех данных перед вставкой в HTML, использование Content Security Policy (CSP), избегание innerHTML, где возможно.

CSRF (Cross-Site Request Forgery)

CSRF заставляет браузер жертвы отправить запрос на целевой сайт от её имени, используя её куки. Например, злоумышленник размещает на своём сайте форму, которая отправляет POST-запрос на смену пароля. Защита: использование CSRF-токенов (уникальных для сессии), проверка заголовка Origin/Referer, установка атрибута SameSite для кук (Strict или Lax).

Clickjacking

Clickjacking скрывает целевой сайт в невидимом iframe, а пользователь думает, что кликает по элементам другого сайта. Защита: установка заголовка X-Frame-Options: DENY или SAMEORIGIN, использование Content Security Policy с директивой frame-ancestors.

Небезопасное хранение данных

Хранение чувствительных данных (токенов, паролей) в localStorage или sessionStorage делает их доступными для любого скрипта на странице. Рекомендуется использовать httpOnly куки для токенов, а localStorage — только для некритичных данных.

Вывод

Знание клиентских уязвимостей необходимо для написания безопасного кода. Применяйте экранирование, CSP, CSRF-токены и правильное хранение данных, чтобы минимизировать риски. Эти практики обязательны для любого frontend-разработчика, работающего с пользовательскими данными.