HTTP CORS

교차 출처 리소스 공유 (CORS)

• Cross-Origin Resource Sharing
• 추가 HTTP 헤더를 사용해, 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
• 기본적으로 브라우저는 교차 출처 HTTP 요청을 제한
  • SOP(Same-Origin Policy) - 동일 출처 정책

사용 사례

• XMLHttpRequest, Fetch API
• 웹 폰트
• WebGL
• drawImage()를 사용해 캔버스에 그린 이미지/비디오 프레임
• 이미지로부터 추출하는 CSS Shapes

개요

1. HTTP 헤더 추가
2. OPTIONS 메소드로 preflight 요청
3. 승인 시 실제 요청 전송 / 서버는 클라이언트에게 인증정보를 요구할 수 있음

시나리오

단순 요청 (Simple requests)

• preflight 트리거하지 않음
• 조건이 까다로워 거의 발생하지 않음
• 클라이언트 헤더에 Origin을 넣어 어디로부터 요청이 왔는지 서버가 확인 후 서버는 Access-Control-Allow-Origin 헤더를 전송

조건

1. GET, HEAD, POST 중 하나의 메소드
2. 자동 설정 헤더 (Accept, Accept-Language, Content-Language 등..)만 있어야 함
3. Content-Type 헤더에는 application/x-www-form-urlencoded, multipart/form-data, text/plain만 가능

프리플라이트 (preflight)

• OPTIONS 메소드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인
• Access-Control-* 에 본 요청에 사용될 도메인, 메소드, 헤더 등을 알려줘 서버에서 일치 여부를 확인
  • ex / Access-Control-Request-Method: POST
• 요청에 사용자 헤더인 인증토큰이 들어가지 않기 때문에 별도로 서버에서 OPTIONS 메소드를 분기 처리 해주어야 함
• preflight 이후 리다이렉트를 모든 브라우저에서 지원하지 않기 때문에, 리다이렉트를 방지하는 코드를 서버에 넣어주거나 simple request가 되도록 코드를 변경해 사용할 수 있음

인증 정보를 포함한 요청

• credentialed request
• 기본적으로 브라우저 호출 API는 인증 정보를 보내주지 않기 때문에 withCredentials: true 플래그를 추가 해야 함 / 이를 통해 스크립트로 쿠키에 직접 접근하는 경우를 방지하며, 서버에서도 헤더에 Access-Control-Allow-Credentials: true를 설정해야 함
• 이 때 Access-Control-Allow-Origin는 와일드카드(*)가 아니어야 함

출처: MDN