[네트워크] CORS에 대해 알아보자

 

서론

HTTP Method를 공부하던 도중

OPTIONS 메서드 : 대상 리소스에 대한 통신 가능 옵션(메서드)을 주로 설명하는 메서드이며, 주로 CORS 에서 사용된다.

 

글을 보고 CORS 가 궁금해 찾아봤습니다.

 

 

CORS?

"CORS"는 "Cross Origin Resource Sharing"의 약어로,  웹 브라우저에서 도메인, 프로토콜, 또는 포트가 다른 웹 페이지 간에 데이터를 공유하기 위한 보안 기술입니다. 웹 브라우저는 보안상의 이유로 동일 출처 원칙(SOP, Same-Origin Policy) 에 따라, 다른 출처의 웹 페이지에서 리소스를 요청하면 브라우저에서 보안상의 이유로 요청을 차단하는데, 이를 CORS가 허용하는 방식으로 데이터를 공유할 수 있습니다. 

 

글만 봤을 땐 아직 정확히 이해가 가지 않았습니다.

먼저, 출처(도메인, 프로토콜, 포트)가 다른 웹 페이지에서 리소스를 요청할 경우는 어떤 경우일까요?

도메인에서 다른 도메인으로 리소스를 요청하는 경우

에를 들어, 사용자가 "https://www.naver.com" 이라는 도메인에 있는 웹 사이트를 방문한 후, 해당 웹 페이지에서 "https://google.com" 이라는 다른 도메인에 있는 이미지를 로드하려는 경우를 생각해보겠습니다.

 

1. 사용자가 "https://www.naver.com" 도메인에 있는 웹 페이지를 엽니다.
2. 해당 웹 페이지에서 이미지 태그('<img>') 를 사용하여 "https://google.com/image.jpg" 라는 이미지를 로드하려고 합니다.
3. 브라우저는 이미지를 로드하기 위해 "https://www.google.com/image.jpg" 에 대한 HTTP GET 요청을 생성합니다. 
4. 이 요청은 "https://www.google.com" 도메인에 있는 서버로 전송되지만, 동일 출처 정책(SOP)에 의해 브라우저는 요청이 허용된지 확인합니다.
5. "https://www.google.com" 도메인의 서버는 CORS(Cross-Origin-Resource Sharing) 관련 설정을 통해 "https://naver.com" 도메인에서의 요청을 허용하도록 설정되어 있다면, 요청이 허용되고 이미지가 응답됩니다.
6. 브라우저는 받아온 이미지를 "https://www.naver.com" 도메인에 있는 웹 페이지에 로드하여 사용자에게 이미지를 표시합니다.

 

도메인과 이미지 이외에도 브라우저에서 다른 출처(도메인, 포트, 프로토콜이 다른 웹 사이트)의 웹 페이지에서 리소스(이미지, 스크립트, 폰트 등) 을 요청하는 경우가 있습니다. 

예를 들어, 소셜 미디어 공유 기능에서 이미지를 가져오거나, 웹 페이지에서 외부 API를 호출하여 데이터를 가져오는 경우 등이 있습니다. 

이러한 동작은 웹 애플리케이션에서 다양한 기능을 제공하고, 외부 서비스나 리소스를 활용하는 데에 유용합니다.

 

정리

• CORS는 웹 애플리케이션의 보안을 강화하기 위해 도입되었으며, 웹 브라우저에서 작동하는 클라이언트 사이드 기술입니다.
• 서버 사이드에서는 CORS 정책을 설정하여 클라이언트 사이드에서의 요청을 허용 또는 차단할 수 있습니다.
• 일반적으로 서버는 응답 헤더에 CORS 관련 설정을 추가하여 특정 도메인, 프로토콜 또는 포트에서의 요청을 허용하거나 차단합니다.

 

+) 응답 헤더에 CORS 설정을 하는 이유

우선 서버에서는 요청을 받을 시, 검증 없이 모든 요청에 대해 요청받은 결과를 담아 응답을 합니다.

단, 응답 헤더에 CORS 설정을 허용하는지 여부를 담아 보내고, 브라우저는 이 응답 헤더를 확인하여 해당 리소스를 사용할 수 있는지를 결정합니다.

서버가 응답 헤더에 CORS 설정을 허용하는 경우, 브라우저는 해당 리소스를 사용할 수 있도록 허용하고, JavaScript를 포함한 클라이언트 측 코드에서 해당 리소스를 접근할 수 있습니다. 그러나 서버가 응답 헤더에 CORS 설정을 차단하는 경우, 브라우저는 해당 리소스에 접근하는 것을 차단하고 클라이언트 측 코드에서 해당 리소스에 접근하는 시도가 실패하게 됩니다. 

 

+) 응답 헤더에 포함되는 CORS 관련 설정

1. `Access-Control-Allow-Origin' : 허용할 도메인을 지정하는 헤더로, 클라이언트 사이드에서의 요청을 허용할 도메인을 명시. 이 헤더에는 도메인 이름이나 ' * '를 사용할 수 있다. 예를 들어, 모든 도메인에서의 요청을 허용할면 'Access-Control-Allow-Origin: *' 와 같이 설정할 수 있으나 ' * '를 사용할 경우 모든 도메인에서의 요청을 허용하므로, 보안상의 이슈가 발생할 수 있으므로 신중하게 사용해야 한다.

2. 'Access-Control-Allow-Methods' : 허용할 HTTP 메서드를 지정하는 헤더로, 서버가 허용할 HTTP 메서드를 명시한다. 예를 들어, "GET", "POST", "PUT", "DELETE"와 같이 허용할 메서드를 나열할 수 있다.

3. 'Access-Control-Allow-Headers' : 허용할 요청 헤더를 지정하는 헤더로, 클라이이언트가 요청할 수 있는 헤더를 명시한다. 예를 들어, "Content-Type", "Authorization" 와 같이 허용할 헤더를 나열할 수 있다.

4. 'Access-Control-Allow-Credentials' : 요청에 자격 증명 정보를 포함할 수 있는지 여부를 지정하는 헤더. "true" 또는 "false" 값을 설정하여 자격 증명 여부를 허용할지 여부를 명시할 수 있다.

 

이 외에도 'Access-Control-Max-Age' , 'Access-Control-Request-Method', 'Access-Control-Request-Headers' 등 다양한 CORS 관련 헤더가 있습니다. 서버 사이드에서는 이러한 헤더를 설정하여 클라이언트의 요청을 제어하고, 필요에 따라 허용 또는 차단할 수 있습니다. 구체적인 사용 방법은 서버 사이드의 개발 언어나 프레임워크에 따라 다를 수 있으며, 해당 언어나 프레임워크의 문서를 참조하여 설정하는 것이 좋습니다.

 

결론: CORS 는 웹 애플리케이션 개발 시 다양한 도메인 간의 데이터 공유를 제어하여 보안 상의 이슈를 방지하고, 클라이언트와 서버 간의 통신을 안전하게 할 수 있도록 도와줍니다.