CORS 이해와 동작 원리 파악

개요 목적

Spring 백엔드 서버를 웹페이지에서 테스트할 때 CORS 정책 예외를 만난다.

이번 시간에는 해당 CORS 의미와 동작 과정을 파악한다.

마지막은 Spring에서 CORS 정책을 허용하는 방법을 알아본다.

CORS란

Cross-Origin-Resource-Sharing은 브라우저가 Cross Origin 데이터 교환에 대한 HTTP 통신을 통제하는 것을 의미한다.

예시를 통해 Cross Origin의 HTTP 통신 상황에 대해서 알아보자.

브라우저를 사용하는 http://localhost:8080이라는 UI 서버에서, 화면에 작성할 데이터를 받아오기 위해, http://www.imagelist.com:5510 백엔드 서버에서  HTTP 요청을 한다.

이때 브라우저(크롬)는 두 서버의 프로토콜과 도메인 그리고 포트 번호가 다르다는 것을 발견하고 둘 사이의 통신을 금지 한다. 이것이 CORS 정책이다.

<cross-origin 상황 종류>

1. 프로토콜 - http와 https는 프로토콜이 다르다.
2. 도메인 - localhost과 www.imagelist.com은 다르다.
3. 포트 번호 - 8080 포트와 5510 포트는 다르다.

즉 CORS는 브라우저의 기능이다.

브라우저에서는 보안 목적으로 cross-origin HTTP 요청을 제한한다.

그래서 POSTMAN을 통해서 API 서버와 통신은 가능한데, 본인이 만든 크롬 UI서버로 API 요청을 하면, 오류가 발생하는 상황을 만난다.

cross-origin 상황에서도 HTTP 통신을 허용하려면,

요청을 받는 서버 쪽에서, 요청을 하는 서버를 허용한다는 정보를 헤더에 담아 브라우저에게 전송을 하고,

둘 사이가 확인 되면, cross-origin 에서도 통신을 브라우저가 허용한다.

자세한 작동 원리는 뒤에서 알아보자.

CORS은 왜 필요한가, 보안상의 장점

CORS가 없다면, 해커가 만든 사이트에서 원래 사이트를 똑같이 모방할 수 있게 된다.

왜냐하면, 원래 사이트가 UI정보를 가져오는 API 서버와의 통신을 해커가 만든 사이트에서도 통신할 수 있기 때문이다.

해커가 naven.com이라는 모방 사이트를 만든다.

naver.com와 똑같은 API 서버와 통신하여 사용자가 속을 만한 사이트가 탄생한다.

사용자는 속아서 로그인을 하고 그정보가 해커에게 유출된다.

CORS가 있다면 API 서버가 등록하지 않은 cross-origin = naven.com은 브라우저에 의해서 통신이 불가하다.

CORS 동작 원리

Simple Request 단순 요청 방식

브라우저에서 작동되는 자바스크립에서 서버에게 요청이 Simple Request일 때, CORS 단순 요청 방식을 사용한다.

단순 요청 방식은, API를 서버에게 요청하고, 서버가 요청에 대한 결과에 바로 Access-Control-Allow-Origin 헤더를 포함한다. 브라우저는 헤더를 확인해서 CORS 동작을 허용할 지 결정한다.

Simple Requet의 조건에는 메소드가 get, head, post 중 하나, 제한 된 Content-type 과 다른 헤더들이 있다.

그러나, 많은 REST API에서 Content-Type으로 application/json을 사용하기 때문에 만족하기 어려운 조건이다.

그래서 아래 방식은 Preflight Request 방식을 많이 이용한다.

preflight Request 예비 요청을 먼저 보내는 방식

예비 요청 방식은 예비 요청(Options 메소드)을 먼저 API 서버에게 보내서, Access-Control-Allow-Origin 헤더를 먼저 확인한 후 실제 API 요청을 전송할지 판단한다.

Spring에서 CORS 설정 방법

@Configuration
public class CorsWebConfig implements WebMvcConfigurer {

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

webMvcConfigurer 구현체를 만들고, addCorsMappings 메소드를 통해서,

허용할 주소와 메소드 URL 매핑 정보를 설정할 수 있다.

---

Refernce

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

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