인트로

• 맨날 해결책만 찾아서 적용하고 끝냈는데, 한단계 더 들어가보고자 내용을 정리해봅니다
• 먼저 웹 보안을 위한 SOP 정책을 설명하고
• 다음으로 SOP정책을 우회하기 위한 CORS 예외조항에 대해 설명하겠습니다.

SOP

• Same-Origin Policy
• "같은 출처에서만 리소스를 공유할 수 있다!" 정책
• 그러나 웹이라는 오픈스페이스 환경에서 다른 출처에 있는 리소스를 가져와서 사용하는 일은 굉장히 흔하고 무작정 막을 수도 없어 예외 조항을 두고 이 조항에 해당하는 리소스 요청은 출처가 다르더라도 허용하기로 했는데요
  • 그 중 하나가 “CORS 정책을 지킨 리소스 요청”

CORS

• Cross-Origin Resource Sharing
• 교차출처(서로 다른 컴퓨터)에서 가져온 자원 공유시에 발생하는 문제
• FE사이드(클라이언트)에서 데이터를 얻기 위해 서버에 정보를 요청하는데, 보안상의 이슈로 API를 차단하면서 문제가 발생
• 그래서

해결법

• 서버와 클라이언트가 분리되어 있는 앱에서는 cross-origin HTTP 요청을 서버에서 승인해야하는데 두가지 방법이 있다
  • 각각의 요청하나마다 지정해주던지
  • 일괄적용하는 방법

요청마다 지정해주는 방법

• node js 의 경우
• Spring boot 의 경우

일괄적용하는 방법

• node js 의 경우

  npm install cors

• Spring boot 의 경우

  @Configuration
  public class AirbnbConfigurer implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST");
    }
  }