Irbisa · Шпаргалка

Веб-платформа и безопасность

Как браузер рисует страницу, DOM и события, CSS-раскладка, доступность, HTTP и кэширование, XSS, CSP и CORS, cookies, токены и OAuth, хранилища

Middle-разработчик · 23 вопроса

  1. 01

    Как работает распространение событий в DOM и что такое делегирование событий?

    Событие DOM проходит три фазы: погружение (capture, от window вниз к цели), цель (target) и всплытие (bubble, обратно вверх к window).

    const list = document.querySelector<HTMLUListElement>('#todos')!; // One listener for every current and future rowlist.addEventListener('click', (event) => {  const button = (event.target as Element).closest<HTMLButtonElement>('button[data-id]');  if (!button || !list.contains(button)) return;…
  2. 02

    Чем отличаются <script>, <script async> и <script defer>?

    Обычный <script> останавливает разбор HTML, пока не загрузится и не выполнится.

    <head>  <!-- blocks parsing: avoid in head -->  <script src="/legacy.js"></script>   <!-- run after parsing, in this order -->  <script defer src="/vendor.js"></script>…
  3. 03

    Как браузер решает, какое CSS-правило победит, если элементу подходят несколько правил?

    Каскад сравнивает по очереди: источник стилей и !important, каскадные слои (@layer), специфичность и в конце порядок в коде, где побеждает более позднее правило.

    @layer reset, vendor, app; @layer vendor {  #sidebar .button { color: gray; } /* (1,1,0), but in an earlier layer */}…
  4. 04

    Когда использовать Flexbox, а когда CSS Grid?

    Flexbox раскладывает элементы в одном измерении (строка или колонка), и раскладку определяет размер контента; Grid раскладывает строки и колонки сразу, а дорожки задаёт контейнер.

    /* One dimension: a toolbar */.toolbar {  display: flex;  align-items: center;  gap: 8px;}…
  5. 05

    Чем отличаются хранилища localStorage, sessionStorage, cookies и база данных IndexedDB?

    localStorage и sessionStorage синхронно хранят строки, около 5 МБ на origin; первый живёт постоянно, второй пока открыта вкладка.

  6. 06

    Чем отличаются GET, POST, PUT, PATCH и DELETE и какие из них безопасные и идемпотентные?

    GET читает, POST создаёт ресурс или запускает действие, PUT заменяет ресурс телом запроса, PATCH меняет его часть, DELETE удаляет.

  7. 07

    С какими HTTP-кодами ответа фронтенд-разработчик сталкивается чаще всего и чем отличаются 401 и 403, а также 301, 302 и 304?

    Первая цифра задаёт класс: 2xx успех, 3xx редирект, 4xx проблема с запросом, 5xx сбой на сервере.

  8. 08

    Что изменилось при переходе с HTTP/1.1 на HTTP/2 и HTTP/3 и как это влияет на бандлинг и шардирование доменов?

    HTTP/2 передаёт много запросов параллельно по одному TCP-соединению со сжатыми заголовками, а HTTP/3 переносит ту же модель на QUIC поверх UDP, поэтому один потерянный пакет больше не тормозит все потоки.

  9. 09

    По этим заголовкам ответов: какие ответы браузер переиспользует без запроса, какие перепроверяет, а какие никогда не сохраняет?

    GET /assets/index-3f9c1a.jsCache-Control: public, max-age=31536000, immutable GET /index.htmlCache-Control: no-cacheETag: "v42" GET /api/meCache-Control: no-store GET /api/products?page=1Cache-Control: max-age=60, stale-while-revalidate=300

    Скрипт переиспользуется год без запросов; index.html сохраняется, но перепроверяется перед каждым использованием ценой ответа 304; /api/me не сохраняется никогда; список товаров берётся из кеша 60 секунд, потом ещё до 300 секунд отдаётся устаревшим, пока фоновый запрос его обновляет.

  10. 10

    Что происходит, когда вы вводите URL в браузере и нажимаете Enter?

    Браузер находит IP домена через DNS, открывает соединение TCP или QUIC, согласует TLS, отправляет HTTP-запрос и получает HTML.

  11. 11

    Как браузер превращает HTML и CSS в пиксели (critical rendering path)?

    Браузер разбирает HTML в DOM, а CSS в CSSOM, объединяет их в render tree из видимых узлов, вычисляет размер и положение каждого блока (layout), рисует пиксели каждого слоя (paint) и отдаёт GPU собрать слои в итоговый кадр (composite).

  12. 12

    Чем reflow отличается от repaint и что такое layout thrashing?

    Reflow (layout) пересчитывает размер и положение элементов и стоит дорого; repaint перерисовывает пиксели без изменения геометрии.

    const items = document.querySelectorAll<HTMLElement>('.item'); // wrong: each write invalidates layout, the next read forces it againitems.forEach((el) => {  el.style.height = `${el.offsetWidth / 2}px`;});…
  13. 13

    В каком порядке этот код выведет сообщения, когда пользователь нажмёт на кнопку?

    const outer = document.querySelector('#outer')!;const button = document.querySelector('#outer button')!; outer.addEventListener('click', () => console.log('outer bubble'));outer.addEventListener('click', () => console.log('outer capture'), { capture: true });button.addEventListener('click', () => console.log('button'));document.addEventListener('click', () => console.log('document'));

    outer capture, button, outer bubble, document: обработчики погружения срабатывают по пути вниз от window к цели, затем обработчики самой цели, затем обработчики всплытия по пути обратно вверх.

  14. 14

    Почему z-index: 9999 иногда не поднимает элемент наверх?

    z-index упорядочивает элементы только внутри одного контекста наложения (stacking context).

    .card {  transform: translateY(0); /* creates a stacking context */} .card .tooltip {  position: absolute;…
  15. 15

    Что нужно, чтобы React-приложение было доступным (accessibility)?

    Сначала семантический HTML (button, a, label, заголовки, landmarks), всё должно работать с клавиатуры с видимым фокусом, у картинок и кнопок-иконок нужен текстовый эквивалент, нужен достаточный контраст цветов и управление фокусом, когда UI меняется без перезагрузки страницы.

  16. 16

    Найдите баг: пользователи клавиатуры и скринридеров не могут открыть меню.

    function MenuTrigger({ onOpen }: { onOpen: () => void }) {  return (    <div className="menu-trigger" onClick={onOpen}>      <img src="/icons/menu.svg" />    </div>  );}

    <div> с onClick не получает фокус, не реагирует на Enter и Space и не имеет роли, а у иконки нет текстового эквивалента, поэтому с клавиатуры до элемента не добраться, а скринридер не сообщает ничего полезного.

  17. 17

    Что такое ARIA и когда её не стоит использовать?

    ARIA представляет собой набор HTML-атрибутов (role, aria-*), которые сообщают вспомогательным технологиям, что это за элемент, в каком он состоянии и с чем связан, когда одного HTML не хватает.

  18. 18

    Что такое XSS, как React от него защищает и где эта защита заканчивается?

    При XSS (межсайтовом скриптинге) контент атакующего выполняется как скрипт на вашей странице с сессией пользователя.

    import DOMPurify from 'dompurify'; function Comment({ html, website }: { html: string; website: string }) {  const safeHtml = DOMPurify.sanitize(html);  // Allow-list the protocol: escaping does not make a URL safe  const safeUrl = /^https?:/i.test(website) ? website : undefined;…
  19. 19

    Что такое CORS, что такое preflight-запрос и как исправить ошибку CORS?

    CORS определяет, как сервер сообщает браузеру, что JavaScript с другого origin может читать его ответы: браузер соблюдает same-origin policy и отдаёт ответ, только если в нём есть подходящий Access-Control-Allow-Origin.

    // Frontend: send cookies to another originconst res = await fetch('https://api.example.com/orders', {  method: 'POST',  credentials: 'include',  headers: { 'Content-Type': 'application/json' }, // not a simple request: preflight first  body: JSON.stringify({ productId: 42 }),…
  20. 20

    Что такое Content Security Policy и как внедрить её в существующее React-приложение, ничего не сломав?

    CSP задаётся заголовком ответа и сообщает браузеру, какие скрипты, стили, фреймы и соединения разрешены странице, поэтому внедрённая разметка не выполнится, даже попав в DOM.

    import { randomBytes } from 'node:crypto'; // Called for every HTML response: the nonce must be new each timeexport function cspFor() {  const nonce = randomBytes(16).toString('base64');  const policy = […
  21. 21

    Что такое CSRF и как от него защищают cookies с SameSite и CSRF-токены?

    Подделка межсайтового запроса (CSRF) заставляет браузер пользователя отправить запрос на ваш сайт с другого сайта, приложив cookies пользователя.

  22. 22

    Где одностраничному приложению хранить токен авторизации: в localStorage, в cookie или в памяти?

    Самая надёжная типовая схема: короткоживущий access-токен в памяти плюс refresh-токен в cookie с HttpOnly, Secure и SameSite, или только сессионная cookie, а токены хранит backend-for-frontend.

  23. 23

    Как работает вход через внешнего провайдера в одностраничном приложении (OAuth 2.0 authorization code flow с PKCE)?

    Приложение отправляет пользователя к провайдеру с хешем одноразового секрета, провайдер возвращает пользователя с короткоживущим кодом, а приложение обменивает код и исходный секрет на токены.

    const AUTH = 'https://auth.example.com';const client = { client_id: 'web', redirect_uri: `${location.origin}/callback` };const b64url = (bytes: Uint8Array) =>  btoa(String.fromCharCode(...bytes)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''); export async function signIn() {…