Browser APIs + Interview

DOM, HTTP, CORS, Storage и объяснение технических решений.

Browser APIs: фокус на реальные сценарии

В этом блоке интервьюеры обычно проверяют не теорию “в вакууме”, а понимание того, как браузер ведет себя в продакшене: запросы, безопасность, хранение данных, обработка ошибок.

Полезный подход на интервью: объяснять через цепочку “что происходит в браузере” -> “какой риск” -> “какое техническое решение”.

CORS и ограничения браузера

Если frontend и API на разных origin, браузер применяет CORS-политику. Даже если сервер физически вернул ответ, JS-код может не получить доступ к данным без корректных CORS-заголовков.

Частая ошибка кандидатов: пытаться “исправить CORS на фронтенде”. Корректный ответ: CORS — серверная политика ответа, на клиенте ее нельзя отключить безопасно.

True/FalseInline

CORS

Нужно ли серверу явно отдавать CORS-заголовки для кросс-доменных XHR/fetch запросов?

Без CORS-заголовков браузер может заблокировать доступ к ответу.

Fetch pipeline и обработка ответа

В интервью часто просят описать “боевой” порядок действий:

  1. отправили запрос;
  2. проверили статус;
  3. распарсили тело;
  4. обработали данные и ошибки.

Бонус для интервью: явно упомянуть разницу между сетевой ошибкой (исключение в fetch) и HTTP-ошибкой (статус 4xx/5xx при успешно завершенном запросе).

Order StepsInline

Fetch: базовый pipeline

Расставь шаги обработки HTTP-ответа в корректном порядке.

  1. 1.Использовать данные в UI/логике
  2. 2.Распарсить JSON через response.json()
  3. 3.Проверить response.ok / status
  4. 4.Вызвать fetch(url)

Перетаскивай шаги за ручку ⋮⋮ или используй кнопки ↑/↓.

Cookies и безопасность

Главные флаги, которые важно помнить:

  • HttpOnly — cookie недоступна из JS;
  • Secure — отправка только по HTTPS;
  • SameSite — контроль кросс-сайтовой отправки.

Если тебя спрашивают про хранение токенов, лучше объяснить trade-off:

  • localStorage удобен, но уязвим к XSS;
  • HttpOnly cookie безопаснее от XSS-чтения, но требует аккуратной CSRF-стратегии.
Match PairsInline

Безопасность cookies

Сопоставь атрибут cookie и его эффект.

Термины

HttpOnly

Перетащи сюда определение

Secure

Перетащи сюда определение

SameSite

Перетащи сюда определение

Определения (drag-and-drop)

Термины, которые важно проговаривать уверенно

Даже короткий кроссворд помогает закрепить vocabulary, который часто всплывает в вопросах про браузерную безопасность и сетевое взаимодействие.

CrosswordInline

Кроссворд по Web API терминам

Заполни ключевые термины по подсказкам.

Мини-итог

К концу блока ты должен уметь ясно объяснить:

  • почему CORS ошибку решают на сервере, а не “в фронте”;
  • какой порядок обработки fetch ответа считается надежным;
  • какие cookie-настройки обязательны для чувствительных данных.
  • какие риски связаны с хранением данных в браузере и как их снижать.