[web] CORS 란?

1. CORS 란?

• Cross Origin Resource Sharing의 약자.
• 단어의 뜻은 교차 출처 자원 공유.
• 기본적으로 내가 이해한 바로는 내가 웹서버에 요청한 웹 페이지에서
  다른 서버로부터 자원을 받아올 때 지켜야 할 정책 이다.

예를 들어,

1. https://host1:443 페이지를 요청
2. 1.에서 받은 페이지가 http://host2:80/resource1 으로 자원을 요청

할 경우 cors 정책이 지켜지지 않으면 cors 정책 위반에 해당하는 것이다.

2. CORS 정책이 존재하는 이유

• 우선, 이유를 먼저 설명하자면

  SOP(same-origin policy) 가 존재하기 때문이다.

SOP 또한 단어 뜻을 그대로 해석하자면 '동일 출처 정책' 이다.
RFC 6454 에서 처음 등장한 보안 정책으로 말 그대로 "같은 출처에서만 리소스를 공유할 수 있다." 라는 내용이다.

사실 이 지점이 내가 계속 CORS에 대해 찾아보면서 헷갈렸던 지점이다.
교차 출처 정책에 대해 찾아보는데 왜 계속 동일 출처 정책에 대한 내용이 같이 나오나 했다.

1. 기본적으로 SOP 정책에 따라 브라우저에서는 웹 페이지를 요청한 서버와 같은 출처에서만 자원을 요청할 수 있다.
2. 하지만 1.의 정책이 완전히 지켜지는건 웹 개발을 한번이라도 접해본 사람은 불가능 하다는 것을 알 것이다.
   => 1.을 완전히 지키려면 브라우저에서 백엔드 서버로 뭔가를 요청하는 것 조차 불가능하다.
3. 이에 따라 교차 출처를 허용하는 경우 (1이 위배되어도 되는 경우)에 대한 규격을 정한 것이 CORS다.

나는 우선 이렇게 이해를 했다.
개인적으로 CORS에 대해 이해가 안되기 시작하는 이유가
순서 때문인 것 같다.

대부분의 사람들이 이와같은 CORS에 대한 에러 메세지

Access to fetch at ‘https://domain1.com/resource1’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

를 접한 뒤 CORS가 뭔데? 라고 생각하고 이를 찾아보기 시작할텐데,
교차 출처를 허용하는 정책이라는 내용만 보면 애초에 왜 교차 출처가 허용이 안되는가? 에 대한 설명이 부족해서 내가 완전히 이해를 한건가..?에 대해 헷갈리게 되는 것 같다.

3. 동일 출처 구분

• 출처를 정의하는 요소는

  1. protocol

  2. host

  3. port

일반적인 url 형식은 다음과 같은데,

{protocol}://{host}:{port}/{path}?{parameters}

위의 3요소 모두 같으면 동일출처, 하나라도 다르면 교차 출처다.
path, parameter 등 위의 3가지 요소 외에는 다르든 같든 상관없다.

4. 작동 방식

4-1. preflight

1) 해당 방식은 교차 출처로 자원 요청을 보내기 전 header의 Origin 필드에 요청을 보내는 출처를 담아 OPTIONS method로 http 요청을 보낸다.
2) 요청을 받은 서버(교차 출처 서버)는 해당 서버에서 허용/금지된 기능들에 대한 정보를 담아 브라우저에 보낸다.
3) 브라우저는 2)에서 받은 정보를 활용해 자신이 원하는 기능이 허용되어 있고 안전하다 판단되면 본 요청을 보낸다.

4-2. simple-request

• 특정 조건이 만족되는 요청에 대해서는 preflight 과정을 거치지 않고 교차출처에 요청을 보낼 수 있다.

이 조건은 다음과 같다.

1. 요청 method

- GET
- HEAD
- POST

2. header에 포함된 정보

- Accept
- Accept-Language
- Content-Language
- Content-Type
	- application/x-www-form-urlencoded
    - multipart/form-data
    - text/plain
- Range

위의 조건들에 해당할 경우 prefligt 없이 직접 요청이 가능한데,
개인적으로 위의 조건에 해당하지 않는 조건의 요청을 보내본적은 없는 것 같다.

5. CORS 정책위반 에러 시 해결방법

• 해결 자체는 사실 간단하다.

교차 출처 서버 (웹개발에서는 아마 주로 백엔드 서버가 될 것이다.) 에서
header의 Access-Control-Allow-Origin 필드에 요청을 보내는 서버의 값을 추가해주기만 하면 된다.