[Spring] CORS(교차 출처 리소스 공유)란?

류재성

Apr 01, 2024

Contents

1. CORS(교차 출처 리소스 공유)란?2. Same origin 3. Cross origin 4. CORS 해결하기

1. CORS(교차 출처 리소스 공유)란?

1.1 CORS

💡

CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다. 직역하면, 교차되는 출처 자원들의 공유라는 뜻으로, 다른 출처에 있는 자원을 요청한다고 하면, 이를 교차 출처 요청이라고 한다.

💡

브라우저는 도메인 별로 정보를 관리한다. 동일한 IP와 port 번호를 가지면 same origin 으로 같은 도메인이고, IP나 port 번호 중 하나만 다르더라도 다른 도메인이다.

1.2 브라우저가 스크립트 언어를 차단하는 이유

사용자가 악성 사이트에 접속한다.

이때 해커가 몰래 심어놓은 악의적인 자바스크립트가 실행되어, 사용자가 모르는 사이에 어느 포털 사이트에 요청을 보낸다.

그럼 포털 사이트에서 해당 브라우저의 쿠키를 이용하여 로그인을 하거나 등 상호작용에 따른 개인 정보를 응답 값을 받은 뒤, 사이트에서 해커 서버로 재차 보낸다.

이외에도 사용자가 접속 중인 내부 망의 아이피와 포트를 가져오거나, 해커가 사용자 브라우저를 프록시 처럼 악용할 수도 있다.

2. Same origin

2.1 html 화면 만들기

BoardController


@RequiredArgsConstructor
@Controller
public class BoardController {
    private final BoardService boardService ;
    private final HttpSession session;

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

2.2 Javascript 요청하기

BoardController


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

page.mustache


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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>

💡

현재 서버는 포트번호가 8080이다. 같은 IP와 포트번호를 가진 도메인으로 자바스크립트 요청을 하면 허용된다.

3. Cross origin

다른 프로그램으로 동일한 코드 실행

💡

현재 서버의 포트번호는 8080이다. 포트번호가 5501인 다른 프로그램으로 요청을 하면 IP 주소는 동일하지만 포트 번호가 다르기 때문에 오류가 발생한다. “has been blocked by CORS policy”. 따라서 프론트 서버와의 통신을 위해서는 해당 cross origin 을 서버에서 허용해주어야 한다.