What is CORS
- SOP
Same Origin Policy
다른 출처의 리소스를 사용하는 것을 제한하는 보안 방식
악의적인 공격으로부터 문서를 격리해서 보호하기 위해 사용됨
출처의 기준
protocol, host, port 중 하나만 달라도 다른 출처라고 판단한다.
세가지가 모두 같아야 같은 출처.
다른 출처의 리소스가 필요한 경우 CORS가 필요로함
- CORS
Cross-Origin Resource Sharing 다른 출처의 자원을 공유
HTTP 헤더를 이용해 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알리는 체제
- CORS 동작 종류
Simple Request, Preflight Request, Credentialed Request (인증 정보 포함 요청) 세가지 요청 종류로 구분된다.
1) Simple Request
서버에게 바로 요청을 보내는 방법이다.
서버에게 바로 요청을 보내는 방법이다. 다음 조건들을 만족해야만 한다.
GET, POST, HEAD 메서드
Content-Type:
application/x-www-form-urlencoded
multipart/form-data
text/plain
- Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width 헤더만 사용이 가능하다.
2) Preflight Request
사전 확인 작업을 뜻한다.
OPTIONS 메서드를 통해 다른 도메인의 리소스에 요청이 가능한지 확인 작업
요청 가능이 확인되면 실제 요청을 보낸다.
OPTIONS /doc HTTP/1.1
Origin: <http://foo.example>
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
Origin: 요청 출처
Access-Control-Request-Method: 실제 요청의 Method
Access-Control-Request-Headers: 실제 요청의 추가 헤더
3) Credentialed Request
인증 관련 헤더를 포함할 때 사용하는 요청이다
아래와 같은 설정을 해줘야한다.
클라이언트측: credentails: include
서버측: Access-Control-Allow-Credentails: true
- 스프링 부트를 이용한 CORS 해결
@CrossOrigin(origins = "<http://localhost:8001>")
@RestController
@RequestMapping("/test")
public class DemoController {
@GetMapping
public String test() {
return "테스트입니다.";
}
}
@CrossOrigin() 어노테이션을 달지 않았을 땐 오류가 발생한다.
@CrossOrigin 어노테이션의 옵션
origin: 허용할 도메인
allowedHeaders: 허용할 헤더
maxAge: preflight 결과가 캐시에 저장되는 시간
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("<http://localhost:8001>");
}
}
WebMvcConfigurer을 상속받는 Configuration 파일을 만들고 addCorsMappings 메서드를 오버라이딩하여 옵션을 지정해 CORS를 해결할 수 있음
사용가능한 메서드
addMapping: CORS를 허용할 도메인
allowedOrigins: 요청을 허용할 도메인, 프론트 도메인 URL
allowedHeaders: 요청을 허용할 헤더
allowedMethods: 허용할 HTTP 메서드
allowCredentials: 인증 요청을 허용
maxAge: 캐시에 저장될 시간
