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

Что проверяют

Понимаете ли вы, чем cookie отличается от остальных клиентских хранилищ и почему авторизацию чаще держат в ней, а не в localStorage. За вопросом обычно идёт разговор про безопасность, поэтому frontend-кандидата слушают именно на атрибутах.

Как отвечать

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

Атрибуты по делу:

Domain и Path определяют область отправки, поддомены подключаются явно. Expires и Max-Age делают cookie постоянной, без них она живёт до закрытия вкладки. Secure разрешает отправку только по HTTPS. HttpOnly убирает cookie из document.cookie, то есть из досягаемости чужого скрипта. SameSite в значении Lax или Strict отсекает отправку при запросах с чужого сайта.

Сильный ответ добавит выбор хранилища: токен сессии в cookie с HttpOnly и SameSite, настройки интерфейса в localStorage, черновик формы в sessionStorage. Объём cookie измеряется килобайтами, и всё, что прикладывается к каждому запросу, стоит трафика.

Где спотыкаются

Кладут токен в localStorage и называют это безопасным, потому что cookie якобы уязвимы к CSRF. Любой сторонний скрипт на странице читает localStorage целиком, а CSRF закрывается атрибутом SameSite и проверкой источника запроса на сервере.

Не различают сессионную и постоянную cookie и удивляются, что пользователя выкидывает при закрытии браузера: Max-Age просто забыли выставить.

Считают, что document.cookie показывает всё. Флаг HttpOnly скрывает самое важное, а сторонние cookie в современных браузерах режутся по умолчанию, поэтому аналитика и виджеты с чужого домена ведут себя не так, как на машине разработчика.