2022-07-18JavaScript4 minutes read (About 621 words) 0 visits

CORS는 왜 날 헷갈리게 하는걸까?(ft. CSRF, XSS)

CORS는 크로스-오리진 리소스 셰어링(Cross-Origin Resource Sharing)의 약자이고 직역하면 교차 출처 리소스 공유이다.
처음 리소스를 제공한 도메인(Origin)이 요청 도메인과 다르더라도 요청을 허락해 주는 웹 보안 방침이다.

CORS 웹 보안 방침이 왜 필요한 걸까?

웹 사이트는 원래 사용자의 공격에 취약하므로 보안에 유의해야한다.
서로 다른 출처의 웹 사이트가 통신하는데 제약이 없으면 악의적인 사용자가 웹 사이트 정보를 탈튀할 수도 있다.
따라서 같은 출처인지 다른 출처인지 구분이 필요하고 다른 출처인 경우 경고를 하는 것이다.

CORS 취약점

CSRF (참고: 전자정부프레임워크3.8에 CSRF 설정하기): 사이트 간 요청 위조 약자로 공격대상이 Server
XSS (참고: XSS 방지): 사이트 간 스크립팅의 약자로 공격대상이 Client

개발자도구(F12)의 네트워크 탭

다른 출처의 웹사이트로 요청을 보내면 브라우저는 2개의 요청을 보낸다.

Options 메서드를 사용하는 요청
사용자가 보낸 요청

Options 메서드는 보통 리소스에 대해 어떤 HTTP 메서드를 사용할 수 있는지 확인하고 싶을 때 보내고 Options 요청이 반환되고 CORS여부 및 GET 요청 사용가능 여부를 확인하면 두번째 요청을 보내게 된다.

Access-Control-Allow-Origin: 프론트엔드 애플리케이션 서버 주소
Access-Control-Allow-Methods: 허용되는 메서드 ex) GET,POST,PUT,PATCH,DELETE,OPTIONS

CORS가 가능하려면?

CORS가 가능하려면 백엔드에서 CORS 방침을 설정해줘야한다.
자바의 경우 WebMvcConfig 클래스로 설정할 수 있다.

@Configuration // 스프링 빈으로 등록
public class WebMvcConfig implements WebMvcConfigurer {
	private final long MAX_AGE_SECS = 3600;

	@Override
	public void addCorsMappings(CorsRegistry registry) {
		// 모든 경로에 대해
		registry.addMapping("/**")
			// Origin이 http:localhost:3000에 대해
			.allowedOrigins("http://localhost:3000")
			// GET, POST, PUT, PATCH, DELETE, OPTIONS 메서드를 허용한다.
			.allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS")
			.allowedHeaders("*")
			.allowCredentials(true)
			.maxAge(MAX_AGE_SECS);
	}
}