[Spring Security] CORS(Cross-Origin Resource Sharing) 설정

🍕 CORS(교차 출처 자원 공유)란?

요청을 받는 백엔드 쪽에서 이를 허락할 다른 출처들을 미리 명시하여 다른 출처 간에 리소스를 공유할 수 있도록 한다. 브라우저는 다른 출처끼리의 요청이 보내질 때 요청에 Origin이라는 header(데이터가 전송될 때 데이터의 맨 앞쪽에 붙은 보충 정보 - 받는 쪽의 IP 주소, 사용할 프로토콜이나 옵션 등)를 추가한다. Origin에는 요청하는 쪽의 scheme(요청할 자원에 접근할 방법인 프로토콜 http, ftp, telnet)과 도메인, 포트가 담긴다.

• https:// : scheme
• naver.com : 도메인
• :443 : 포트

요청을 받은 서버는 답장의 헤더에 지정한 Access-Control-Allow-Origin 정보를 실어서 보낸다. 여기에 요청을 보낸 쪽의 URL이 담겨 있으면 브라우저가 이를 비교해서 Origin과 같은 정보가 있으면 받아들인다. Origin에서 보낸 출처값이 서버의 답장 헤더에 담긴 Access-Control-Allow-Origin에 똑같이 있으면 안전한 요청으로 간주하고, 응답 데이터를 받는다. 그렇지 않으면 에러 메시지를 보여 준다.

토큰 등 사용자 식별 정보가 담긴 요쳥에 대해서는 더 엄격하다. 보내는 측에서는 요청의 옵션에 credentials 항목을 true로 세팅해야 하고 받는 쪽에서도, 아무 출처나 다 된다는 와일드 카드가 아니라 보내는 쪽의 출처 - 웹 페이지의 주소를 정확히 명시한 다음 Access-Control-Allow-Credentials 항목을 true로 맞춰야 한다.

Simple request는 위의 방식을 말하며 GET이나 POST 등 일정 조건의 요청들에 사용된다. 일단 요청을 보내서 통과하지 못하면 답장을 받아오지 못한다. Preflight는 PUT이나 DELETE 등 이와 다른 요청들은 서버 데이터에 영향을 줄 수 있기 때문에 본 요청을 보내기 전에 Preflight 요청을 먼저 보내서 요청이 안전한지 확인하고, 허락이 되어야 본격적인 요청을 보낼 수 있다. 요청을 보내는 것도 일단 허락을 받아야 한다.

 

🍕 CORS가 필요한 이유

예를 들어, 한 웹 사이트에 로그인을 하면 쿠키에 토큰이 저장된다. 이 웹 사이트를 다시 방문하거나 API 요청을 보낼 때마다 사용자의 인증 정보가 담긴 쿠키를 실어 보내면 사이트가 이 토큰을 보고 로그인 중인 회원임을 알게 된다.

만약, 이 사용자의 정보를 탈취하기 위해 악의적인 웹 사이트를 만들고 사용자에게 접속을 유도한다고 한다고 가정하자. 악의적인 자바스크립트 코드가 사용자의 브라우저에 받아져서 사용자가 안전한 웹 사이트에 API 요청을 보낼 때 포함하는 사용자 정보를 중간에 탈취할 수도 있다.

 

🍕 SOP(Same-Origin Policy): 동일 출처 정책

브라우저가 어떤 사이트에서 다른 사이트로 요청이 가지 않도록 막는다.

 

📚 Reference

• https://docs.spring.io/spring-framework/docs/current/reference/html/web.html#mvc-cors
• https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
• https://www.hahwul.com/2019/04/10/why-failed-get-data-with-this-cors-policy/
• https://youtu.be/bW31xiNB8Nc