[Spring] CORS란?

CORS란?

---

CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념입니다. 직역하면, 교차되는 출처 자원들의 공유입니다. 다른 출처에 있는 자원을 요청한다고 하면, 이를 교차 출처 요청이라고 부릅니다.

 

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

- mdn 설명

출처란?

---

먼저 출처라는 개념을 알아야 합니다. 다른 블로그에서 이쁘게 정리한 사진을 가져와봤습니다. 평소 접근하는 URL이 어떤 구성요로 이루어져 있는지 아래에 나와 있습니다. 여기서 어디까지를 같은 출처라고 부를까요?

 

https://beomy.github.io/tech/browser/cors/

 

위의 구성요소 중에서 Protocol + Host + Port 3가지가 같으면 동일 출처(Origin)라고 합니다. 

 

• 세가지가 다 같아야지만 같은 출처라고 보고, 그중 하나라도 다르면 다른 출처이다.
  • 프로토콜 : http https는 프로토콜이 다르다.
  • 도메인 google.com과 other-google.com은 다르다.
  • 포트번 8080포트와 3000포트는 다르다,
• 같은 오리진 길이만 데이터를 송수신 하고자 한다 라는 것이 다른 출처 요청일 경우, CORS 정책에 준수하여 요청해야만 정상적으로 응답을 받습니다.

---

• 왜 필요할까?̊̈
• CORS가 없이 모든 곳에서 데이터를 요청할 수 있게 된다면, 다른 사이트에서 원래 사이트를 흉내낼 수 있게 된다. 만약 기존 사이트와 완전히 동일하게 동작하도록 하여 사용자가 로그인을 하도록 하고, 로그인했던 세션 또는 토큰을 탈취하여 악의적으로 정보를 꺼내오거나 다른 사용자의 정보를 입력하는 등 헤킹을 할 수 있다. 하지만 이런 공격을 할 수 없도록 브라우저에서 보호하고, 필요한 경우에만 서버와 협의하여 요청할 수 있도록 하기 위해서 필요한 것이다.

어떻게 동작하는가?̊̈

• Simple Requests인 경우
  1. 서버로 요청을한다.
  2. 서버의 응답이 왔을때 브라우저가 요청한 Origin과 응당한 Access-Control-Request-Header의 값을 비교하여 유효한 요청이라면 리소스를 응답하고, 유효하지 않은 요청이라면 브라우저에서 막고 에러를 발생하는 것이다.

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

 

 

내가 사용했던 코드

 

시큐리티

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    ...
    // CSRF 설정
    http.csrf((csrf) -> csrf.disable());

    ...
    return http.build();
}

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration config = new CorsConfiguration();

    config.setAllowCredentials(true);
    config.setAllowedOrigins(List.of("http://localhost:3000", "https://localhost:8080","https://project-front-rouge.vercel.app", "https://fe-nu-one.vercel.app"));
    config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
    config.setAllowedHeaders(List.of("*"));
    config.setExposedHeaders(List.of("*"));

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", config);
    return source;
}