CORS란?

CORS라는 단어를 보게되었고 이게 무엇일까 궁금하여 찾아보게 되었습니다.

CORS에 대해 알아보기 전에 먼저 SOP에 대해서 알아보겠습니다

 

SOP란?

Same Origin Policy의 약자로 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식입니다.

 

출처(Origin)이란?

 

그렇다면 http://localhost와 동일 출처인 url은 무엇일까요?

1. https://localhost

2. http://localhost:80

3. http://127.0.0.1

4. http://localhost/api/cors 

 

정답은 2번 4번입니다

1번의 경우에는 https로 http와 protocol이 다릅니다.

2번의 경우 http의 기본 포트가 80포트로 생략이 되어있었기 때문에 동일 출처 url입니다.

3번의 경우 127.0.0.1은 localhost가 맞지만 브라우저는 stringValue로 비교하기 때문에 다른 출처로 판단.

4번의 경우 api/cors는 추가적으로 붙는것이기 때문에 동일 출처 url입니다.

 

그러면 왜 SOP를 사용해야 할까요?

우선 보안의 측면때문에 사용됩니다 아래의 예시를 살펴보겠습니다.

 

1. 사용자가 페이스북 서비스에 로그인 이후 인증 토큰을 받아와 사용한다고 하겠습니다.

2. 해커가 흥미로운 내용과 링크를 메일로 통해 보냅니다.

3. 사용자가 클릭하면 해커가 만든 주소로 이동하고 해커가 만든 스크립트가 실행되게 됩니다.

(이때 스크립트는 "나는 바보다" 라는 내용을 페이스북에 게시해라 라고 가정해보겠습니다.)

4. 해커는 사용자의 인증 토큰을 가지고 페이스북에 "나는 바보다"라는 내용을 게시하게 됩니다.

 

이 때의 스크립트가 민감한 정보나, 송금 등이라면 큰일이 발생할 것입니다.

 

SOP를 사용한다면 아래의 두 Origin이 다르므로 Cross Origin으로 판단합니다. 

Origin : https://www.facebook.com/

Origin : http://hacker.ck

( 따라서 SOP를 위반합니다.)

 

그렇다면 다른 출처의 리소스가 필요하다면 어떻게 해야할까요?

이제 CORS가 등장하게 됩니다

 

 

CORS란?

Cross-Origin Resource Sharing의 약자로 다른 출처의 자원을 공유할 수 있습니다.

추가 HTTP 헤더를 사용하여 한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.

 

 

CORS 동작원리는 Preflight Request(브라우저가 판단), Simple Request, Credentialed Request 가 있습니다.

CORS 동작원리와 CORS 에러 해결 방법은 추후에 필요한 경우에 자세하게 다루어 보겠습니다.

 

 

출처

https://www.youtube.com/watch?v=-2TgkKYmJt4&t=20s 

https://velog.io/@hoo00nn/CORSCross-Origin-Resource-Sharing-%EB%9E%80