[Web] CORS(Cross-Origin Resource Sharing)
CORS(Cross-Origin Resource Sharing)란, 웹 애플리케이션에서 다른 출처(Origin)의 리소스에 접근하는 보안 메커니즘이다.
이는 보안 상의 이유로, 웹 브라우저가 동일 출처 정책(Same-Origin Policy, SOP)에 따라 실행되는 기본적인 보안 원칙을 완화하기 위해 도입되었다.
왜 CORS가 도입되었을까?
SOP(Same-Origin Policy)는 웹 보안을 강화하기 위해 브라우저에서 적용되는 중요한 보안 메커니즘 중 하나이다.
이 정책을 통해, 스크립트가 실행 중인 웹 페이지에서 로드한 리소스(JS, CSS 등)만 접근이 허용되며, 이로 인해 악의적인 웹 페이지에서 사용자의 브라우저를 통한 다른 도메인의 리소스에 접근하는 시도를 방지할 수 있었다.
하지만 시대의 흐름에 따라 웹 기술이 발전하면서 다른 도메인의 데이터나 서비스에 접근해야 하는 경우(제 3자가 제공하는 API를 호출하는 경우 등)가 많아졌고, SOP라는 브라우저의 정책의 근본적인 부분을 해결할 방법이 필요했다.
그래서 리소스를 호출할 수 있는 출처를 서버가 명시해두면 출처가 다르더라도 요청과 응답을 주고받을 수 있도록 만들어진 정책이 CORS이다.
CORS의 작동 원리
- 웹 브라우저에서 클라이언트가 다른 출처의 리소스에 HTTP 요청을 보낸다.
- 서버는 요청을 수신하고, 요청 헤더에 포함된 Origin 값을 확인한다. 여기서 Origin은 요청을 보낸 출처의 주소이다.
- 서버는 해당 Origin이 자신의 리소스에 대한 요청을 허용하는지 검사한다.
- 만약 서버가 요청으르 허용하면, 응답 헤더에 허용된 Origin을 포함하여 클라이언트에게 응답을 보낸다.
- 웹 브라우저는 응답을 확인하고, 허용된 경우 데이터를 처리하고 표시한다. 만약 그렇지 않은 경우, 에러를 발생시킨다.
CORS 헤더
CORS는 HTTP 헤더를 통해 제어된다. 주요 CORS 관련 헤더는 다음과 같다.
Origin: 브라우저가 요청을 보내는 페이지의 출처를 나타낸다.Access-Control-Allow-Origin: 서버가 허용하는 origin 목록을 나타낸다.Access-Control-Allow-Methods: 서버에서 허용하는 HTTP 메서드 목록을 나타낸다.Access-Control-Allow-Headers: 서버에서 허용하는 요청 헤더 목록을 나타낸다.Access-Control-Expose-Headers: 브라우저에 응답 헤더 중에서 접근 가능한 헤더 목록을 나타낸다.Access-Control-Allow-Credentials: 인증정보(Cookie, HTTP 인증 등)를 요청에 포함할 수 있는지 여부를 나타낸다.Access-Control-Max-Age: 사전 요청의 최대 유효 기간을 지정하는 헤더로, 브라우저가 미리 서버에게 허용 여부를 물어보는 사전 요청을 최적화한다.
CORS 설정
- Spring Boot 애플리케이션의 Controller 단에서 CORS를 활성화
@CrossOrigin(origins = "*", allowedHeaders = "*") // 모든 출처 허용
@RestController
public class testController {
// @CrossOrigin(origins = "http://localhost:3000") -> 메서드 단에도 적용 가능
@GetMapping("/api/data")
public String getData() {
return "stub data";
}
}
- React 애플리케이션에서 데이터 받을 때 예시
fetch("http://localhost:8080/api/data", {
method: "GET",
headers: {
Origin: "http://localhost:3000", // 요청하는 출처 주소
},
})
.then((response) => response.text())
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));
- 서버에서 전역으로 CORS 설정
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000") // 허용할 출처 주소 설정
.allowedMethods("GET", "POST", "PUT", "DELETE") // 허용할 HTTP 메서드 설정
.allowedHeaders("Authorization", "Content-Type") // 허용할 헤더 설정
.allowCredentials(true); // 인증 정보 허용
.maxAge(60 * 60); // 3600초 == 60분
}
}
Leave a comment