CORS. Константин Якушев MoscowJS 14,

Size: px

Start display at page:

Download "CORS. Константин Якушев MoscowJS 14,"

Madlyn Oliver
5 years ago
Views:

1 CORS Константин Якушев MoscowJS 14,

7 function Fetch() { var Url = " var xhr = new XMLHttpRequest(); xhr.onreadystatechange = ProcessResponse; } xhr.open("get", Url); xhr.send(null);

8 function Fetch() { var Url = " $.get(url, ProcessResponse); }

12 nginx

13 nginx local nginx

16 XHR m.ya.ru api.ya.ru without CORS browser

17 XHR m.ya.ru GET /data api.ya.ru without CORS browser

18 XHR m.ya.ru GET /data GET /data Origin: api.ya.ru without CORS browser

19 XHR m.ya.ru GET /data GET /data Origin: <Content> api.ya.ru without CORS browser

20 XHR m.ya.ru GET /data ERROR GET /data Origin: <Content> api.ya.ru without CORS browser

21 header("access-control-allow-origin: *");

22 Access-Control-Allow-Origin: * Access-Control-Allow-Origin: Access-Control-Allow-Origin: null Access-Control-Allow-Origin: ya.ru, Access-Control-Allow-Origin:

23 XHR m.ya.ru api.ya.ru with CORS browser

24 XHR m.ya.ru GET /data api.ya.ru with CORS browser

25 XHR m.ya.ru GET /data GET /data Origin: api.ya.ru with CORS browser

26 XHR m.ya.ru GET /data GET /data Origin: Access-Control-Allow-Origin: * <Content> api.ya.ru with CORS browser

27 XHR m.ya.ru GET /data <Content> GET /data Origin: Access-Control-Allow-Origin: * <Content> api.ya.ru with CORS browser

28 XHR m.ya.ru api.ya.ru without CORS browser

29 XHR m.ya.ru POST /new api.ya.ru without CORS browser

30 XHR m.ya.ru POST /new OPTIONS /new Origin: Access-Control-Request-Method: POST api.ya.ru without CORS browser

31 XHR m.ya.ru POST /new OPTIONS /new Origin: Access-Control-Request-Method: POST o_o api.ya.ru without CORS browser

32 XHR m.ya.ru POST /new <ERROR> OPTIONS /new Origin: Access-Control-Request-Method: POST o_o api.ya.ru without CORS browser

33 Access-Control-Allow-Methods: * Access-Control-Allow-Methods: POST Access-Control-Allow-Methods: DELETE Access-Control-Allow-Methods: POST, PUT Access-Control-Allow-Methods: P*

34 header("access-control-allow-origin: *"); if(request_is_options()) { header("access-control-allow-methods: POST"); }

35 XHR m.ya.ru api.ya.ru with CORS browser

36 XHR m.ya.ru POST /new api.ya.ru with CORS browser

37 XHR m.ya.ru POST /new OPTIONS /new Origin: Access-Control-Request-Method: POST api.ya.ru with CORS browser

38 XHR m.ya.ru POST /new OPTIONS /new Origin: Access-Control-Request-Method: POST Access-Control-Allow-Methods: POST api.ya.ru with CORS browser

39 XHR m.ya.ru POST /new OPTIONS /new Origin: Access-Control-Request-Method: POST Access-Control-Allow-Methods: POST POST /new api.ya.ru with CORS browser

40 XHR m.ya.ru POST /new OPTIONS /new Origin: Access-Control-Request-Method: POST Access-Control-Allow-Methods: POST POST /new api.ya.ru with CORS browser <POST result>

41 XHR m.ya.ru POST /new <POST result> OPTIONS /new Origin: Access-Control-Request-Method: POST Access-Control-Allow-Methods: POST POST /new api.ya.ru with CORS browser <POST result>

42 Access-Control-Allow-Headers: * Access-Control-Allow-Headers: x-header Access-Control-Allow-Headers: x-smpl Access-Control-Allow-Headers: x-he, x-smpl Access-Control-Allow-Headers: x-*

43 Access-Control-Expose-Headers: * Access-Control-Expose-Headers: x-header Access-Control-Expose-Headers: x-smpl Access-Control-Expose-Headers: x-he, x-smpl Access-Control-Expose-Headers: x-*

44 function Add() { var Url = " $.ajax({ url: Url, data: { name:'foo' }, type: 'POST', xhrfields: { withcredentials: true }); }

45 header("access-control-allow-credentials: true");

46 header("access-control-allow-origin: *"); header("access-control-allow-credentials: true"); if(request_is_options()) { header("access-control-allow-methods: POST"); }

47 header("access-control-allow-origin: *"); header("access-control-allow-credentials: true"); if(request_is_options()) { header("access-control-allow-methods: POST"); }

48 header("access-control-allow-origin: header("access-control-allow-credentials: true"); if(request_is_options()) { header("access-control-allow-methods: POST"); }

50 8+ 10+

51 Константин Якушев MoscowJS 14,

52 Бонус-трэк! XSRF и JSONP

53 <html><head> <script src=" <link rel="stylesheet" href=" </head> <body> <img src=" <form action=" method="get"> <input type="text" name="test"> <input type="submit"> </form> </body></html>

55 <script type="text/javascript"> function parsequote(response) {alert(response);} </script> <script type="text/javascript" src=" hod=getquote&format=jsonp&jsonp=parsequote" ></script> Response: parsequote({"quotetext":"text", "quoteauthor":"author"})

56 Константин Якушев MoscowJS 14,

ajax1.html 1/2 lectures/7/src/ ajax1.html 2/2 lectures/7/src/

ajax1.html 1/2 lectures/7/src/ ajax1.html 2/2 lectures/7/src/ ajax1.html 1/2 3: ajax1.html 5: Gets stock quote from quote1.php via Ajax, displaying result with alert(). 6: 7: David J. Malan 8: Dan Armendariz 9: Computer Science E-75 10: Harvard Extension School 11: