[네트워크] CORS란?

CORS(Cross Origin Resource Sharing, 교차 출처 리소스 공유)란?

---

• Ajax에는 SOP가 있어 현재 브라우져에 보여지고 있는 HTML을 내려준 웹서버에만 Ajax 요청을 보낼 수 있음
• 추가적인 HTTP header를 사용해서 애플리케이션이 다른 origin의 리소스에 접근할 수 있도록 하는 메커니즘(브라우저에 알려줌)
• 웹 서버에게 보안 cross-domain 데이터 전송을 활성화하는 cross-domain 접근 제어권을 부여
• HTML5 에서 다른 도메인 간 통신이 가능하도록 추가된 기능

배경

---

• 처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청될 경우 해당 리소스는 cross-origin HTTP로 요청
  (www.abc.com 과 www.qwe.com 사이의 요청은 CORS 정책 위반)
• 보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한
  (타 사이트에서 세션을 요청 후 세션을 획득한다면 해당 사이트는 악의적으로 내 세션을 탈취, 악용할 수 있음, 피싱사이트 등)
• 예를들어 도메인 이름이 서로 다른 사이트간에 api요청을 할 때 필요
• 요청을 보내기 위해서는 요청을 보내고자 하는 대상과 프로토콜도 같아야 하고, 포트도 같아야 함
• CORS는 타 도메인 간에 자원을 공유할 수 있게 해주는 것

과정

---

내 origin은 무엇이고 어떤 메소드를 사용해서 요청을 할 것이고 어떤 헤더들을 포함할 것인지 등 내용을 추가 헤더에 담아 서버에 전송

• CORS 요청 시에는 미리 HTTP 메소드 중 OPTIONS 메소드로 서버가 CORS를 허용하는지 질의(preflight요청), 요청이 가능하다면 actual request를 보냄
  (특정 조건에서는 preflight 없이 simple request로 요청하기도 함, CORS 설정이 없는 서버를 위해 preflight요청을 함, 예를 들어 delete를 cors 설정 없는 서버에 요청하는 경우 이미 지우고 cors 에러를 반환하기 때문에 안 됨)
• 특정 HTTP 헤더를 추가함으로써 동작(Access-Control-Request-Method, Headers로, Credentials, Origin 등)
• Allow 항목들은 Request에 대응되는 것으로, 서버가 method , 허용하는 헤더, 쿠키 허용여부 등 응답하는데 사용
• Request랑 Allow가 일치하면 CORS 요청 달성
• Credentialed Request : 좀 더 보안을 강화한 인증된 요청 방식, HTTP Cookie와 HTTP Authentication 정보를 인식할 수 있게 해주는 요청

preflight 없이 Simple Request 조건

• GET, HEAD, POST (Content-type 이 application/x-www-form-urlencoded, multipart/form-data, text/plain 인 경우) 메서드 를 사용
• custom header 를 추가하지 않는 경우

기타

---

• SOP : same origin policy, 다른 출처의 리소스를 사용하는 것에 대한 보안 방식, 출처(protocol, host, port = http://localhost:80)
• 교차 출처 리소스 공유 (CORS) 참고 링크

AJAX

• HTTP 메시지로 통신, 요청을 보내는 주체가 브라우저가 아닌 자바스크립트, 프로그램이 서버와 통신
• 응답 결과로 받은 내용에 대해 브라우저가 전체 페이지를 다시 그리는 것이 아니라 자바스크립트가 웹 페이지 특정 부분에만 응답받은 내용이 갱신되도록 처리
• ex) 구글 검색의 입력 필드에서 자동완성으로 검색어 추천할 때