Cross-origin resource sharing

AJAX를 너무 습관적으로 쓰다보니 이것이

Asynchronous JavaScript and XML

의 약자란 사실도 까먹고 있었다..;;

근본은 XML임에도 불구하고... 내부적으로 XMLHttpRequest 객체를 이용함에도 불구하고...

많이들..특히 jQuery를 이용한 ajax 호출에서는 JSON을 이용해서 통신을 한다.

JavaScript를 이용해 여러 페이지에 요청을 날리고 결과 받는게 전부터 이런저런 이슈가 됐었는데... iframe으로 다른 url 호출해놓고 javascript로 접근할때도 그렇고...

ajax에서도 same origin security policy 때문에 ajax로 동적 페이지를 만들어 mashup 하는게 번거로웠다.

mashup이 많이 퍼지면서인지.. JSONP라는 방법이 등장해서 우회하는 방법으로 이 문제를 해결하는 방법도 소개됐지만 근본적으로 꼼수일 뿐이고...

꽤 오래 전부터 근본적인 해결책으로써

Cross-origin resource sharing

이라는 방법이 소개되고 구현되어 있었다.

IE쪽에서 구현이 제대로 안되서 대중화가 덜됐던건지..뭐 그런데 워낙 모바일은 브라우져들이 좋아서 모바일에서는 문제가 없고, IE 7 이전이 지원 안되고 IE8~9는 이상한 제약조건과 함께 사용 가능하다.

간단히는 client측에서는 아래 해더를 넣어주고,(Origin 헤더는 아직 Draft인 듯)

 Origin: http://www.example-social-network.com

server 측에서는 처리 결과 response 헤더로 아래 헤더를 넣어준다.

 Access-Control-Allow-Origin: http://www.example-social-network.com

서버는 origin 헤더를 보고 white-list에 있는지 체크해주고
클라이언트(브라우져)는 access-control-allow-oring 헤더를 보고 접근 가능한 도메인인지 판단한다.

이렇게 서버에서 헤더를 넣어주면, 브라우져의 저 도메인으로 요청한 ajax 호출의 결과를 읽어와도 보안 제약을 받지 않게 되는 것이다.

흠.. http://whiteship.me/?p=13537 여기 가니 잘 설명되있네..