Cross-Origin-Resource-Sharing 정책(CORS)

썩은요플렛

Aug 05, 2024

Contents

CORS 정책이란?

CORS(Cross-Origin-Resource-Sharing) 교차 출처 리소스 공유 정책은 웹 브라우저가 다른 출처(도메인, 프로토콜, 포트)의 리소스를 요청할 수 있도록 허용하는 보안 기능.

이는 동일 출처 정책(SOP - Same-Origin-Policy)의 제한을 완화하기 위해 사용된다. 동일 출처 정책은 악의적인 웹사이트가 사용자의 데이터를 훔치는 것을 방지하기 위해 도입된 보안 조치이다.

하지만, 이러한 제한은 정당한 교차 출처 요청에도 적용되어 웹 애플리케이션의 유연성을 떨어뜨릴 수 있다. 이를 해결하기 위해 CORS가 사용된다.

동일 출처 정책 (SOP 정책)?

동일 출처란 프로토콜, 호스트, 포트가 모두 같은 경우를 말한다.

즉, http://localhost.com 과 http://localhost.com:80 은 동일 출처로 간주함. 그러나 http://localhost.com 과 https://localhost.com 은 다른 출처이다.

동일 출처 정책은 브라우저가 동일 출처가 아닌 리소스에 대한 요청을 차단하도록 한다.

요청의 종류

CORS 요청은 크게 두 가지로 나뉜다.

단순 요청(Simple Request):

GET, POST, HEAD 메서드 중 하나를 사용

커스텀 헤더를 포함하지 않는다

Content-Type은 application/x-www-form-urlencoded , multipart/form-data , text/plain 중 하나여야 한다.

단순 요청의 경우, 브라우저는 요청을 보내기 전 preflight 요청을 보내지 않는다.

프리플라이트 요청(Preflight Request):

단순 요청의 조건을 충족하지 않는 요청

OPTIONS 메서드를 사용하여 서버가 실제 요청을 허용하는지 확인하는 요청을 먼저 보낸다.

브라우저는 preflight 요청을 보내고, 서버가 허용하는 경우에만 실제 요청을 보낸다.

BoardController


@GetMapping("/test/page")
    public @ResponseBody String page(){
        return "page";
    }

    @CrossOrigin(origins = "http://127.0.0.1:5500") // 모든 도메인 허용 (위험함) 프론트쪽 서버만 허용해 주어야 한다
    @GetMapping("/test")
    public @ResponseBody String test(){
        return "ok";
    }

test.mustache


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>page</h1>
    <hr>
    <script>
        async function download(){
           let response = await fetch("http://localhost:8080/test");
           let body = await response.text();
           console.log(body);
        }
        download();
    </script>
</body>
</html>

vscode


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>page</h1>
    <hr>
    <script>
        async function download(){
           let response = await fetch("http://localhost:8080/test");
           let body = await response.text();
           console.log(body);
        }
        download();
    </script>
</body>
</html>