Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CORS 
http://cors.kojo.ru 
Константин Якушев 
MoscowJS14, 28.08.2014
http://api.ya.ru
http://api.ya.ru
http://api.ya.ru 
http://m.ya.ru?
function Fetch() 
{ 
varUrl= "http://api.ya.ru/"; 
varxhr= new XMLHttpRequest(); 
xhr.onreadystatechange= ProcessResponse;...
function Fetch() 
{ 
varUrl= "http://api.ya.ru/"; 
$.get(Url, ProcessResponse); 
}
http://api.ya.ru 
http://m.ya.ru 
http://api.ya.ru/m
http://api.ya.ru 
http://m.ya.ru 
http://m.ya.ru/api 
nginx
http://api.ya.ru 
http://m.ya.ru 
http://m.ya.ru/api 
nginx 
http://127.0.0.1 
http://127.0.0.1/api 
local nginx
browser 
api.ya.ru 
without 
CORS 
XHR 
m.ya.ru
browser 
GET /data 
api.ya.ru 
without 
CORS 
XHR 
m.ya.ru
browser 
GET /data 
api.ya.ru 
without 
CORS 
GET /data 
Origin: http://m.ya.ru 
XHR 
m.ya.ru
browser 
GET /data 
api.ya.ru 
without 
CORS 
GET /data 
Origin: http://m.ya.ru 
<Content> 
XHR 
m.ya.ru
browser 
GET /data 
api.ya.ru 
without 
CORS 
GET /data 
Origin: http://m.ya.ru 
<Content> 
ERROR 
XHR 
m.ya.ru
header("Access-Control-Allow-Origin: *");
Access-Control-Allow-Origin: * 
Access-Control-Allow-Origin: http://ya.ru 
Access-Control-Allow-Origin: nullAccess-Control...
browser 
XHR 
m.ya.ru 
api.ya.ru 
with 
CORS
browser 
XHR 
m.ya.ru 
GET /data 
api.ya.ru 
with 
CORS
browser 
XHR 
m.ya.ru 
GET /data 
GET /data 
Origin: http://m.ya.ru 
api.ya.ru 
with 
CORS
browser 
XHR 
m.ya.ru 
GET /data 
GET /data 
Origin: http://m.ya.ru 
Access-Control-Allow-Origin: * 
<Content> 
api.ya.ru ...
browser 
XHR 
m.ya.ru 
GET /data 
GET /data 
Origin: http://m.ya.ru 
Access-Control-Allow-Origin: * 
<Content> 
<Content> ...
browser 
XHR 
m.ya.ru 
api.ya.ru 
without 
CORS
browser 
POST/new 
XHR 
m.ya.ru 
api.ya.ru 
without 
CORS
browser 
POST/new 
OPTIONS /new 
Origin: http://m.ya.ru 
Access-Control-Request-Method: POST 
XHR 
m.ya.ru 
api.ya.ru 
wit...
browser 
POST/new 
OPTIONS /new 
Origin: http://m.ya.ru 
Access-Control-Request-Method: POST 
o_O 
XHR 
m.ya.ru 
api.ya.ru...
browser 
POST/new 
OPTIONS /new 
Origin: http://m.ya.ru 
Access-Control-Request-Method: POST 
o_O 
<ERROR> 
XHR 
m.ya.ru 
...
Access-Control-Allow-Methods: * 
Access-Control-Allow-Methods: POST 
Access-Control-Allow-Methods: DELETE 
Access-Control-...
header("Access-Control-Allow-Origin: *"); 
if(request_is_options()) { 
header("Access-Control-Allow-Methods: POST"); 
}
browser 
XHR 
m.ya.ru 
api.ya.ru 
with 
CORS
browser 
POST/new 
XHR 
m.ya.ru 
api.ya.ru 
with 
CORS
browser 
POST/new 
OPTIONS /new 
Origin: http://m.ya.ru 
Access-Control-Request-Method: POST 
XHR 
m.ya.ru 
api.ya.ru 
wit...
browser 
POST/new 
OPTIONS /new 
Origin: http://m.ya.ru 
Access-Control-Request-Method: POST 
Access-Control-Allow-Methods...
browser 
POST/new 
OPTIONS /new 
Origin: http://m.ya.ru 
Access-Control-Request-Method: POST 
Access-Control-Allow-Methods...
browser 
POST/new 
OPTIONS /new 
Origin: http://m.ya.ru 
Access-Control-Request-Method: POST 
Access-Control-Allow-Methods...
browser 
POST/new 
OPTIONS /new 
Origin: http://m.ya.ru 
Access-Control-Request-Method: POST 
Access-Control-Allow-Methods...
Access-Control-Allow-Headers: * 
Access-Control-Allow-Headers: x-header 
Access-Control-Allow-Headers: x-smpl 
Access-Cont...
Access-Control-Expose-Headers: * 
Access-Control-Expose-Headers: x-header 
Access-Control-Expose-Headers: x-smpl 
Access-C...
function Add() 
{ 
varUrl= "http://api.ya.ru/new"; 
$.ajax({ 
url: Url, 
data: { name:'foo' }, 
type: 'POST', 
xhrFields: ...
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: *"); 
header("Access-Control-Allow-Credentials: true"); 
if(request_is_options()) { 
...
header("Access-Control-Allow-Origin: *"); 
header("Access-Control-Allow-Credentials: true"); 
if(request_is_options()) { 
...
header("Access-Control-Allow-Origin: http://m.ya.ru"); 
header("Access-Control-Allow-Credentials: true"); 
if(request_is_o...
8+ 
10+
http://cors.kojo.ru 
Константин Якушев 
kojo@kojo.ru 
MoscowJS14, 28.08.2014
Бонус-трэк! XSRF и JSONP
<html><head> 
<script src="http://ya.ru/?script"></script> 
<link rel="stylesheet" href="http://ya.ru/?css"> 
</head> 
<bo...
<script type="text/javascript"> 
function parseQuote(response) 
{alert(response);} 
</script> 
<script type="text/javascri...
http://cors.kojo.ru 
Константин Якушев 
kojo@kojo.ru 
MoscowJS14, 28.08.2014
CORS для тестирования и для жизни. Константин Якушев. MoscowJS 14
CORS для тестирования и для жизни. Константин Якушев. MoscowJS 14
CORS для тестирования и для жизни. Константин Якушев. MoscowJS 14
CORS для тестирования и для жизни. Константин Якушев. MoscowJS 14
CORS для тестирования и для жизни. Константин Якушев. MoscowJS 14
CORS для тестирования и для жизни. Константин Якушев. MoscowJS 14
CORS для тестирования и для жизни. Константин Якушев. MoscowJS 14
CORS для тестирования и для жизни. Константин Якушев. MoscowJS 14
Upcoming SlideShare
Loading in …5
×

CORS для тестирования и для жизни. Константин Якушев. MoscowJS 14

Видео: http://youtu.be/SgFJJBa0AH8

  • Login to see the comments

CORS для тестирования и для жизни. Константин Якушев. MoscowJS 14

  1. 1. CORS http://cors.kojo.ru Константин Якушев MoscowJS14, 28.08.2014
  2. 2. http://api.ya.ru
  3. 3. http://api.ya.ru
  4. 4. http://api.ya.ru http://m.ya.ru?
  5. 5. function Fetch() { varUrl= "http://api.ya.ru/"; varxhr= new XMLHttpRequest(); xhr.onreadystatechange= ProcessResponse; xhr.open("GET", Url); xhr.send(null); }
  6. 6. function Fetch() { varUrl= "http://api.ya.ru/"; $.get(Url, ProcessResponse); }
  7. 7. http://api.ya.ru http://m.ya.ru http://api.ya.ru/m
  8. 8. http://api.ya.ru http://m.ya.ru http://m.ya.ru/api nginx
  9. 9. http://api.ya.ru http://m.ya.ru http://m.ya.ru/api nginx http://127.0.0.1 http://127.0.0.1/api local nginx
  10. 10. browser api.ya.ru without CORS XHR m.ya.ru
  11. 11. browser GET /data api.ya.ru without CORS XHR m.ya.ru
  12. 12. browser GET /data api.ya.ru without CORS GET /data Origin: http://m.ya.ru XHR m.ya.ru
  13. 13. browser GET /data api.ya.ru without CORS GET /data Origin: http://m.ya.ru <Content> XHR m.ya.ru
  14. 14. browser GET /data api.ya.ru without CORS GET /data Origin: http://m.ya.ru <Content> ERROR XHR m.ya.ru
  15. 15. header("Access-Control-Allow-Origin: *");
  16. 16. Access-Control-Allow-Origin: * Access-Control-Allow-Origin: http://ya.ru Access-Control-Allow-Origin: nullAccess-Control-Allow-Origin:ya.ru, www.ruAccess-Control-Allow-Origin:http://*.ya.ru
  17. 17. browser XHR m.ya.ru api.ya.ru with CORS
  18. 18. browser XHR m.ya.ru GET /data api.ya.ru with CORS
  19. 19. browser XHR m.ya.ru GET /data GET /data Origin: http://m.ya.ru api.ya.ru with CORS
  20. 20. browser XHR m.ya.ru GET /data GET /data Origin: http://m.ya.ru Access-Control-Allow-Origin: * <Content> api.ya.ru with CORS
  21. 21. browser XHR m.ya.ru GET /data GET /data Origin: http://m.ya.ru Access-Control-Allow-Origin: * <Content> <Content> api.ya.ru with CORS
  22. 22. browser XHR m.ya.ru api.ya.ru without CORS
  23. 23. browser POST/new XHR m.ya.ru api.ya.ru without CORS
  24. 24. browser POST/new OPTIONS /new Origin: http://m.ya.ru Access-Control-Request-Method: POST XHR m.ya.ru api.ya.ru without CORS
  25. 25. browser POST/new OPTIONS /new Origin: http://m.ya.ru Access-Control-Request-Method: POST o_O XHR m.ya.ru api.ya.ru without CORS
  26. 26. browser POST/new OPTIONS /new Origin: http://m.ya.ru Access-Control-Request-Method: POST o_O <ERROR> XHR m.ya.ru api.ya.ru without CORS
  27. 27. Access-Control-Allow-Methods: * Access-Control-Allow-Methods: POST Access-Control-Allow-Methods: DELETE Access-Control-Allow-Methods:POST, PUTAccess-Control-Allow-Methods:P*
  28. 28. header("Access-Control-Allow-Origin: *"); if(request_is_options()) { header("Access-Control-Allow-Methods: POST"); }
  29. 29. browser XHR m.ya.ru api.ya.ru with CORS
  30. 30. browser POST/new XHR m.ya.ru api.ya.ru with CORS
  31. 31. browser POST/new OPTIONS /new Origin: http://m.ya.ru Access-Control-Request-Method: POST XHR m.ya.ru api.ya.ru with CORS
  32. 32. browser POST/new OPTIONS /new Origin: http://m.ya.ru Access-Control-Request-Method: POST Access-Control-Allow-Methods: POST XHR m.ya.ru api.ya.ru with CORS
  33. 33. browser POST/new OPTIONS /new Origin: http://m.ya.ru Access-Control-Request-Method: POST Access-Control-Allow-Methods: POST POST/new XHR m.ya.ru api.ya.ru with CORS
  34. 34. browser POST/new OPTIONS /new Origin: http://m.ya.ru Access-Control-Request-Method: POST Access-Control-Allow-Methods: POST POST/new <POST result> XHR m.ya.ru api.ya.ru with CORS
  35. 35. browser POST/new OPTIONS /new Origin: http://m.ya.ru Access-Control-Request-Method: POST Access-Control-Allow-Methods: POST POST/new <POST result> <POST result> XHR m.ya.ru api.ya.ru with CORS
  36. 36. Access-Control-Allow-Headers: * Access-Control-Allow-Headers: x-header Access-Control-Allow-Headers: x-smpl Access-Control-Allow-Headers:x-he, x-smplAccess-Control-Allow-Headers:x-*
  37. 37. Access-Control-Expose-Headers: * Access-Control-Expose-Headers: x-header Access-Control-Expose-Headers: x-smpl Access-Control-Expose-Headers:x-he, x-smplAccess-Control-Expose-Headers:x-*
  38. 38. function Add() { varUrl= "http://api.ya.ru/new"; $.ajax({ url: Url, data: { name:'foo' }, type: 'POST', xhrFields: { withCredentials: true }); }
  39. 39. header("Access-Control-Allow-Credentials: true");
  40. 40. header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Credentials: true"); if(request_is_options()) { header("Access-Control-Allow-Methods: POST"); }
  41. 41. header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Credentials: true"); if(request_is_options()) { header("Access-Control-Allow-Methods: POST"); }
  42. 42. header("Access-Control-Allow-Origin: http://m.ya.ru"); header("Access-Control-Allow-Credentials: true"); if(request_is_options()) { header("Access-Control-Allow-Methods: POST"); }
  43. 43. 8+ 10+
  44. 44. http://cors.kojo.ru Константин Якушев kojo@kojo.ru MoscowJS14, 28.08.2014
  45. 45. Бонус-трэк! XSRF и JSONP
  46. 46. <html><head> <script src="http://ya.ru/?script"></script> <link rel="stylesheet" href="http://ya.ru/?css"> </head> <body> <imgsrc="http://ya.ru/?img"> <form action="http://ya.ru/" method="get"> <input type="text" name="test"> <input type="submit"> </form> </body></html>
  47. 47. <script type="text/javascript"> function parseQuote(response) {alert(response);} </script> <script type="text/javascript" src="http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote" ></script> Response: parseQuote({"quoteText":"Text", "quoteAuthor":"Author"})
  48. 48. http://cors.kojo.ru Константин Якушев kojo@kojo.ru MoscowJS14, 28.08.2014

×