😳 문제

• 이번 미션에서 드디어 프론트와의 협업을 진행하였다.
• 그리고 EC2에 배포를하고 public ip를 공유하였는데,
  • 제일 먼저 해결할 문제는 CORS였다.

🚨 SOP

• Same-Origin Policy, 동일 출처 정책
• 어떤 출처(Origin)에서 로드된 리소스(Resource)에서 다른 출처(Origin)의 리소스(Resource)를 제한하는 정책
  • 웹 브라우저에서 적용 되는 JavaScript 보안 정책이다.

Origin

• 출처는 URL의 Protocol, HostName, Port를 합친 것을 말한다.

  • Protocol
    • 송신 호스트와 수신 호스트가 정보를 주고받을 때 사용하는 규약
    • ex. http, https, ftp, ...
  • HostName
    • 도메인 이름이나, IP를 의미한다.
    • ex. localhost, 127.0.0.1, naver.com
  • Port
    - 서버와 연결을 맺기 위한 TCP 포트 번호
    - ex. 80, 443, 8080
    

• 이 세가지 중에 하나라도 다르면 다른 출처를 확인한다.

• 출처에 대한 판단은 String Value로 한다.

  • 127.0.0.1과 localhost는 실제로는 같은 host지만 다른 출처라고 판단한다.
  • localhost와 localhost:80 은 80포트는 기본 포트이기 때문에 같은 출처라고 판단한다.

🔗 CORS

• Cross Origin Resources Sharing, 교차 출처 리소스 공유
• 다른 출처(Origin)에서 리소스(Resource)를 공유할 수 있도록 하는 정책

Origin Header

• 웹 브라우저에서 요청을 보낼 때, Origin이라는 헤더에 현재 리소스의 출처 정보를 담아서 요청을 보내게 된다.

Access-Control-Allow-Origin Header

• 서버에서 어떤 출처에서의 요청만 허용하여 해당 서버의 리소스를 공유가능하게 한다.

CORS 시나리오

1. Simple Request

• 단순히 Access-Control-Allow-Origin 등의 헤더의 정보를 파악하여, 리소스를 공유할 수 있는 출처인지 파악한다.
• 제약조건들이 존재한다.
  • 메소드는 GET, HEAD, POST만 가능
  • 헤더는 Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width만 가능
  • Content-Type은 application/x-www-form-urlencoded, multipart/form-data, text/plain만 가능

2. Preflight Request

• 대부분의 상황에서 사용하는 시나리오
• 예비 요청을 보내 Simple Request와 마찬가지로 Access-Control-Allow-Origin 등을 확인하여, 리소스를 공유할 수 있는 출처인지 파악한다.
• OPTIONS 메서드의 요청을 보내서 허용되는 출처인지 확인한다.

(출처: https://livebook.manning.com/concept/cors/preflight-cache)

3. Credentialed Request

• 인증 정보를 포함하는 요청을 보내는 시나리오이다.
• Access-Control-Allow-Origin 헤더에 *(와일드 카드)는 사용할 수 없다.
• 응답에 Access-Control-Allow-Credentials 헤더는 true로 가야한다.

Spring에서 CORS 설정

1. WebMvcConfigurer를 이용한 설정

• 전역으로 설정
• addMapping
  • 해당 설정에 대해서 요청을 매핑하는 설정
• allowedOrigins
  • 허용할 출처를 설정
  • Access-Control-Allow-Origin 헤더에 정보를 담음
• allowedMethods
  • 허용할 요청 메소드를 설정
  • Access-Control-Allow-Methods 헤더에 정보를 담음
• allowedHeaders
  • 허용할 헤더를 설정
  • Access-Control-Allow-Headers 헤더에 정보를 담음

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(final CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .maxAge(3000);
    }
}

2. 어노테이션 사용

• @RequestMapping 어노테이션이 붙은 핸들러에 어노테이션으로 설정

@RestController
public class MyController {
    @CrossOrigin(origins = "https://a.aa")
    @PostMapping("/orders")
    public ResponseEntity<Void> orders() {
        return ResponseEntity.build();
    }
}

👍 결론

• SOP
  • 어떤 출처(Origin)에서 로드된 리소스(Resource)에서 다른 출처(Origin)의 리소스(Resource)를 제한하는 정책
• CORS
  • 다른 출처(Origin)에서 리소스(Resource)를 공유할 수 있도록 하는 정책
  • Preflight Request가 주로 사용되는 시나리오다.
• Spring으로 CORS 설정할 수 있는 방법은 2가지 있다.
  • 어노테이션 설정
  • WebMvcConfiguration 설정