[HTTP] Cross Origin Resource Sharing, CORS

최신 브라우저의 대부분은 헤더와 CORS 정책을 적용한다.

따라서, CORS 문제는 어디에서나 발생할 수 있는 문제 중 하나이다.

따라서, CORS 표준을 맞추려면 모든 개발자 혹은 관리자가 알고 있어야하는 개념이다.

CORS

CORS란 현재 IP가 아닌 다른 IP로 리소스를 요청하는 구조로 일단 간단하게 알아두자.

CORS에 대해 이해하려면 다음 3가지를 알아야하며 이 3가지에 관하여 설명할 것이다.

1. Origin(Cross Origin VS Same Origin)
2. SOP
3. Access-Control-Allow-Origin

위 3가지는 모두 CORS에 관련된 것들이다.

1. Origin

Origin은 요청이 시작된 서버의 위치를 나타내는 문구이다.

만약, Naver 로그인 서버로 로그인 요청을 한다고 가정하면 다음과 같은 그림이 된다.

여기서 서버 IP는 2개가 존재한다.

1. Client 서버(Chrome 등)
2. 로그인 API 서버(Naver 등)

이 2개의 IP는 서로 다른 IP의 번호를 갖고 있게 된다.

 

여기서 Client 서버는 http://client:80 이라고 하고 로그인 서버는 http:/login:3000이라고 해보자.

 

이때, Client 서버와 로그인 서버는 IP가 다르다.
따라서, Client 서버가 로그인 서버에게 HTTP 요청을 보낼 때 Origin이 다르다라고 한다.

이는 곧, Cross Origin이 된다.

만약, 로그인 서버가 내부 통신을 해서 서버 내 데이터를 가져온다면 그것은 Same Origin이다.

그럼 Origin을 구분하는 방법은 무엇일까?

Origin은 3가지로 구분된다.

1. 스키마
2. HOST
3. Port

예로, https://hdbstn3055.tistory:80 이라는 경로가 있다면 여기에는 스키마, HOST, Port가 전부 포함되어 있다.

• https://hdbstn3055.tistory:80/12
• https://hdbstn3055.tistory:80/manage
• https://hdbstn3055.tistory:80/manage/newpost

위 3가지 주소는 모두 Origin이 같다고 할 수 있다.

2. SOP는 뭘까?

SOP는 Same Origin Policy를 뜻한다.

Same Origin Policy란, 2011년에 RFC 6454에서 등장한 보안 정책이다.

 

이는 동일한 출처의 Origin만 리소스를 공유할 수 있다는 것을 의미한다.

 

사실상 이 SOP 때문에 CORS 문제에 직면한다고 한다.

 

위 SOP 표준에 따라야지 XSS, CSRF라는 보안상의 Issue를 막을 수 있다.

(XSS, CSRF는 다음에 다루겠다.)

3. Access-Control-Allow-Origin

우리는 이 Access-Control-Allow-Origin을 활용하여 CORS 문제를 해결할 수 있다.

위에서 언급하였듯 SOP 정책에 의하면 같은 Origin의 자원만 공유 가능하다고 했다.

그럼 다른 Origin에서 자원 이용을 못하는 것 아닌가?

 

SOP를 빼고 생각해보자.

 

웹에서는 다른 리소스의 공유를 수도 없이 많이 한다.

하지만, 위의 말대로 자원 공유를 하지 못한다면 SOP는 사라지지 않았을까?

 

따라서, SOP를 유지하돼 서로 다른 리소스끼리의 자원 공유를 가능하게 해준 것이 Access-Control-Allow-Origin이다.

그래서 결론적으로 CORS는 어떻게 동작시키냐

Cross Origin에서 자원을 요청하게 위해서는 다음과 같은 과정을 거친다.

1. HTTP 통신 헤더인 Origin 헤더에 요청을 보내는 곳의 정보를 담아 서버로 요청을 보낸다.
2. 이후 서버는 Access-Control-Allow-Origin 헤더에 허용된 Origin이라는 정보를 담아 보낸다.
3. 클라이언트는 헤더의 값과 비교해 정상 응답임을 확인하고 지정된 요청을 보낸다.
4. 서버는 요청을 수행한 뒤 적절한 HTTP 상태 코드를 반환한다.

실제로 서버에서도 관련 CORS 설정을 해주어야 동작이 가능하며,

프론트 관점에서도 설정이 필요하다.

 

 

참고 블로그

https://wonit.tistory.com/307

[HTTP] Cross Origin Resource Sharing, CORS란?