AJAX - 크로스도메인 보안 이슈와 해결책

동일 출처 정책(SOP)

한 출처(Origin)에서 로드 된 문서나 스크립트가 다른 출처의 자원과 상호작용하지 못하도록 제한하는 정책입니다.

동일 출처를 판단하는 기준은 프로토콜(protocol), 호스트(host), 포트(port) 가 같으냐 입니다.

이는 쉽게 말해 웹페이지 스크립트는 해당 페이지와 동일한 서버에 있는 데이터만 Ajax 비동기 요청하여 처리할 수 있습니다.

이 정책은 초기에는 크로스 사이트 스크립팅이 해킹 이슈가 있기 때문에 보안을 위해 좋은 방법으로 생각되었으나, 

최근에는 여러 도메인에 걸쳐 구성되는 대규모 웹 프로젝트가 늘어나고 REST API 등을 이용한 외부 호출이 많아지는 상황이라 서비스 개발에 걸림돌이 되었습니다.

해결책1) CORS. 서버 개발단 해결책

이에 추가로 만들어진 정책이 Cross-Origin Resource Sharing 입니다. 이 정책의 특징은 서버에서 외부 요청을 허용할 경우 Ajax 요청이 가능해집니다. 

즉, 쉽게 말해 API 서버에서 CORS를 통해 허용된 외부 도메인에서 접근할 수 있도록 만들어 줍니다.

원리는 B 서버개발자가 해당 외부 도메인에 CORS 설정을 하고, A 서버의 javascript code에서 ajax통신을 요청하면 b에 실제 요청이 아닌 preflight request를 먼저 수행합니다.

이때, B는 A 서버의 도메인이 접근 허용 권한이 있는지 확인하고, 있다면 실제 통신요청/응답을 주고 받습니다.

해결책2) chrome브라우저 allow-control-allow-irigin 플러그인 설치

chrome 웹 브라우저에서 발생한 모든 HTTP요청을 가로채서 응답에 헤더(Header)를 추가해주는 플러그인.

즉, 크롬 개발자도구 network탭에 xhr받은 부분을 보면 response Headers에 Access-Control-Allow-Origin : * 을 추가해 준 것이다.

해결책3) JSONP방식으로 요청

JSON width Padding 방식의 요청인 일반적인 Ajax 요청과 다릅니다. Ajax의 데이터 타입 요청이 아닌, <script> 호출 방식으로 요청합니다.

<script>로 요청되는 호출은 보안 정책이 적용되지 않는다는 점을 이용한 우회 방법입니다.

단점은 리소스 파일을 GET메서드로 읽어오기 때문에 GET 방식의 API만 요청이 가능합니다.

해결책4) crossorigin.me 사이트

무료로 CORS를 이용할 수 있는 프록시 서비스를 제공.

사용방법은 url 시작 부분에 http://crossorigin.me를 추가.

단, 실제 사이트 배포시 서비스의 안정성을 보장할 수 없으므로 개발 과정에서만 임시 사용합니다.

파일 크기는 2MB로 제한됩니다. 보다 큰 용량의 파일에 접근할 경우 413 오류가 발생합니다.

GET 요청만 지원합니다. 향후 POST, PUT 요청을 지원할 예정..

중요한 정보를 전송할 경우, 사용하지 말아야 합니다.