CORS review

CORS Platform Architecture Team

Eric Ahn 2015/03/18

배경

  브라우저에서 도메인이 다른 컨텐츠를 제한 - 2005/06

  XML style

<?access-control allow="*.roadrunner.edu *.acme.edu"?>

CORS?

  W3C�� Working�� Draft�� 17�� March�� 2009�� ~�� 사용하기�� 시작��

  CORS(Cross-Origin�� Resource�� Sharing)��

http://www.w3.org/TR/cors/��

  클라이언트(client-side)�� Web�� Application이�� foo.com�� 에�� 접근하고�� 있으면,�� 다른�� origin(abc.com)�� 으로�� 부터�� 데이타�� 검색이�� 제한됨.��

http://caniuse.com/#search=cors

Green : Supported

Header(Apache httpd)

ubuntu@ip-172-31-9-144:/var/www/html$ apache2 -v Server version: Apache/2.4.7 (Ubuntu) Server built: Mar 10 2015 13:05:59 $ vi /etc/apache2/sites-enabled/000-default.conf … Header set Access-Control-Allow-Origin "*” Header set Access-Control-Allow-Methods “GET, POST, PUT, DELETE, OPTIONS” Header set Access-Control-Allow-Headers ”content-type, *” …

Access-Control-Allow-Origin

Header set Access-Control-Allow-Origin "*” => credentials 없는 경우

Header set Access-Control-Allow-Origin ”http://foo.example”

origin

Access control scenarios

  Simple requests

preflighted requests

  Requests with credentials

Simple requests

  GET, HEAD, POST 만 사용

  POST   Data => server 로 send 하는 경우

  Content-Type   application/x-www-form-urlencoded, multipart/form-data, or text/

plain

Apache option ubuntu@ip-172-31-9-144:/var/www/html$ apache2 -v Server version: Apache/2.4.7 (Ubuntu) Server built: Mar 10 2015 13:05:59 $ vi /etc/apache2/sites-enabled/000-default.conf Header set Access-Control-Allow-Origin "*” Header set Access-Control-Allow-Headers "origin, content-type” Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Example : simple requests http://foo.example

1)  Request GET http://foo.example/data

2) Request GET http://bar.other/resources/public-data/

3) Response : [XML DATA]

http://bar.other

var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/public-data/'; function callOtherDomain() { if(invocation) { invocation.open('GET', url, true); invocation.onreadystatechange = handler; invocation.send(); } }

http://foo.example/data : Javascripts

http://foo.example/data

http://bar.other

GET /data HTTP/1.1 Host: foo.example


http://bar.other

HTTP/1.1 200 OK Date: Tue, 17 Mar 2015 08:32:12 GMT Server: Apache/2.4.7 (Ubuntu) Last-Modified: Tue, 17 Mar 2015 08:19:39 GMT Line-based text data: text/html


http://bar.other GET /resources/public-data/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 Accept: text/html,application/xhtml+xml,application/xml Referer: http://foo.example/data Origin: http://foo.example

Browser 가 Origin Header를 붙임


http://bar.other HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 00:23:53 GMT Server: Apache/2.4.7 (Ubuntu) Access-Control-Allow-Origin: * Access-Control-Allow-Headers: Content-type, * Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS Content-Type: application/xml [XML Data]

CORS 지원하지 않는 경우 http://foo.example/data

http://bar.other HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 00:23:53 GMT Server: Apache/2.4.7 (Ubuntu) Content-Type: application/xml [XML Data]

Preflighted requests

  OPTIONS method 사용 : request를 보내도 괜찮은지 체크   User data를 포함할 수도있기때문에…

  POST 경우, preflighted request 예   Content-type 이

  application/x-www-form-urlencoded, multipart/form-data, or text/plain 이 아닌 경우

  XML payload => server 로의 request   application/xml, text/xml

Example : Preflighted requests http://foo.example

1)  Request GET http://foo.example/data

2) Request PUT http://api.alice.com/cors

3) Response

http://api.alice.com

Javascripts : var url = ‘http://api.alice.com/cors’; var xhr = createCORSRequest(‘PUT’, url); xhr.setRequestHeader(‘X-Custom-Header’, ‘value’); xhr.send();

CORS 지원하는경우

OPTIONS /cors HTTP/1.1 Origin: http://api.bob.com Access-Control-Request-Method: PUT Access-Control-Request-Headers: X-Custom-Header Host: api.alice.com Accept-Language: en-US Connection: keep-alive HTTP/1.1 200 OK Access-Control-Allow-Origin: http://api.bob.com Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: X-Custom-Header Content-type : text/html

api.bob.com

CORS 지원하지 않는 경우

OPTIONS /cors HTTP/1.1 Origin: http://api.bob.com Access-Control-Request-Method: PUT Access-Control-Request-Headers: X-Custom-Header Host: api.alice.com Accept-Language: en-US Connection: keep-alive HTTP/1.1 200 OK Content-type : text/html

api.bob.com

Demo

http://ec2-54-153-14-199.us-west-1.compute.amazonaws.com

http://ec2-54-67-31-198.us-west-1.compute.amazonaws.com

CORS 설정 ( O )

CORS 설정 ( X )

CORS review

Internet

Transcript of CORS review