Въведение на CORS за начинаещи

Чудите се какво е CORS (Cross-Origin Resource Sharing)?


В шпионските филми оперативните служители по сигурността имат кодиран начин за предаване на информация помежду си. Тъй като те предимно предават информация, която може да бъде използвана срещу тях, ако попадне в ръцете на враговете им, те трябва да се уверят, че тези, които получават информацията, са доверени страни. Същото се отнася и за тези, които изпращат споменатата информация. Когато на изпращача и получателя се вярва, достоверността и сигурността на информацията могат да бъдат гарантирани.

https://pt.slideshare.net/atirekgupta/selenium-workshop-34820044

Реплика на този сценарий се случва в комуникацията между браузъри и уеб сървъри и тя се нарича политика със същия произход.

Според MDN:

Най- политика със същия произход е критичен механизъм за защита, който ограничава как документ или скрипт, натоварен от един източник, може да взаимодейства с ресурс от друг произход. Той помага да се изолират потенциално злонамерени документи, като се намалят възможните вектори за атака.

Какво е CORS?

В случай от реалния живот, когато оперативните служители по сигурността дават правило, че комуникацията трябва да се осъществява само сред оперативните служители като средство за сигурност, това е подобно на политиката на същия произход. И все пак може да има случаи, в които те ще трябва да взаимодействат с външния свят. Или с оперативни екипи за сигурност, за да се случи това, те могат да приложат друга мярка за сигурност провери онези оперативни. Тази проверка може да дойде по различни начини, в зависимост от участващите оперативни лица. В случай на комуникация в Интернет, CORS е механизмът, който позволява на браузърите да използват достъп до ресурси, до които първоначално няма да могат, тъй като ресурсът е от различен произход.

Cross-Origin Resource Sharing (CORS) е механизъм, който използва допълнителни HTTP заглавки, за да каже на браузърите да дадат уеб приложение, работещо с един произход, достъп до избрани ресурси от различен произход.

Говорих за произхода неведнъж и вероятно се чудите какво означава това. Произходът се определя от протокола, домейна и порта на URL адреса. Когато имате своя API с произход като https://api.geekflare.com:3001 и вашия фронтенд на https://geekflare.com, се казва, че произходът е различен. В тази ситуация ще ви трябва CORS, за да имате достъп до ресурси от двата края.

Когато заявките се отправят към сървър, браузърите (клиентът) и сървърите изпращат заявки и отговори, се включват HTTP заглавките. Сред тези заглавия са включени допълнителни заглавки, за да се предотврати блокирането на комуникацията на браузъра.

Защо браузърът ще блокира комуникацията?

Функциите му за защита на браузъра. Това ще стане, ако заявката идва от произход, различен от този на клиента. Допълнителните заглавки, включени в резултат на CORS, са начин да се каже на клиента, че може да се възползва от отговора, който е получил.

CORS Headers

Една от защитените заглавки, която може да бъде или отговора, или заглавката на заявката.

Заглавки на отговорите

Това са заглавките, които сървърът изпраща обратно в отговора си.

  • Access-Control-Allow-Origin:: Използва се за определяне на произхода, разрешен за достъп до ресурса на сървъра. Възможно е да се уточни, че са разрешени само заявки от конкретен произход – Access-Control-Allow-Origin: https://geekflare.com или че произходът няма значение – Access-Control-Allow-Origin: *.
  • Access-Control-Expose-Headers:: Както подсказва името, това изброява заглавките, до които браузърът има достъп.
  • Access-Control-Max-Age:: Това показва продължителността, за която може да се кешира отговорът на заявка за предварително полет.
  • Access-Control-Allow-Credentials:: Това показва, че браузърът може да се възползва от отговора, когато първоначалната заявка е направена с идентификатор.
  • Методи за контрол на достъп-разрешаване:: Това показва метода (ите), които са разрешени при опит за достъп до ресурс.
  • Access-Control-Allow-Headers:: Това показва, че HTTP заглавките могат да се използват в заявка.

Ето пример за това как ще изглежда отговорът

HTTP / 1.1 204 Без съдържание
Контрол на достъп-разрешаване на произход: *
Методи за контрол на достъпа-разрешаване: GET, HEAD, PUT, PATCH, POST, DELETE
Варирайте: Контрол на достъп-контрол-заглавки
Access-Control-Allow-Headers: Content-Type, Accept
Съдържание-дължина: 0
Дата: саб, 16 ноември 2019 11:41:08 GMT + 1
Връзка: поддържайте жив

Поискайте заглавки

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

  • Произход:: Това показва произхода на заявката на клиента. Когато работите с frontend и backkend, както беше посочено по-горе, това ще бъде хост на вашето приложение за frontend.
  • Метод за контрол на достъп-заявка:: Използва се в заявка за предварително полет, за да посочи метода HTTP, който ще се използва за отправяне на заявката.
  • Head-Control-Request-Headers:: Използва се в заявка за предварително полет, за да посочи HTTP заглавките, които ще бъдат използвани за извършване на заявката.

Ето пример за това как ще изглежда заявка

curl -i -X ​​ОПЦИИ localhost: 3001 / api \
-H ‘Метод за контрол на достъп-заявка: GET’ \
-H ‘Заглавия на достъп-контрол-заявки: Тип съдържание, Приемам’ \
-H ‘Произход: http: // localhost: 3000’

Предварителни полети заявки

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

След споменаването на заявки преди полета тук и там, какво би могло да означава това?

Заявки за предварително полет се случват, когато клиентът трябва да изпрати заявка за преди полет преди основната заявка. Заявката за предварително полет е повече от a сонда за да се определи дали сървърът поддържа основната заявка, която предстои да бъде направена. Когато се получи положително потвърждение, основната заявка се изпраща.

Когато заявката не е заявка за предварително полет, тя се нарича a проста молба.

Изпълнение на CORS

Най-вече ще искате да настроите нещата в началото на приложението си. Изпълнението зависи от рамката, която използвате. За този урок ще разгледаме как да го направите в NodeJS и Rails.

Rails

Препоръчвам ви да се възползвате от шкаф кора скъпоценен камък. След това ще трябва да добавите това към файла config / application.rb.

config.middleware.insert_before 0, Rack :: Cors правят
разрешавам
произход ‘*’
ресурс ‘*’,
заглавки:: всякакви,
експонирайте:% i (клиент на uid тип на маркера с изтичане на достъп),
методи:% i (получаване на пост постави пач изтриване на опции главата),
пълномощия: вярно
край
край

NodeJS

В Node.js това ще изглежда така.

app.all (‘*’, (req, res, next) => {
res.header („Access-Control-Allow-Origin“, „*“);
res.header („Методи за контрол на достъп-разрешаване“, „PUT, GET, POST, DELETE, PATCH, OPTIONS HEAD“);
res.header („Access-Control-Allow-Headers“, „*“);
res.header („Access-Control-Allow-Credentials“, true);
следващия();
});

В фрагмента на кода ние настройваме произхода, методите, заглавките и идентификационните данни, които трябва да бъдат разрешени за достъп до ресурсите, налични на нашия сървър. Можете също така да направите касата Sqreen който предоставя модул за заглавия на защита, който да бъде интегриран с приложения Ruby, PHP, Python, Java, Go, Node.JS. И за да внедрите в Apache или Nginx, вижте това ръководство.

заключение

CORS отпуска политиката, така че вашият браузър да има достъп до ресурсите, които искате. Разбирането какво е, защо е от съществено значение и как да го настроите ще ви помогне да разберете проблемите, с които може да се сблъскате при изграждането на уеб приложенията си.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map