React Frontend Developer

Question 1

Как на фронтенде реализуется авторизация? (Хранение access/refresh токенов в Cookies / LocalStorage, отправка токена в запросах, обновление токена)

Accepted Answer

Access token хранится в памяти или LocalStorage для доступа к API. Refresh token хранится в HttpOnly cookie для безопасного обновления. Токен автоматически добавляется в заголовки запросов и обновляется при истечении.

Question 2

Что такое Cookie и для чего они используются?

Accepted Answer

Cookies - это небольшие текстовые данные, которые сервер отправляет браузеру для хранения. Они автоматически включаются в последующие запросы к тому же домену. Cookies используются для аутентификации пользователей, сохранения настроек и отслеживания поведения на сайте. Они имеют ограничения по размеру и сроку жизни.

Question 3

Почему refresh token часто хранят в httpOnly cookies?

Accepted Answer

Refresh token часто хранят в httpOnly cookies, потому что такие cookies недоступны из JavaScript. Это защищает токен от XSS-атак. Браузер автоматически отправляет cookie с запросами к серверу. Такой подход снижает риск кражи токена через вредоносный скрипт. Это считается best practice для SPA.

Question 4

Чем отличаются LocalStorage, IndexedDB, cookies и sessionStorage?

Accepted Answer

LocalStorage хранит данные бессрочно, sessionStorage — до закрытия вкладки. Cookies автоматически отправляются на сервер и используются для авторизации. IndexedDB — это база данных в браузере для хранения больших объемов данных и сложных структур.

Question 5

Почему токены часто хранят в cookies?

Accepted Answer

Токены часто хранят в cookies, потому что это позволяет автоматически отправлять их с каждым HTTP-запросом к серверу. Cookies могут быть помечены как httpOnly, что защищает их от доступа через JavaScript и снижает риск XSS-атак. Также можно установить флаги Secure (только HTTPS) и SameSite (защита от CSRF). Это удобный и относительно безопасный способ управления сессиями.

Question 6

Какие атрибуты есть у cookies?

Accepted Answer

Основные атрибуты cookies: Name, Value, Domain, Path, Expires/Max-Age, Secure, HttpOnly, SameSite. Name и Value задают имя и значение. Domain и Path определяют, для каких URL кука отправляется. Expires или Max-Age задают срок жизни. Secure требует HTTPS. HttpOnly запрещает доступ через JavaScript. SameSite ограничивает отправку в межсайтовых запросах.

Question 7

Какие проблемы безопасности связаны с cookies?

Accepted Answer

Cookies могут быть украдены через XSS-атаки, если не установлен флаг HttpOnly. CSRF-атаки возможны, если cookies автоматически отправляются с запросами. Также cookies могут быть перехвачены при передаче по незащищенному соединению. Для защиты используются флаги Secure, HttpOnly, SameSite и шифрование данных.

Question 8

Какие ограничения по размеру есть у браузерных хранилищ?

Accepted Answer

localStorage и sessionStorage обычно имеют лимит около 5-10 МБ на домен, в зависимости от браузера. Cookies ограничены 4 КБ на одну куку и максимум 20-50 кук на домен. Эти ограничения важны для выбора подходящего хранилища в веб-приложениях.

Question 9

На каком этапе формируются headers, cookies и body?

Accepted Answer

Headers, cookies и body формируются на стороне клиента при отправке HTTP-запроса и на стороне сервера при формировании ответа. Клиент устанавливает заголовки и тело запроса, а сервер добавляет свои заголовки и куки в ответ. Этот процесс происходит до передачи данных по сети.

Вопросы React Frontend Developer