Step 4 (S-44896)

From Stepik Wiki
Jump to: navigation, search

Step on Stepik: https://stepik.org/lesson/14834/step/4

Step 4 (S-44896) 1.png

[00:00 - 00:16] и а завершения обсуждения технология давайте разберем такую вещь как coarse course cross a regina resort шеринг а мы говорили в начале


Step 4 (S-44896) 2.png

[00:16 - 00:35] эта технология позволяет осуществлять кросс доменный аякс запросы первоначально запросы ограничено строго по домену то есть браузер делает запросы позволяя осуществлять этот запрос только конкретному домену а


[00:35 - 00:53] в некоторых случаях довольно часто требуется сделать кросс доменные запросы например когда вы делаете какой то виджет то есть это очень популярна в современных приложениях например вы делаете движет для комментирования отдаете свой javascript код произвольному сайту к партнеру


[00:53 - 01:09] а этот сайт устанавливая javascript на своих страницах и на его странице появляется функционал комментирование которой а разрабатываете в принципе работает сервер discuss


[01:09 - 01:28] а естественно что код выполняется javascript код выполняется на сайте партнера и отделы аякс запросы к вашему сайту домену различны поэтому казалось бы работает ничего не должно


[01:28 - 01:46] а для преодоления используется технология horse в чем суть дело в том что браузер выполняет запросы даже при а различных доменов то есть выполнять даже кросс доменный шлак запроса но


[01:46 - 02:04] а если доменное различаются то браузер не показывают результатов выполнения то есть javascript которая работает на чужом домене не у него не будет вызван call back вы не получите результата который вернул вам серверов


[02:04 - 02:22] для того чтобы преодолеть это и разрешить браузеру возвращать результат от кросс домен hayaku запросов а ноги курс присутствуют 2 специальных заголовка по сути дела набор заголовков которые


[02:22 - 02:41] протокола итак посмотрим работу на следующей схеме допустим у нас есть клиент джаваскрипта работающий на домене партнеров ок а он осуществляет


Step 4 (S-44896) 3.png

[02:41 - 02:59] аякс запрос к вашему серверу которые допустим домене blogspot точка com домены различаются различаются полностью поэтому просто так алекс работать не будет браузер делает запрос


[02:59 - 03:14] с точки зрения что степи это обычный get запрос но поскольку браузер а понимает что происходит запрос и что домены разные он добавляет специальный заголовок ориджен


[03:14 - 03:29] в заголовке ориджен а головки ориджен присутствуют но он так и называется ориджен то есть происхождения а ориджен данного запроса по факту ориджен это


[03:29 - 03:49] урл главной странице сайта то есть вот это п двоеточие парня орг а сша в конце нет вот небольшая ошибка то есть при каждом запросе браузер передает специальный дополнительный заголовок ориджен а с помощью этого заголовка ваш сервер


[03:49 - 04:05] может определить понять откуда происходит запрос а поскольку поможет определить он может решить стоит доверять данные которые он возвращает


[04:05 - 04:20] сайту приложение ок либо не стоит этого делать если а вот сервер решает что следует доверить он должен выставить специальный заголовок акциз контроль


[04:20 - 04:36] то есть он дает а обычные обычно ответ это такое 200 здесь вероятных в этот же сон ну поскольку таятся и + дополнительный заголовок access control алгоритм этот заголовок


[04:36 - 04:55] и покажут браузеру что на самом деле нужно разрешить передачу данных при а замена маяк запроса и javascript получат загружаемые а давайте еще раз пройдемся по заголовкам


Step 4 (S-44896) 4.png

[04:55 - 05:13] прикрутить домен на боях запросе если браузер поддерживает технологию course а это большинство современных браузеров internet explorer начиная а в 10 версии ну фактически сейчас это подавляющее большинство браузеров


[05:13 - 05:29] а то прикроют домены маяк запросе будет передаваться заголовок в котором указывается так скажем сайт инициатор запроса веб сервер


