[개념 콕] CORS

내일배움캠프 수료생이 개발에 꼭 필요한 핵심 개념만 콕 집어 드립니다.

May 31, 2024

Contents

CORS(Cross Origin Resource Sharing)란?동일 출처 정책(Same Origin Policy)CORS 정책을 통과하기 위해서는 어떻게 해야할까?내일배움캠프는 개발에 필요한 핵심만 배웁니다

✍🏼

개발을 시작하시는 여러분, 정보가 너무 많고 배워야 할 것도 산더미라 어디서부터 시작해야 할지 막막하신가요? 내일배움캠프 수료생들이 4개월 동안 배운 엄선된 핵심 개념을 직접 정리해서 알려 드립니다. 공부하다 막히거나 헷갈리는 개념이 있다면 개념 콕으로 정리해보세요.

CORS(Cross Origin Resource Sharing)란?

CORS를 직독직해 해보면 ‘교차된 출처의 자원을 공유’한다는 의미입니다. CORS는 다른 출처에서 온 자원을 받아들일지 아닐지에 대한 정책을 의미하는 것인데요. 왜 CORS를 만들었는지 그 이유와 내용에 대해 알아봅시다.

동일 출처 정책(Same Origin Policy)

웹 보안에서 출처(Origin)는 프로토콜, 호스트, 그리고 포트를 통합한 개념입니다. 즉, 두 URL의 프로토콜, 호스트, 포트가 모두 동일할 때 같은 출처로 간주됩니다. 웹 브라우저 보안 모델의 핵심 개념으로, 한 출처에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호작용하는 것을 제한하는 정책이죠.

예를 들어, "https://example.com:8080"과 "https://example.com:8080/page"는 같은 출처로 취급되지만, "http://example.com:8080"이나 "https://subdomain.example.com:8080"은 다른 출처로 취급됩니다.

동일 출처 정책은 악의적인 웹사이트에서 다른 웹사이트의 중요한 데이터에 무단으로 접근하거나 사용자를 대신하여 원치 않는 작업을 수행하는 것을 방지하기 위해 도입되었습니다. 예를 들어, 해커가 악성 스크립트를 삽입한 웹페이지를 유포하여 사용자의 개인정보를 탈취하거나 온라인 뱅킹 시스템에 무단 접근을 시도할 수 있습니다. 하지만 동일 출처 정책으로 같은 출처에서 제공되는 리소스는 일반적으로 신뢰할 수 있다고 가정할 수 있습니다. 이러한 방법은 웹 애플리케이션의 보안성을 크게 향상시킵니다.

하지만 이 정책으로 인해 합법적인 크로스 오리진 리소스 공유에 제한이 생기기도 하므로, CORS(Cross-Origin Resource Sharing)와 같은 메커니즘을 통해 필요한 경우 출처 간 리소스 공유를 허용할 수 있습니다.

CORS 정책을 통과하기 위해서는 어떻게 해야할까?

CORS는 다른 출처에서 온 리소스라도 특정 조건을 만족한다면 받겠다는 의도에서 만들어진 정책입니다. 따라서 이 정책을 통과하기 위해서 서버 측에서 할 수 있는 시도는 대표적으로 2가지입니다.

1. Access-Control-Allow-Origin 응답 헤더 설정

Access-Control-Allow-Origin 헤더는 크로스 오리진 요청을 허용할 출처(Origin)를 지정하는 데 사용됩니다. 서버에서 이 헤더를 적절히 설정하면 특정 출처에서 오는 요청을 선택적으로 허용할 수 있습니다.

예를 들어, Access-Control-Allow-Origin 헤더에 "https://google.co.kr"을 설정하면 Google 도메인에서 오는 모든 요청을 허용하게 됩니다. 그러나 실제로는 요청 메서드(GET, POST 등)와 헤더 등 추가적인 CORS 설정이 필요할 수 있습니다.

Java Spring 프레임워크에서는 다음과 같이 CORS 설정을 할 수 있습니다.


@Configuration
@EnableWebMvc
public class WebCorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        String URL = "https://cors.net";

        registry.addMapping("/**")
                .allowedOrigins(URL)
                .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE")
                .allowedHeaders("Origin", "Content-Type", "Accept")
                .allowCredentials(true)
                .exposedHeaders("Authorization")
                .maxAge(3600);
    }

}

위 코드에서는 "https://example.com" 출처에서 오는 요청을 허용하고, 다양한 HTTP 메서드와 헤더를 허용하도록 설정하였습니다.

2. 프록시 서버 사용

프록시 서버는 클라이언트와 서버 사이에서 중개자 역할을 하는 서버입니다. 클라이언트가 직접 목표 서버에 요청을 보내는 대신, 프록시 서버를 경유하여 요청을 전달할 수 있습니다.

만약 목표 서버에서 클라이언트의 출처를 허용하지 않는 경우, 모든 출처를 허용하는 프록시 서버를 사용하여 우회할 수 있습니다. 클라이언트는 프록시 서버로 요청을 보내고, 프록시 서버는 목표 서버로부터 리소스를 받아 클라이언트에게 전달합니다. 이 과정에서 클라이언트와 목표 서버 간의 출처 문제를 해결할 수 있습니다. 프록시 서버를 사용하는 방법은 클라이언트 측 코드를 수정해야 하며, 프록시 서버를 별도로 구축하고 관리해야 하는 부담이 있습니다. 따라서 가능하다면 서버 측에서 CORS 설정을 적절히 하는 것이 더 좋은 방법입니다.

내일배움캠프는 개발에 필요한 핵심만 배웁니다

지금까지 꼭 필요한 개발 지식에 대해 알아보았습니다. 내일배움캠프에서는 전문가들이 선별한 핵심 개발 지식으로 개발 공부도, 취업도 보다 효율적으로 할 수 있는데요. 국내 유수의 IT기업 출신 튜터님들과 실습 위주의 독보적인 커리큘럼으로 개발자 취업을 체계적으로 준비해보세요. 내일배움캠프 4개월, 여러분 인생의 가장 큰 터닝 포인트입니다.

참고문헌

CORS(교차 출처 리소스 공유)

프록시서버란?

CREDIT

글 | 장동하 내일배움캠프 수료생 편집 | 정효재 팀스파르타 에디터