spring security를 알아보자 - 9

ㅇ CORS(Cross-Origin Resource Sharing) 

CORS 에러는 웹 애플리케이션에서 요청을 보낼 때, 해당 요청이 다른 도메인, 프로토콜, 또는 포트를 가지고 있는 서버로부터 자원을 요청하는 경우에 브라우저에 의해 발생한다. 서버에서 이러한 요청을 허용하려면, 응답에 Access-Control-Allow-Origin과 같은 CORS 헤더를 포함해야 합니다. 서버 설정에서 이 헤더를 올바르게 구성하지 않으면, 브라우저는 보안상의 이유로 응답을 차단하고, 개발자 콘솔에 CORS 관련 에러 메시지를 표시함.

CORS는 보안공격이 아니라, 그로부터 지키기 위해 실행되는 보호단계로 보면 된다.

나도 처음 프로젝트에서 CORS 설정을 해주지 않아서 배포과정에서 실패했던 기억이 있다.

좀더 알기 쉽게 설명하자면, 웹에서 CORS 에러는 마치 다른 학교 친구에게 책을 빌리러 가는 것과 비슷한 상황이다. 우리 학교(웹사이트)에서 다른 학교(다른 도메인의 서버)로 책(데이터)을 빌리러 갔을 때, 그 학교의 교문을 지키고 있는 문지기(웹 브라우저)가 "너는 이 학교 학생이 아니니 들어올 수 없다"며 나를 막는 상황이다.

 

ㅇ CORS 에러를 해결하는 방법 1

도메인 이름과 http  protocol이 같더라도 포트번호가 다르면 CORS 에러가 난다. Spring Security 프레임워크의 도움을 받아보자. Controller에 @CrossOrigin 애너테이션을 달자. 소통을 받으려는 출처를설정하자.

@CrossOrigin(origins = "http://localhost:4200") 이렇게 하면 우리의 프론트단과의 연결이 자유로워진다.

@CrossOrigin(origins = "*") 이렇게 하면 어떠한 도메인과도 소통할 수 있어진다.

그런데 브라우저는 이렇게 설정했다고 어떻게 알아들을까?

브라우저는 pre-flight 요청을 한다. 프론트앱에서 백엔드 앱으로 어떤 api를 호출한다 가정해보자. 이 때 브라우저는 cross-origin communication 이라는것을 알며 브라우저가 api 호출을 보내지않고 pre-flight 요청을만든다. 그리고 백엔드 서버에 "cross-origin인데 받을수있겠니? "라고 물어보고 백엔드에서" 엉 괜찮으니 진짜 요청을 보내" 라고하면 브라우저가 진짜 api 요청을 보낸다. 하지만 실제로는 수많은 api가 있고 하나하나 출처를 적는건 굉장히 비효율적인 작업이다. 

 

ㅇ CORS 에러를 해결하는 방법 2

httpSecurity 설정에 전역으로 설정해주는것이다. 

http.securityContext((context) -> context
                        .requireExplicitSave(false))
                .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.ALWAYS))
                .cors(corsCustomizer -> corsCustomizer.configurationSource(new CorsConfigurationSource() {
                    @Override
                    public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {
                        CorsConfiguration config = new CorsConfiguration();
                        config.setAllowedOrigins(Collections.singletonList("http://localhost:4200"));
                        config.setAllowedMethods(Collections.singletonList("*"));
                        config.setAllowCredentials(true);
                        config.setAllowedHeaders(Collections.singletonList("*"));
                        config.setMaxAge(3600L);
                        return config;
                    }

이런식으로 설정해주면, 출처들의 리스트를 언제든 수정가능하다. 

 

CORS 정보들을 설정하는건 항상 백엔드의 역할이니 잘 알아두자!