[05:29 - 05:48] если он согласен предоставить данные то есть разрешает предоставить данные для данного запроса а возвращает заголовок control алло заголовок значение этого заголовка должно совпадать


[05:48 - 06:05] либо либо должно совпадать с переданным заголовком ориджен то есть явно указывает что он согласен предоставить данные для данного ориджена либо должно быть вот таким звездочка предоставить для кого год


[06:05 - 06:24] а ситуация несколько усложняется если а запрос требуют передача кук то есть по умолчанию домены запросах как мы знаем при обсуждении проблемы браузер передает


[06:24 - 06:44] если вы загружаете ссылки будут петь но это нормальное поведение запросах а для того чтобы куки были переданы требуется поставить специальный флажок это дополнительная опция api


[06:44 - 07:01] аякса а если куки передана то от сервера требуется дополнительно вот такой флаг о такой заголовок access control lock redemption


[07:01 - 07:19] значение или патруль этот заголовок означает что следует предоставить данные запросе а при условии что были переданы cookie что мы доверяем которые пришли вот таким вот образом


[07:19 - 07:36] вот так так так функционирует а для особых запросов типа плут


[07:36 - 07:52] останутся несколько сложнее для агента по запросов а она попросит вас выглядит так и для обработки course а можно сделать небольшой деканата которое прощает работ


[07:52 - 08:07] прежде чем прежде чем использовать курсы включать его везде нужно подумать о том что на самом деле а ограничение введено не просто так


Step 4 (S-44896) 5.png

[08:07 - 08:23] и ограничение введено для поддержания безопасности поэтому он вообще не следует разрешать делать кроме на я запросы кому попало то есть идея добавлять звездочку


[08:23 - 08:42] на самом деле плохая хорошая практика является а проверка каждого заголовка region с при каждом запросе вы должны проверять если пришел заголовка region то либо нужно проверить что он заканчивается на правильный


[08:42 - 08:58] какой то суффикс либо просто проверять по списку доверенных что вы действительно доверяете а вашему партнеру а и вот теперь посмотрим пример декоратор этот декоратор добавляется


Step 4 (S-44896) 6.png

[08:58 - 09:15] любовь к любой вьюшки которая обрабатывает кросс доменное запрос ну таким образом hello course здесь какой то код вьюшки вью а


[09:15 - 09:34] что что то декоратор посмотрим а так нас интересует вот этот код который находится внутри во 1 им сходную получаем ответ а далее смотрим на наличие заголовка ориджен


[09:34 - 09:50] если у нас заголовка ориджен лет значит что происходит обычный аякс запрос то есть заголовка реже появляется только запрос если запроса о и же нет вы просто возвращаем ответ


[09:50 - 10:06] то есть очевидно что запрос нашего домена все хорошо заголовок ориджен есть заголовок ориджен есть а тогда мы берем специальную переменной из настроек white list


[10:06 - 10:23] а это мы придумали сами это список доверенных доменов и начинаем перебирать домена а если мы видим что заголовок ориджен заканчивается на какой то из разрешенных доменов


[10:23 - 10:39] то есть это фундамент а 1 из наших партнеров либо совпадает с нашим партнером случае мы понимаем что кросс доменный запрос нужно разрешить и добавляем заголовок


[10:39 - 10:57] алгоритм соответственно возвращаем response а в принципе этого декоратора есть 1 недостаток мы сначала выполняем запрос а потом показываю браузеру следует ли показывать результаты можно сделать


[10:57 - 11:14] даже даже более серьезную защиту то есть не просто а не показывать результаты сначала проверять заголовок ориджен только потом вызывать код вьюшки а это будет даже правильней сказать


[11:14 - 11:29] ок так или иначе с помощью технологий course мы можем выборочно разрешить кросс доменный запроса и а тем самым предоставить свое api для клиентской части других


[11:29 - 11:42] веб приложений курс она очень популярна при реализации разного рода виджетов а и называемого на фронтэнде