cors 이해하기

💬 이번 새로운 프로젝트를 진행하기 이전 로그인 방식은 로그인 성공 시 response body에 token을 넘겨주고 프론트엔트에서 넘겨받은 토큰을 cookie에 저장하는 방식을 사용하였다. 그러나, 이번 프로젝트는 로그인 성공 시 response에 cookie를 set 해서 전달하는 방식을 선택하였다. 

문제는 여기서 시작되었는데 프론트엔드가 response에 쿠키가 있는 걸로 확인이 되었지만 다음 요청 시 request에 쿠키가 담겨있지 않았다. 문제를 찾아보던 중 cors와 관계있는 것을 알고 그동안 문제 해결만을 위해 코드에 옵션을 선택했지만 이번 계기로 cors를 정확하게 이해하고자 한다. 

CORS (Cross-origin resource sharing) 

[위키백과] 교차 출처 리소스 공유(Cross-origin resource sharing, CORS), 교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다.

💬 필자가 이해하기로는 교차 출처, 서로 다른 출처의 리소스 공유를 말하는 듯했다. 그렇다면 cross-oring(교차 출처) 여기서 origin은 무엇을 의미할까?

Origin(출처)

아래 이미지와 같이 Protocal, Host, Port 3가지를 포함한 형태이다

 

💬 CORS를 찾다보면 많은 곳에서 같이 나타나는 단어가 SOP이다.

CORS를 공부하기위해 SOP를 공부해야할 필요성이 있다.

Same-Origin Policy (SOP)

Same-Origin Policy는 기본적으로 웹 보안을 강화하기 위해 설계되었으며, 다른 출처의 리소스와의 상호 작용을 제한함으로써 악의적인 공격이나 정보 유출을 방지한다. 이를 통해 한 웹 페이지가 다른 도메인의 리소스에 대해 제한 없이 접근하거나 조작하는 것을 방지할 수 있다.

💬 제목에서도 나타나듯 같은 출처에 대한 정책을 말한다. 다시 말해 출처가 다르면 의심해 볼 필요가 있다!

 

CORS 기본 동작 과정

 

1.  클라이언트에서 HTTP 요청 헤더이 Origin을 담아서 전달
2. 서버는 이 요청에 대해 응답헤더에 Access-Control-Allow-Origin을 담아서 클라이언트로 전달 

    *  Access-Control-Allow-Origin : 요청 가능한 Origin을 나타낸다. 

    * 응답 Access-Control-Allow-Origin으로 와일드카드(*) - 전체허용, 또는 특정 Origin을 지정할 수 있다. 

3.  클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교

🚨 기존 CORS 세팅
allowedOrigins("*") // 허용할 출처를 명시, 전체 허용

allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS") // 허용할 HTTP METHOD

allowedHeaders("*") // 어떤 헤더들을 허용할 것인지

maxAge(3600) // preflight 결과를 캐시에 저장할 시간

🛠 수정 후 CORS 세팅

allowCredentials(true) 
allowedOrigins("http://localhost:3000", "https://localhost:3000")

allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS")

allowedHeaders("*") 

maxAge(3600) 

 

💎 해결

1️⃣  allowCredientials(true) : cross origin의 요청 시 cookie를 담아 요청하는 것을 허용한다.
2️⃣ allowCredientials(true) 설정 시 allowedOrigins("*") 이와같이 allowedOrigins에 와일드 카드를 정책상 허용하지 않는다.

, 따라서 특정 도메인을 설정해 주었다.
3️⃣ 클라이언트 또한 credientials 옵션을 true로 설정해야 서로다른 도메인에 request요청 시  cookie를 담을 수 있다.

 

참조 

 1️⃣  Same-Origin Policy (SOP) : https://codingmoon.io/posts/interview-questions/describe-same-origin-policy/

 2️⃣  CORS 기본 동작 과정 : https://bombo96.tistory.com/63