CORS

Cross-Origin Resource Sharing(CORS)

• 교차 출처 리소스 공유
• 브라우저에서 다른 출처의 리소스를 공유하는 방법

URL 구조

• Fragment
  • 리소스 자체의 다른 부분을 가리키는 앵커
  • 리소스 내에서 북마크의 한 종류
  • 보여주기 위한 방법을 나타내며 HTML 문서 상에서 브라우저는 앵커가 정의된 지점으로 스크롤된다

출처(Orgin)

• URL 구조에서 Protocol, Host, Port를 합친 것을 의미

같은 출처와 다른 출처

• https://test.domain.com/path1

URL 결과 이유

https://test.domain.com/path2	같은출처	Protocol, Host, Port 같음
https://test.domain.com/path3?k=v	같은출처	Protocol, Host, Port 같음
http://test.domain.com/path1	다른출처	Protocol 다름
http://test.domain.com:8080/path1	다른출처	Protocol, Port 다름
http://test.domain.com/path1	다른출처	Protocol, Host 다름

동일 출처 정책(SOP:Same-Origin Policy)이란?

• Postman으로 API를 테스트하거나, 다른 서버에서 API를 호출할 때는 멀쩡히 잘 동작하다가 브라우저에서 API를 호출할 때만 CORS policy 오류가 발생하는 경우가 있습니다
• 그 이유는 브라우저가 동일 출처 정책(Same-Origin Policy, SOP)를 지켜서 다른 출처의 리소스 접근을 금지하기 때문입니다
• 하지만 실제로 웹페이지는 상당히 자주 다른 출처의 리소스를 사용해야 합니다
• 예를 들어 test.domain.com 라는 도메인 주소를 사용하는 웹페이지에서 test.api.com 라는 API 서버로 데이터를 요청해서 화면을 그린다면 이 웹페이지는 동일 출처 정책을 위반한 것이 됩니다

동일 출처 정책의 장점

• 동일 출처 정책을 지키면 외부 리소스를 가져오지 못해 불편하지만, 동일 출처 정책은 XSS나 XSRF 등의 보안 취약점을 노린 공격을 방어할 수 있습니다
• 하지만 현실적으로는 외부 리소스를 참고하는 것은 필요하기 때문에 외부 리소스를 가져올 수 있는 방법이 존재해야 합니다
• 외부 리소스를 사용하기 위한 SOP의 예외 조항이 CORS입니다

CORS 해결 방법

• 서버에서 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보내는 방식으로 CORS 에러를 해결할 수 있습니다
• 프론트엔드 개발자가 CORS 에러를 확인했다면, 서버에 Access-Control-Allow-Origin 등 CORS를 해결하기 위한 몇 가지 응답 헤더를 포함해 달라고 요청해야 합니다
• 많은 프레임워크에서 CORS를 해결해 주는 라이브러리 및 설정 방법이 존재합니다

HTTP 응답 헤더

Access-Control-Allow-Origin: <origin> | *

• Access-Control-Allow-Origin 헤더에 작성된 출처만 브라우저가 리소스를 접근할 수 있도록 허용

Access-Control-Allow-Origin: <https://mkyu.api.com>
Access-Control-Allow-Origin: *

Access-Control-Allow-Methods: <method>[, <method>]*

• 브라우저에서 보내는 요청 헤더에 포함된 Access-Control-Request-Method 헤더에 대한 응답 결과입니다
• 리소스 접근을 허용하는 HTTP 메서드를 지정해 주는 헤더

Access-Control-Allow-Methods: GET, PUT

Access-Control-Expose-Headers: <header-name>[, <header-name>]*

• 서버에서 응답 헤더에 Access-Control-Expose-Headers를 추가해 줘야 브라우저의 자바스크립트에서 헤더에 접근할 수 있습니다

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

Access-Control-Allow-Headers: <header-name>[, <header-name>]*

• 브라우저에서 보내는 요청 헤더에 포함된 Access-Control-Request-Headers 헤더에 대한 응답 결과
• 자바스크립트에서 커스텀 헤더를 서버에 전달하게 되면, OPTIONS 요청 헤더의 Access-Control-Request-Headers 헤더에 커스텀 헤더 이름이 추가됩니다
• 서버에서는 Access-Control-Request-Headers에 작성된 값을 보고 Access-Control-Allow-Headers 응답 헤더에 커스텀 헤더 이름을 명시해 주어야 합니다

Access-Control-Allow-Headers: X-Custom-Request

Access-Control-Max-Age: <delta-seconds>

• preflight 요청 결과를 캐시 할 수 있는 시간을 나타냅니다
• 아래와 같이 초 단위로 캐시 시간을 설정

Access-Control-Max-Age: 60

Access-Control-Allow-Credentials: true

• 자바스크립트 요청에서 credentials가 include일 때 요청에 대한 응답을 할 수 있는지를 나타냅니다
• false로 설정해 주고 싶을 경우에는 헤더를 생략

Access-Control-Allow-Credentials: true

---