Курс на мисконфиги. Как поймать проблемный CORS на проде

Same Origin Policy

SOP (Same Origin Policy) — это полити­ка безопас­ности бра­узе­ра, кон­тро­лиру­ющая вза­имо­дей­ствие меж­ду сай­тами. Она нуж­на для пре­дот­вра­щения кра­жи дан­ных поль­зовате­ля вре­донос­ным скрип­том.

До внед­рения SOP дан­ные кра­ли так:

1. Ата­кующий зас­тавля­ет жер­тву перей­ти на вре­донос­ный сайт с уже под­готов­ленным экс­пло­итом на JavaScript.
2. Жер­тва переш­ла по ссыл­ке, и от ее име­ни отправ­ляет­ся зап­рос на сайт, содер­жащий ее важ­ные дан­ные.
3. От­вет от сай­та чита­ется скрип­том и переда­ется на сер­вер зло­умыш­ленни­ка.
4. Зло­умыш­ленник получа­ет лич­ные дан­ные, которые может исполь­зовать для раз­вития ата­ки.

Проб­лема в том, что, ког­да бра­узер отправ­ляет HTTP-зап­рос из одно­го источни­ка в дру­гой, cookie-фай­лы, отно­сящи­еся к дру­гому домену, тоже отправ­ляют­ся в зап­росе. Это зна­чит, что ответ будет сге­нери­рован в рам­ках сеан­са поль­зовате­ля и будет вклю­чать в себя дос­тупные толь­ко ему дан­ные. Что­бы пре­дот­вра­тить такое поведе­ние, и сущес­тву­ет SOP.

Меж­сай­товые вза­имо­дей­ствия обыч­но делят на три катего­рии:

1. Меж­сай­товые записи. Как пра­вило, допус­кают­ся. Это могут быть ссыл­ки, редирек­ты, фор­мы, отправ­ка зап­росов через fetch и так далее. Некото­рые «слож­ные» зап­росы тре­буют pre-flight (пред­варитель­ного зап­роса), но об этом погово­рим отдель­но.
2. Меж­сай­товое встра­ива­ние. Обыч­но раз­решено. Нап­ример, для под­груз­ки ресур­сов через теги img, video, frame и ана­логич­ные им.
3. Меж­сай­товое чте­ние. Как пра­вило, не допус­кает­ся, но дос­туп к чте­нию час­то про­сачи­вает­ся путем встра­ива­ния. Нап­ример, ты можешь про­читать ширину и высоту встро­енно­го изоб­ражения, получить резуль­тат дей­ствия встро­енно­го сце­нария или про­верить дос­тупность встро­енно­го ресур­са.

В качес­тве иллюс­тра­ции отпра­вим нес­коль­ко зап­росов со стра­ницы http://discovery-lab.su/index.html. Реак­ция SOP при­веде­на в таб­лице ниже.

А вот схе­ма, показы­вающая, из чего сос­тоит заголо­вок Origin.

Cross-Origin Resource Sharing (CORS)

Рань­ше сай­там тре­бова­лось вза­имо­дей­ство­вать друг с дру­гом, но SOP бло­киро­вала мно­жес­тво таких зап­росов. Тог­да люди при­дума­ли механизм CORS (Cross-Origin Resource Sharing), который пред­назна­чал­ся для смяг­чения полити­ки SOP.

Вот чуть более под­робное опи­сание из справ­ки Mozilla:

«Cross-Origin Resource Sharing — механизм, исполь­зующий допол­нитель­ные HTTP-заголов­ки, что­бы дать воз­можность аген­ту поль­зовате­ля получать раз­решения на дос­туп к выб­ранным ресур­сам с сер­вера на источни­ке (домене), отличном от того, что сайт исполь­зует в дан­ный момент. Говорят, что агент поль­зовате­ля дела­ет зап­рос с дру­гого источни­ка (cross-origin HTTP request), если источник текуще­го докумен­та отли­чает­ся от зап­рашива­емо­го ресур­са доменом, про­токо­лом или пор­том».

Те­перь давай раз­берем­ся с дву­мя заголов­ками, на которые пред­сто­ит чаще все­го обра­щать вни­мание: Access-Control-Allow-Origin и Access-Control-Allow-Credentials.

Access-Control-Allow-Origin

За­голо­вок отве­та Access-Control-Allow-Origin показы­вает, с какого источни­ка может быть дос­тупен ответ сер­вера.

Воз­можные зна­чения:

1. Звез­дочка — говорит бра­узе­рам раз­решать зап­рос любого про­исхожде­ния для дос­тупа к ресур­су (но толь­ко для зап­росов без учет­ных дан­ных).
2. <domain> — ука­зыва­ет одно про­исхожде­ние, с которо­го мож­но получать ответ сер­вера.
3. null — ука­зыва­ет «нулевое» про­исхожде­ние. Ни­ког­да не добав­ляй его в белый спи­сок! Про­исхожде­ние для некото­рых схем (data:, file:) и докумен­ты, дос­тупные через песоч­ницу, опре­деля­ются как «нулевые».

Access-Control-Allow-Credentials

В зависи­мос­ти от заголов­ков меж­сай­товые зап­росы могут быть переда­ны без куки или заголов­ка авто­риза­ции. Впро­чем, если задана нас­трой­ка CORS Access-Control-Allow-Credentials: true, то сер­вер может раз­решить чте­ние отве­та, ког­да переда­ются куки или заголо­вок авто­риза­ции.