CORS(Cross-Origin Resource Sharing)란?
CORS는 웹 브라우저에서 다른 출처의 리소스에 접근할 때 발생하는 Same-Origin 정책의 제약을 해결하기 위한 HTTP 기반 보안 메커니즘입니다.
Same-Origin 정책이란?
웹 브라우저는 보안을 위해 다른 출처에서 온 스크립트가 현재 페이지와 동일한 출처의 리소스만 접근할 수 있도록 제한합니다. 출처의 경우 프로토콜, 호스트, 포트의 조합으로 이루어져 있습니다.
예로, 다음 출처들은 서로 다름으로 간주됩니다.
왜, CORS가 필요할까요?
다음과 같이 클라이언트와 서버의 포트가 다를 수 있습니다.
이렇게 구성될 경우, 출처가 다르다고 인식하기 때문에 클라이언트에서 서버의 자원을 요청할 때 CORS 정책을 위반하게 됩니다. 이와 같은 경우 서버에서 CORS 설정을 통해 해결할 수 있습니다.
해결 방법
전역 설정
CorsConfigurationSource를 Bean으로 등록하여 CORS 관련 설정을 전역적으로 추가할 수 있습니다.
@Configuration
public class CorsConfig {
@Bean
public CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
// 허용할 출처 등록
corsConfiguration.setAllowedOrigins(
List.of(
"허용할 출처 1",
"허용할 출처 2"
)
);
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", corsConfiguration);
return source;
}
}지역 설정
@CrossOrigin을 활용하여 Controller마다 허용할 출처의 정보를 입력할 수 있습니다.
@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class MyController {
@GetMapping("/test")
public String test() {
return "CORS 설정됨";
}
}설정 시 주의할 사항
Preflight Request
Content-Type이 Json이거나 PUT/DELETE 등의 메서드를 사용할 경우 특정 리소스에 대해 허용된 HTTP 메서드 목록을 요청하기 위해 브라우저는 OPTIONS 요청을 보냅니다. 이를 Preflight 요청이라고 합니다. 서버의 경우 다음과 같은 설정이 필요합니다.
@Configuration
@RequiredArgsConstructor
public class SecurityConfig {
@Bean
public SecurityFilterChain configure(HttpSecurity http) throws Exception {
return http
.csrf(AbstractHttpConfigurer::disable)
// COSR 관련 설정 추가
.cors(cors -> cors.configurationSource(corsConfigurationSource))
// PreFligh 관련 설정 추가
.authorizeHttpRequests(requestConfigurer ->
requestConfigurer
.requestMatchers(CorsUtils::isPreFlightRequest).permitAll()
).build();
}
}
Credentials 설정
쿠키, 인증 정보가 포함된 요청을 허용하기 위해선 다음과 같은 설정이 필요합니다.
@Configuration
public class CorsConfig {
@Bean
public CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
// 1. 허용할 출처 등록
corsConfiguration.setAllowedOrigins(
List.of(
"출처 1",
"출처 2"
)
);
// 2. 허용할 메서드 등록
corsConfiguration.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
// 3. 쿠키 및 인증 정보 요청 허용
corsConfiguration.setAllowCredentials(true);
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", corsConfiguration);
return source;
}
}예상 질문
CORS란 무엇인가요?
CORS는 다른 출처를 가진 웹 브라우저에서 서버 리소스에 접근할 때 발생하는 Same-orign 정책 제약을 해결하기 위한 HTTP 기반 보안 메커니즘입니다.
- 전역 설정 방법
- WebMvcConfiguer의 addCorsMappings() 메서드를 구현하는 방법
- Spring Security를 사용할 경우 CorsConfigureSource를 설정해 Bean으로 등록하여 설정
- 지역 설정 방법
- @CrossOrigin 어노테이션
CORS 주의 사항
- Json 형식의 데이터나 PUT/DELETE 메서드를 사용할 경우 Preflight 요청 발생으로 설정 필요
- 쿠키가 인증 정보가 포함된 요청일 경우에도 별도의 설정이 필요
