웹 보안을 위한 정책, CORS?

웹 보안은 특히 프론트엔드 개발자에게 중요하다. 웹 브라우저의 보안 정책을 이해하고 이를 적절히 활용하는 것이 필수적이다. 이번 글에서는 CORS(Cross-Origin Resource Sharing)와 CSRF(Cross-Site Request Forgery)에 대해 자세히 알아보겠다. 두 개념은 비슷해 보이지만 웹 보안에서 서로 다른 문제를 해결하기 위한 방법들이다. 그럼 웹보안을 위한 여러가지 정책을 알아보자.

CORS(Cross-Origin Resource Sharing): 웹 브라우저의 보안 정책

CORS는 웹 브라우저에서 서로 다른 출처(Origin) 간의 리소스 공유를 제어하는 보안 정책이다. 웹 애플리케이션이 다른 출처의 리소스를 요청할 때 CORS는 해당 요청이 허용되는지 여부를 결정한다.

SOP(Same-Origin Policy): 기본적인 보안 정책

먼저 웹 브라우저는 기본적으로 SOP(Same-Origin Policy)라는 보안 정책을 따른다. SOP는 웹 페이지가 자신과 동일한 출처에서만 리소스를 요청할 수 있도록 제한한다. 여기서 출처(Origin)는 다음 세 가지 요소로 구성된다.

• 스킴(Scheme): http:// 또는 https://
• 호스트 이름(Host): www.example.com
• 포트 번호(Port): :8080 (생략 가능)

이 세 가지 요소 중 하나라도 다르면 다른 출처로 간주된다.

 EX) https://www.example.com과 http://www.example.com은 서로 다른 출처이다.

CORS의 필요성

다시 돌아와서 현대 웹 애플리케이션은 다양한 API와 상호작용할 필요가 있으며 모든 리소스를 동일한 출처에서 제공하지 않는다. 이로 인해 AJAX(Asynchronous JavaScript and XML) 같은 비동기 요청에서 다른 출처의 리소스를 사용할 수 있는 방법이 필요해져 이를 해결하기 위해 CORS가 도입되었다. CORS는 SOP 정책에서 부분적으로 허용하는 것이다.

CORS의 동작 방식

CORS는 웹 서버가 어떤 출처에서의 요청을 허용할지를 결정할 수 있도록 한다. 이를 위해 서버는 다음과 같은 HTTP 헤더를 설정한다.

• Access-Control-Allow-Origin: 허용된 출처를 지정합니다. 예: https://www.example.com
• Access-Control-Allow-Methods: 허용된 HTTP 메서드를 지정합니다. 예: GET, POST
• Access-Control-Allow-Headers: 허용된 요청 헤더를 지정합니다. 예: Content-Type
• Access-Control-Allow-Credentials: 자격 증명(쿠키, 인증 헤더 등)의 포함 여부를 지정합니다. 예: true

CORS 요청에는 두 가지 유형이 있다.

• Simple Request: 서버 상태를 조회하기 위한 간단한 요청(GET, HEAD 등)
• Preflight Request: 서버 상태를 변경할 수 있는 요청(POST, PUT 등). 서버에 사전 검증(OPTIONS)을 요청

 

CORS 설정 방법

서버 측에서 CORS를 설정하려면 웹 서버에서 CORS 관련 헤더를 추가해야 합니다. 아래는 Spring Boot에서의 CORS에 대한 전역 설정 예시이다. 이 외에도 CORS에 대한 설정방법은 아래 주소의 내용을 참고하면 알 수 있다.

Trouble shooting : CORS(Cross-Origin Resource Sharing) 문제 해결하기

 

import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("https://www.example.com")
                    .allowedMethods("GET", "POST", "PUT", "DELETE")
                    .allowedHeaders("*")
                    .allowCredentials(true);
        }
    };
}

위의 설정은 모든 경로에 대해 https://www.example.com에서 오는 요청을 허용하고 GET, POST, PUT, DELETE 메서드를 허용한다. 추가로 자격 증명(쿠키 등)을 포함한 요청도 허용한다.

 

참고문헌

교차 출처 리소스 공유 (CORS) - HTTP | MDN

CORS(교차 출처 리소스 공유) | 토스페이먼츠 개발자센터