Michael's Blog
RU

Сеть

Сеть

Rest(ful) API

REST API — это архитектурный стиль взаимодействия между клиентом и сервером.
Он использует стандартные HTTP-методы для работы с ресурсами:

  • GET — получить данные (например, список пользователей).
  • POST — создать новый ресурс.
  • PUT — полностью заменить существующий ресурс новым.
  • PATCH — частично обновить ресурс.
  • DELETE — удалить ресурс.

Разница между PUT и PATCH

Напр. хотим отредактировать User:

{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "age": 25
}

Если редактировать через PUT - даже если нужно изменить только name, всё равно нужно отправить объект со всеми полями. Если редактировать через PATCH - можно отправить объект содержащий только name.

CDN

CDN — это сеть серверов, распределённых по всему миру, которая кеширует и отдает статический контент (изображения, стили, JS, видео и т. д.).

DNS

DNS преобразует удобочитаемые доменные имена в IP-адреса. Пример: openai.com → 104.18.12.123

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

CORS (Cross-Origin Resource Sharing)

  • это политика безопасности браузера, которая ограничивает запросы на другой домен.
  • если сервер не разрешает домен клиента в заголовках, браузер заблокирует ответ.
  • напр. с локалхоста при разработке фронта, ты отправляешь запрос и браузер заблокирует доступ к ответу, если бэк не добавил в хэдеры "Access-Control-Allow-Origin": http://localhost:3000
  • (либо юзать reverse-proxy, это дев-сервер (Next/CRA/Vite), ты шлёшь на него запросы(на его локалхост), а он делает запрос на реальный урл и даёт браузеру ответ от лица локалхоста

Preflight-запрос:

  • Для небезопасных методов (например, POST с Content-Type: application/json) браузер сначала отправляет OPTIONS-запрос, чтобы проверить, разрешает ли сервер такой доступ.
  • Preflight отправляется, если запрос не попадает под “simple requests”.

Simple request — это:

  • метод: GET, POST, HEAD;
  • Content-Type: application/x-www-form-urlencoded, multipart/form-data или text/plain;
  • без кастомных заголовков (например, Authorization, X-My-Header).

CSRF (XSRF) (Cross-Site Request Forgery)

Атака: злоумышленник заставляет браузер отправить запрос на доверенный сайт с твоими cookie.
Пример:

  • во вкладке 1 ты залогинен в bank.com
  • во вкладке 2 открываешь evil.com
  • там скрытая форма отправляет запрос на bank.com
  • браузер сам прикладывает cookie → сервер думает, что это сделал ты.

Защита:

  1. SameSite для cookie

    • флаг SameSite=Lax или Strict говорит браузеру: не отправляй cookie, если запрос пришёл с другого сайта.
    • значит, при переходе с evil.com cookie bank.com не прикрепятся.

  2. CSRF-токены

    • сервер генерирует случайный токен и вставляет его в форму или выдаёт в API.
    • клиент при каждом запросе должен его отправлять.
    • злоумышленник не знает токен → его запрос отклоняется.

  3. Проверка заголовков

    • сервер смотрит Origin или Referer.
    • если запрос пришёл не с bank.com, он блокируется.

XSS (Cross-Site Scripting)

  • внедрение вредоносных скриптов в сайт через инпуты, параметры урла Защита
  1. Экранирование HTML (React делает автоматически, если не выключить через prop dangerouslySetInnerHTML)
    • замена спецсимволов напр. < > в кодировку &lt &gt
  2. HttpOnly cookie
    • Флаг HttpOnly делает cookie недоступными для JavaScript
    • Напр. (Express)
    app.post('/login', (req, res) => {
  // допустим, пользователь успешно авторизовался
  res.cookie('session', 'abc123', {
    httpOnly: true,   // ❗ JS на фронте не сможет прочитать
    secure: true,     // только через HTTPS
    sameSite: 'Lax',  // базовая защита от CSRF
    maxAge: 1000 * 60 * 60 // 1 час
  });
  res.send('Logged in');
});
  3. CSP (Content Security Policy)
    • это HTTP-заголовок, который говорит браузеру: "какие скрипты, стили, картинки и другие ресурсы можно загружать и выполнять на этом сайте"
    • выставляется на File Static Server-е (напр. Nginx), в Next.js - в next.config.js

HTTP(S)

  • HTTP — это протокол, по которому браузер и сервер обмениваются данными.
  • HTTPS — это тот же HTTP, но «поверх» него включается TLS-шифрование.

Что это даёт:

  • Никто не может подглядеть, какие данные отправляются (например, пароль).
  • Никто не может подменить ответы сервера незаметно.
  • Браузер проверяет, что сайт настоящий (через сертификат).

MITM - Атака «человек посередине»

Злоумышленник встраивается между браузером и сервером, читает или подменяет данные. Часто встречается в открытых Wi-Fi или при HTTP (или при ws://).

Защита

  1. Редирект с HTTP на HTTPS (настраивается в Nginx)
  2. Для Websocket использование wss://
  3. CSP
  4. HSTS (HTTP Strict Transport Security)
  • это еще один заголовок (наравне с CSP)
  • тоже выставляется на File Static Server-е (напр. Nginx), в Next.js - в next.config.js

После ввода URL в адресную строку

  1. Браузер через DNS получает IP-адрес домена.
  2. Если HTTPS → TLS-рукопожатие (договариваются о шифровании, проверяется сертификат).
  3. Запрос к серверу → приходит HTML.
  4. Загружаются CSS, JS, картинки.
  5. Строятся DOM и CSSOM → layout → paint.
  6. JS делает страницу интерактивной (гидратация).