Вопросы по Веб-разработке

В чём разница между Same-Origin Policy и CORS?

При разработке веб-приложений часто возникает необходимость взаимодействия с ресурсами, находящимися на других серверах. В этом контексте важнейшую роль играют механизмы безопасности браузеров, известные как Same-Origin Policy и CORS. Понимание этих концепций критически важно для новичков, чтобы избежать распространённых ошибок и обеспечить безопасное взаимодействие с API.

Same-Origin Policy

Same-Origin Policy (SOP) — это механизм безопасности браузера, который ограничивает то, как документы или скрипты, загруженные с одного источника (origin), могут взаимодействовать с ресурсами другого источника. "Источник" определяется как комбинация схемы (protocol), хоста (host) и порта (port).

Пример:

  • https://example.com:443 — это один источник.
  • http://example.com:80 — это другой источник (разная схема).
  • https://api.example.com:443 — это другой источник (разный хост).

Как работает Same-Origin Policy

SOP предотвращает:

  1. Запросы: Скрипты на одной странице не могут отправлять HTTP-запросы на другой источник.
  2. Доступ к данным: Скрипты не могут читать данные, полученные с других источников.

Таким образом, если ваш JavaScript пытается выполнить запрос к https://api.example.com, когда основной документ загружен с https://example.com, браузер заблокирует этот запрос.

CORS (Cross-Origin Resource Sharing)

CORS — это механизм, который позволяет веб-приложениям на одном источнике (origin) запросить ресурсы с другого источника. CORS предоставляет серверу способ сообщать браузеру, что он разрешает запросы с других источников.

Как работает CORS

  1. Заголовки ответа: Сервер, который хочет разрешить кросс-доменные запросы, добавляет специальный заголовок Access-Control-Allow-Origin в ответ на HTTP-запрос.
    Пример заголовка:
    Access-Control-Allow-Origin: *
    

    Это позволяет любому источнику получать доступ к данному ресурсу.
  2. Предварительные запросы: Если запрос включает методы, отличные от GET или POST, или если он отправляет пользовательские заголовки, браузер сначала выполняет запрос OPTIONS (предварительный запрос) для проверки, разрешает ли сервер выполнение фактического запроса.

Пример использования CORS

Рассмотрим пример, где мы выполняем AJAX запрос к серверу. Если сервер поддерживает CORS, он должен установить необходимые заголовки.

fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    }
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Ошибка:', error));

На стороне сервера, если он на Node.js с использованием Express, код может выглядеть так:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // Включаем CORS

app.get('/data', (req, res) => {
    res.json({ message: 'Это кросс-доменный запрос!' });
});

app.listen(3000, () => {
    console.log('Сервер запущен на http://localhost:3000');
});

Заключение

Таким образом, Same-Origin Policy служит защитой против потенциально вредоносных запросов, а CORS предоставляет возможность безопасного обмена ресурсами между разными источниками. Понимание этих концепций поможет вам не только в открытии возможности работать с API, но и в обеспечении безопасной работы вашего приложения.