CORS и preflight request: как работает, заголовки, кэш

Preflight request – это как разведчик 🕵️‍♂️, который браузер отправляет перед основным запросом, чтобы проверить, разрешено ли общение с другим сайтом. Это делается для вашей безопасности в интернете.

Preflight request решает проблему безопасности, проверяя, можно ли доверять внешнему серверу и обмениваться данными без риска. Это важно, потому что упрощает написание программ, делая веб-разработку более безопасной и предсказуемой. Благодаря этому механизму, разработчики могут быть уверены, что их приложения не станут жертвами кибератак из-за непроверенных запросов. 🛡️✨

Пример

Представьте, что вы строите веб-приложение, которое позволяет пользователям сохранять заметки онлайн. Ваше приложение (скажем, myapp.com) хочет отправить заметку на сервер, который находится на другом домене (notesapi.com). Вы решили использовать метод POST для отправки данных заметки.

Вот как выглядит ваш JavaScript код для отправки заметки:

fetch("https://notesapi.com/api/notes", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer ваш_токен_авторизации"
  },
  body: JSON.stringify({
    title: "Моя новая заметка",
    content: "Содержимое моей новой заметки"
  })
});

🔍 Что происходит за кулисами?

1. Preflight Request: Перед тем, как отправить ваш POST запрос, ваш браузер автоматически отправляет предварительный запрос (preflight request) используя метод OPTIONS. Этот запрос спрашивает сервер notesapi.com, может ли он принять ваш основной запрос с такими заголовками и методом.

2. Заголовки Preflight Request: В этом запросе браузер включает заголовки, такие как Access-Control-Request-Method (со значением POST), Access-Control-Request-Headers (со значениями, которые вы хотите использовать, например, Content-Type и Authorization), и Origin (со значением https://myapp.com).

3. Ответ сервера: Если сервер notesapi.com настроен правильно и разрешает такие запросы, он ответит на preflight запрос с заголовками, указывающими, что ваше приложение на myapp.com может отправлять запросы методом POST и использовать нужные заголовки.

4. Отправка основного запроса: Только после получения положительного ответа от сервера на preflight запрос, ваш браузер отправит основной POST запрос с данными заметки.

🎯 Зачем это нужно?

Этот механизм предназначен для обеспечения безопасности. Он предотвращает отправку вредоносных запросов от сайтов, которым не доверяет сервер. Таким образом, если сервер notesapi.com не разрешает запросы с myapp.com, ваш браузер не отправит чувствительные данные, защищая таким образом информацию пользователя.

💡 Простыми словами, preflight запрос – это как если бы вы перед покупкой в магазине звонили туда и спрашивали, можно ли купить товар определенным способом и взять с собой свою сумку. Если магазин говорит "да", вы идете на покупки. Если "нет" – вы не тратите свое время.

Как работает механизм CORS и preflight запросы

CORS (Cross-Origin Resource Sharing) – это механизм, который позволяет или запрещает веб-страницам делать запросы к серверу, расположенному на другом домене, чем сама веб-страница. Это сделано для обеспечения безопасности, предотвращая межсайтовые запросы и защищая данные пользователя от вредоносных сайтов.

Когда вы делаете запрос к серверу с другого домена (кросс-доменный запрос), браузер автоматически применяет политику CORS. Если запрос не соответствует CORS политике сервера, браузер его блокирует.

Отправка и обработка preflight запроса

Preflight запрос – это специальный запрос, который отправляется перед основным запросом к серверу. Он использует метод OPTIONS и содержит заголовки, такие как Access-Control-Request-Method и Origin, которые информируют сервер о типе предстоящего запроса и происхождении запроса.

Сервер проверяет эти заголовки и решает, разрешить ли основной запрос. Если сервер разрешает запрос, он отвечает с заголовками, такими как Access-Control-Allow-Origin, которые указывают браузеру, что запрос безопасен и его можно выполнить.

Важные заголовки preflight запроса и ответа сервера

В preflight запросе используются следующие ключевые заголовки:

• Access-Control-Request-Method: сообщает серверу, какой HTTP метод будет использоваться в основном запросе.
• Access-Control-Request-Headers: перечисляет заголовки, которые будут использоваться в основном запросе.
• Origin: указывает домен, с которого был сделан запрос.

Ответ сервера на preflight запрос может включать:

• Access-Control-Allow-Origin: указывает, какие домены могут получать ответы.
• Access-Control-Allow-Methods: перечисляет методы, разрешенные для кросс-доменных запросов.
• Access-Control-Allow-Headers: указывает, какие заголовки разрешены в запросе.
• Access-Control-Max-Age: сообщает, как долго результат preflight запроса может быть кэширован.

Кэширование ответов preflight для улучшения производительности

Кэширование ответов preflight может значительно улучшить производительность, уменьшая количество необходимых сетевых запросов. Если сервер указывает в ответе на preflight запрос заголовок Access-Control-Max-Age, браузер может кэшировать разрешение на выполнение запросов на указанный период времени. Это означает, что для повторных запросов к тому же серверу preflight запрос может не потребоваться.

Примеры и советы по оптимизации

Чтобы минимизировать задержки, связанные с preflight запросами, разработчики могут использовать следующие стратегии:

• Использовать простые запросы, когда это возможно, чтобы избежать необходимости в preflight запросах.
• Указывать Access-Control-Max-Age в ответах сервера на preflight запросы, чтобы разрешить кэширование разрешений.
• Избегать частых изменений в CORS политике, чтобы кэшированные разрешения оставались актуальными.

Пример: Если ваше веб-приложение регулярно отправляет запросы к API, которое требует авторизации, и вы знаете, что CORS политика API не меняется часто, вы можете установить Access-Control-Max-Age на сутки. Это позволит браузеру пользователя кэшировать разрешение на выполнение запросов к этому API на 24 часа, уменьшая общее количество сетевых запросов.

В заключение, понимание механизма CORS и правильное использование preflight запросов играют ключевую роль в разработке безопасных и эффективных веб-приложений. Следуя лучшим практикам и оптимизируя использование кэширования, разработчики могут улучшить производительность приложений и обеспечить безопасность данных пользователей.