CORS와 해결방법

CORS

cors에 대해 알기 위해서는 먼저 sop에 대해 알아야 한다.

 

sop(same-origin policy)

sop는 동일 출처 정책으로도 부른다. 불러온 문서, 스트립트의 출처가 다르면 리소스와의 상호장용하는 것을 제한하는 중요한 보안 방식이다. sop는 해로울 수 있는 문서를 분리하여 공격받을 수 있는 경로를 줄여준다.

 

-출처의 정의

두 URL의 프로토콜, 포트(명시한 경우), 호스트가 모두 같아야 동일한 출처이다.

예를 들어서 http://store.company.com/dir/page.html과 출처를 비교하면

이런 결과가 나온다.

 

CORS(Cross-Origin Resource Sharing)

CORS는 교차 출처 리소스 공유라고도 하며, 추가 HTTP를 헤더를 사용해 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있도록 권한을 주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.

 

예를 들어 프론트엔드 https://domain-a.com가 서버 https:domain-a.com/data.json과 https:domain-b.com/data.json에 XMLHttpRequest를 사용해 요청하면 위 그림처럼 된다. 동일한 오리진에서는 항상 허용되고 다른 오리진에서는 즉 CORS 체제에서는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원한다. 이렇게 관리해야 위험을 완화할 수 있다.

 

해결 방법

1. Access-Control-Allow-Origin 설정

백엔드에서 Access-Control-Allow-Origin 헤더에 접근 권한을 설정할 수 있다. 모든 외부 출처에 접속을 할 수 있다. 하지만 이 방법은 보안측면에서 좋지 않다. 따라서 외부 출처를 하나하나 검토 후 허용하는 것이 좋다.

 

2. JSONP 설정

JSONP(JSON with Padding)은 다른 도메인에 접근할 수 있는 우회적인 방법이다. HTTP의 <script> 요소는 외부 출처에서 조회된 내용 실행을 허용하고 있다. 하지만 js에서는 허용하지 않기에 js에 문법 오류가 발생한다. 그렇기에 json 데이터를 콜백 함수로 감싸서 js 문법을 유효하게 만들어서 전달해야한다. 하지만 외부 API에서 콜백 함수를 제공하지 않으면 사용할 수 없다.

 

3. Proxy 설정

외부 도메인 서버에 접근할 때 외부 도메인 서버가 아닌 자신의 서버를 매개로 외부 서버에 요청하는 방식이다. 서버에서 요청할 대 브라우저의 규약인 CORS에 영향을 받지 않는다. 그렇기에 CORS 정책을 위반하지 않고 우회할 수 있다.