[CS] CORS

---

알고있으면 좋은 Computer Science Tip✨

---

CORS란 무엇인가?

• CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다.
• 쉽게 말해, 교차되는 출처 자원들의 공유이다. 다른 출처에 있는 자원을 요청하는 경우, 이를 교차 출처 요청이라고 부른다. 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

 

(1) CORS가 필요한 이유

• CORS가 없이 모든 곳에서 데이터를 요청할 수 있게 된다면, 다른 사이트에서 원래 사이트를 흉내낼 수 있게 된다. 만약 기존 사이트와 완전히 동일하게 동작하도록 하여 사용자가 로그인을 하도록 하고, 로그인했던 세션 또는 토큰을 탈취하여 악의적으로 정보를 꺼내오거나 다른 사용자의 정보를 입력하는 등 해킹을 할 수 있다. 하지만 이런 공격을 할 수 없도록 브라우저에서 보호하고, 필요한 경우에만 서버와 협의하여 요청할 수 있도록 하기 위해서 필요한 것이다.

 

(2) CORS 동작 방법

• Simple requests인 경우
  1. 서버로 요청한다.
  2. 서버의 응답이 왔을 때 브라우저가 요청한 Origin과 응답한 헤더 Access-Control-Request-Headers의 값을 비교하여 유효한 요청이라면 리소스를 응답한다.
  3. 만약 유효하지 않은 요청이라면 브라우저에서 이를 막고 에러가 발생한다.
• preflight 요청일 경우
  1. Origin헤더에 현재 요청하는 origin과, Access-Control-Request-Method헤더에 요청하는 HTTP method와 Access-Control-Request-Headers요청 시 사용할 헤더를 OPTIONS 메서드로 서버로 요청하며, 이때 내용물은 없이 헤더만 전송한다.
  2. 브라우저가 서버에서 응답한 헤더를 보고 유효한 요청인지 확인하고, 만약 유효하지 않은 요청이라면 요청은 중단되고 에러가 발생한다. 만약 유효한 요청이라면 원래 요청으로 보내려던 요청을 다시 요청하여 리소스를 응답받는다.

 

(3) 요청 헤더 목록

• Origin
• Access-Control-Request-Method
  1. preflight 요청을 할 때 실제 요청에서 어떤 메서드를 사용할 것인지 서버에게 알리기 위해 사용된다.
• Access-Control-Request-Headers
  1. preflight요청을 할 때 실제 요청에서 어떤 header를 사용할 것인지 서버에게 알리기 위해 사용된다.

 

(4) 응답 헤더 목록

• Access-Control-Allow-Origin
  1. 브라우저가 해당 origin이 자원에 접근할 수 있도록 허용한다.
  2. 혹은 *은 credentials이 없는 요청에 한해서 모든 origin에서 접근이 가능하도록 허용한다.
• Access-Control-Expose-Headers
  1. 브라우저가 액세스할 수 있는 서버 화이트리스트 헤더를 허용한다.
• Access-Control-Max-Age
  1. 얼마나 오랫동안 preflight요청이 캐싱 될 수 있는지를 나타낸다.
• Access-Control-Allow-Credentials
  1. Credentials가 true 일 때 요청에 대한 응답이 노출될 수 있는지를 나타낸다.
  2. preflight요청에 대한 응답의 일부로 사용되는 경우 실제 자격 증명을 사용하여 실제 요청을 수행할 수 있는지를 나타낸다.
• Access-Control-Allow-Methods
  1. preflight`요청에 대한 대한 응답으로 허용되는 메서드들을 나타낸다.
• Access-Control-Allow-Headers
  1. preflight요청에 대한 대한 응답으로 실제 요청 시 사용할 수 있는 HTTP 헤더를 나타낸다.

 

(5) CORS에 대처하는 방법과 우회하는 방법

• 외부 서버로 ajax 요청이 안될 경우 아래와 같은 단계로 처리를 생각해 볼 수 있다.
  1. 개발자가 테스트 혹은 개발단계에서 쉽게 요청하기
     • 웹 브라우저 실행 옵션이나 플러그인을 통한 동일 출처 정책 회피
  2. CORS구현이 안되어 있는 서버로 ajax요청을 해야하지만 서버 쪽 컨트롤이 불가능할 경우
     • jsonp방식으로 요청
  3. Ajax요청을 해야 하는 다른 도메인의 서버를 클라이언트와 같이 개발하거나 서버 개발 쪽 수정 요청이 가능한 경우
     • 서버에서 CORS 요청이 허용되도록 구현

 

⭐용어 공부⭐

(1) Simple requests

• GET이나 POST 등 일정 조건에 요청들에 대해 사용된다. 기본적으로 웹은 다른 출처의 리소스를 요청할 때는 HTTP 프로토콜을 사용하여 요청을 하는데, 이때 브라우저는 요청 헤더에 Origin 필드에 요청을 보내는 출처를 담아 전송한다.

 

(2) preflight

• Simple requests가 아닌 cross-origin요청은 모두 preflight 요청을 하게 되는데, 실제 요청을 보내는 것이 안전한지 확인하기 위해 먼저 OPTIONS 메서드를 사용하여 cross-origin HTTP 요청을 보낸다. 이렇게 하는 이유는 사용자 데이터에 영향을 미칠 수 있는 요청이므로 사전에 확인 후 본 요청을 보내기 위해서이다.

 

(3) 동일출처정책

• 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이며, 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여준다.

 

(4) jsonp방식

• 웹 브라우저에서 css나 js 같은 리소스 파일들은 동일 출처 정책에 영향을 받지 않고 로딩이 가능하며, 이런 점을 응용해서 외부 서버에서 읽어온 js 파일을 json으로 바꿔주는 일종의 편법적인 방법이다. 단점은 리소스 파일을 GET 메서드로 읽어오기 때문에 GET 방식의 API만 요청이 가능하다.