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

1. CORS
http://cors.kojo.ru
Константин Якушев
MoscowJS14, 28.08.2014

4. http://api.ya.ru

5. http://api.ya.ru

6. http://api.ya.ru
http://m.ya.ru?

7. function Fetch()
{
varUrl= "http://api.ya.ru/";
varxhr= new XMLHttpRequest();
xhr.onreadystatechange= ProcessResponse;
xhr.open("GET", Url);
xhr.send(null);
}

8. function Fetch()
{
varUrl= "http://api.ya.ru/";
$.get(Url, ProcessResponse);
}

11. http://api.ya.ru
http://m.ya.ru
http://api.ya.ru/m

12. http://api.ya.ru
http://m.ya.ru
http://m.ya.ru/api
nginx

13. 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

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

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

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

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

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

21. header("Access-Control-Allow-Origin: *");

22. 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

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

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

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

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

27. 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

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

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

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

31. 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

32. 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

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

34. header("Access-Control-Allow-Origin: *");
if(request_is_options()) {
header("Access-Control-Allow-Methods: POST");
}

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

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

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

38. 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

39. 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

40. 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

41. 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

42. 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-*

43. 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-*

44. function Add()
{
varUrl= "http://api.ya.ru/new";
$.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: http://m.ya.ru");
header("Access-Control-Allow-Credentials: true");
if(request_is_options()) {
header("Access-Control-Allow-Methods: POST");
}

50. 8+
10+

51. http://cors.kojo.ru
Константин Якушев
kojo@kojo.ru
MoscowJS14, 28.08.2014

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

53. <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>

55. <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"})

56. http://cors.kojo.ru
Константин Якушев
kojo@kojo.ru
MoscowJS14, 28.08.2014