Понимание CORS и политики того же происхождения в веб-безопасности

В области веб-безопасности и безопасности браузера важную роль играют две основные концепции: CORS (совместное использование ресурсов между источниками) и политика единого происхождения. Этот пост в блоге призван пролить свет на эти концепции и их значение для обеспечения безопасного взаимодействия в Интернете.

1. Та же политика происхождения (SOP):

Политика единого источника — это мера безопасности, реализованная веб-браузерами, которая позволяет коду JavaScript, выполняемому на веб-странице, получать доступ к ресурсам только из одного и того же источника, который охватывает один и тот же домен, протокол и комбинацию портов. Эта политика предотвращает запросы между разными источниками и ограничивает атаки на основе браузера.

Политика того же происхождения основана на трех компонентах происхождения:

Origin Domain: Доменное имя веб-страницы, на которой размещены ресурсы, например, «example.com».

Protocol: Протокол связи, используемый для доступа к веб-странице, например, «https://» или «http://».

Port: «80» или «443» по умолчанию.

Эта политика гарантирует, что веб-страница может получить доступ только к ресурсам из того же источника, к которому она принадлежит. Например, JavaScript может извлекать данные только из ресурса, который имеет одно и то же происхождение (тот же домен, протокол и порт).

2. Совместное использование ресурсов между источниками (CORS):

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

Когда веб-браузер делает запрос к другому источнику (домену, протоколу или порту), браузер инициирует процесс CORS, чтобы определить, должен ли запрашиваемый ресурс быть доступным. Сервер в ответ включает заголовок «Access-Control-Allow-Origin» в свой HTTP-ответ. Этот заголовок указывает разрешенные источники, которым разрешен доступ к запрашиваемому ресурсу.

Например, если веб-сайт с адресом «example.com» хочет отправить запрос к API с адреса «api.example.org», сервер API должен включить в свой ответ следующий заголовок:

Access-Control-Allow-Origin: https://example.com

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

CORS также включает дополнительные заголовки, такие как "Access-Control-Allow-Methods" и "Access-Control-Allow-Headers", чтобы указать разрешенные HTTP-методы и заголовки для запроса между источниками.

Давайте визуализируем CORS:

В итоге

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

  • Спасибо, что нашли время, чтобы прочитать наш блог. Ваша поддержка очень ценится!🙋

Использованная литература:

Веб-документы MDN
ChatGPT