fullstack.org.ua

Середній21 хв· Fullstack Team

CSRF у браузерних застосунках

Розберете CSRF-атаки й реалізуєте захист за допомогою SameSite, CSRF-токенів і перевірки походження запиту.

Що таке CSRF

CSRF (Cross-Site Request Forgery) — атака, за якої зловмисний сайт змушує браузер користувача виконати запит до іншого сайту, де користувач уже автентифікований.

Браузер автоматично додає до запиту cookie потрібного домену. Тому сервер може сприйняти підроблений запит як запит самого користувача.

Наприклад, користувач увійшов у банківський застосунок:

http

Cookie: session=abc123

На іншому сайті зловмисник розміщує форму:

CSRF у браузерних застосунках · fullstack.org.ua

<form action="https://bank.example/transfer" method="POST">
  <input type="hidden" name="recipient" value="attacker">
  <input type="hidden" name="amount" value="1000">
</form>

<script>
  document.querySelector("form").submit();
</script>

javascript

const response = await fetch("/api/profile", {
  method: "POST",
  credentials: "same-origin",
  headers: {
    "Content-Type": "application/json",
    "X-CSRF-Token": csrfToken
  },
  body: JSON.stringify({
    displayName: "Нове ім’я"
  })
});

javascript

const http = require("node:http");
const crypto = require("node:crypto");

const PORT = 3000;
const ORIGIN = `http://localhost:${PORT}`;
const sessions = new Map();

function createSession() {
  const sessionId = crypto.randomBytes(32).toString("hex");
  const csrfToken = crypto.randomBytes(32).toString("hex");

  sessions.set(sessionId, {
    csrfToken,
    displayName: "Старе ім’я"
  });

  return { sessionId, csrfToken };
}

function parseCookies(request) {
  const header = request.headers.cookie || "";

  return Object.fromEntries(
    header
      .split(";")
      .map((part) => part.trim().split("="))
      .filter(([name, value]) => name && value)
  );
}

function getSession(request, response) {
  const cookies = parseCookies(request);
  let session = sessions.get(cookies.session);

  if (!session) {
    const created = createSession();

    response.setHeader("Set-Cookie", [
      `session=${created.sessionId}; HttpOnly; SameSite=Lax; Path=/`
    ]);

    session = sessions.get(created.sessionId);
    return {
      session,
      csrfToken: created.csrfToken
    };
  }

  return {
    session,
    csrfToken: session.csrfToken
  };
}

function sendJson(response, statusCode, data) {
  response.writeHead(statusCode, {
    "Content-Type": "application/json; charset=utf-8",
    "Cache-Control": "no-store"
  });

  response.end(JSON.stringify(data));
}

function readJson(request) {
  return new Promise((resolve, reject) => {
    let body = "";

    request.on("data", (chunk) => {
      body += chunk;

      if (body.length > 1_000_000) {
        reject(new Error("Request body is too large"));
        request.destroy();
      }
    });

    request.on("end", () => {
      try {
        resolve(body ? JSON.parse(body) : {});
      } catch {
        reject(new Error("Invalid JSON"));
      }
    });

    request.on("error", reject);
  });
}

function isAllowedOrigin(request) {
  const origin = request.headers.origin;

  if (origin) {
    return origin === ORIGIN;
  }

  const referer = request.headers.referer;

  if (referer) {
    try {
      return new URL(referer).origin === ORIGIN;
    } catch {
      return false;
    }
  }

  // Для критичних операцій запит без даних про походження відхиляємо.
  return false;
}

const server = http.createServer(async (request, response) => {
  const url = new URL(request.url, ORIGIN);

  if (request.method === "GET" && url.pathname === "/") {
    const { session, csrfToken } = getSession(request, response);

    response.writeHead(200, {
      "Content-Type": "text/html; charset=utf-8",
      "Cache-Control": "no-store"
    });

    response.end(`<!doctype html>
<html lang="uk">
<head>
  <meta charset="utf-8">
  <title>CSRF demo</title>
</head>
<body>
  <h1>Профіль</h1>

  <p>Поточне ім’я: <strong id="current-name">${session.displayName}</strong></p>

  <form id="profile-form">
    <label>
      Нове ім’я:
      <input id="display-name" name="displayName" required>
    </label>
    <button type="submit">Зберегти</button>
  </form>

  <p id="message"></p>

  <script>
    const csrfToken = ${JSON.stringify(csrfToken)};
    const form = document.querySelector("#profile-form");
    const message = document.querySelector("#message");
    const currentName = document.querySelector("#current-name");

    form.addEventListener("submit", async (event) => {
      event.preventDefault();

      const displayName = document.querySelector("#display-name").value;

      const response = await fetch("/api/profile", {
        method: "POST",
        credentials: "same-origin",
        headers: {
          "Content-Type": "application/json",
          "X-CSRF-Token": csrfToken
        },
        body: JSON.stringify({ displayName })
      });

      const result = await response.json();

      if (!response.ok) {
        message.textContent = result.error || "Не вдалося зберегти зміни";
        return;
      }

      currentName.textContent = result.displayName;
      message.textContent = "Зміни збережено";
    });
  </script>
</body>
</html>`);
    return;
  }

  if (request.method === "POST" && url.pathname === "/api/profile") {
    const cookies = parseCookies(request);
    const session = sessions.get(cookies.session);

    if (!session) {
      sendJson(response, 401, { error: "Потрібна автентифікація" });
      return;
    }

    if (!isAllowedOrigin(request)) {
      sendJson(response, 403, { error: "Заборонене походження запиту" });
      return;
    }

    const receivedToken = request.headers["x-csrf-token"];

    if (
      typeof receivedToken !== "string" ||
      receivedToken.length !== session.csrfToken.length ||
      !crypto.timingSafeEqual(
        Buffer.from(receivedToken),
        Buffer.from(session.csrfToken)
      )
    ) {
      sendJson(response, 403, { error: "Недійсний CSRF-токен" });
      return;
    }

    try {
      const body = await readJson(request);

      if (
        typeof body.displayName !== "string" ||
        body.displayName.trim().length < 2 ||
        body.displayName.trim().length > 50
      ) {
        sendJson(response, 400, { error: "Некоректне ім’я" });
        return;
      }

      session.displayName = body.displayName.trim();

      sendJson(response, 200, {
        displayName: session.displayName
      });
    } catch {
      sendJson(response, 400, { error: "Некоректне тіло запиту" });
    }

    return;
  }

  sendJson(response, 404, { error: "Не знайдено" });
});

server.listen(PORT, () => {
  console.log(`Сервер запущено: ${ORIGIN}`);
});