[기술면접대비] CORS, SOP에 대해 알아보자 🧐

요약

CORS(Cross-Origin Resource Sharing)는 서로 다른 도메인 간에 리소스 공유를 허용하는 웹 애플리케이션 보안 정책이다.

 

보안 상의 이유로 브라우저에서는 기본적으로 동일한 출처(프로토콜, 호스트, 포트)에서만 리소스에 접근을 허용하고 다른 출처에서는 보안 상의 이유로 접근을 차단하는 SOP(Same-Origin Policy)가 적용된다.

하지만 CORS를 사용하면, 허용된 출처 외의 다른 출처에서도 특정 리소스에 접근할 수 있도록 서버 측에서 설정할 수 있다.

 

따라서 CORS를 사용하면 다양한 출처에서 리소스를 공유할 수 있으므로, 클라이언트와 서버 간의 커뮤니케이션을 보다 유연하게 구성할 수 있다.

🙋‍♀️ SOP에 대해 먼저 알아보자

SOP(same origin policy)란, 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식이다.

같은 출처의 URL끼리만 API 등의 접근이 가능하도록 하는 것.

출처(orgin)란?

URL의 protocol, host, port를 통해 같은 출처(same origin)인지, 다른 출처(cross origin)인지를 판단한다.

→ protocol, host, port가 다 같아야 같은 출처. 셋 중 하나라도 다르면 다른 출처이다.

SOP 사용이 왜 보안에 도움이 될까?

우리가 "A 사이트"에 개인정보를 조회하는 요청을 할 때 브라우저에 저장된 "A 사이트"의 토큰을 실어서 "A 사이트"로 보낸다.

이 때 정보(토큰)를 탈취하여 다른 서버로 보내버리는 식으로 개인정보가 해킹 될 수 있다!

 

예를 들면, 사용자 A가 자소서를 작성하러 노션(A 사이트)에 들어오려고 로그인을 하고 사용하면, 이 사용자는 현재 노션의 인증 토큰을 얻은 상태이다.

그때 해커가 보낸 링크(다른 서버)를 사용자가 클릭한다면? 사용자의 토큰을 가지고 해커가 보낸 실행 스크립트가 실행된다. (피싱 느낌)

SOP, 언제 사용해?

1. A 사이트가 다른 서버의 주소를 확인
2. 출처가 다른 cross origin임을 확인하고, sop에 위배되기 때문에 요청을 받아들일 수 없다고 경고를 함

만약 다른 출처의 리소스가 필요하다면?

A 사이트와 연결된 다른 사이트로 정보 요청•반환 등을 해야할 때도 있을 것이다.

그럴 때 CORS가 필요하다!

CORS란?

Cross Origin Resource Sharing. 서로 다른 출처(origin)의 리소스간에 상호 작용(자원 공유)을 허용하는 HTTP 헤더 기반 메커니즘.

요청을 막고 있는 SOP를 풀어주는 역할을 한다.

 

CORS error message가 뜨는 경우 "이 사이트에 가고 싶다면 CORS를 허용해줘라" 라고 말하는 것

작동 방식

1. 클라이언트(웹 브라우저)는 서버에 Ajax 요청을 보냅니다.
2. 서버는 응답 헤더에 CORS 헤더를 추가하여 클라이언트에게 보냅니다.
   • CORS 헤더
     • 허용되는 출처 도메인을 지정
     • 자격 증명(쿠키, HTTP 인증 헤더 등)을 포함한 요청을 허용할지 여부를 지정
     • 허용되는 HTTP 메서드(GET, POST, PUT, DELETE 등)를 지정
     • 허용되는 HTTP 헤더를 지정
     • 캐싱된 CORS 응답의 유효 기간을 지정
3. 클라이언트는 CORS 헤더를 검사하여 요청이 허용되는지 확인합니다.
   • CORS 설정되어 있는지 확인
4. 요청이 허용되면 클라이언트는 서버로부터 응답 데이터를 받습니다.
5. 요청이 허용되지 않으면 클라이언트는 오류를 받습니다.

CORS 요청

Preflight Request

• 사전 확인 작업
• 실제 요청을 보내기 전에 Preflight Request라는 것을 서버로 먼저 보낸다.
  • 서버에서 허락이 떨어져야 본격적으로 요청을 보낼 수 있다.
• Preflight Request가 실패하거나 서버가 CORS 헤더를 올바르게 보내지 않으면 CORS 오류가 발생해 클라이언트는 실제 요청을 수행하지 못한다.

Simple Request

• Preflight Request 없이 서버에 바로 요청 전송
• HTTP 메서드가 GET, HEAD, POST 중 하나여야 한다.
• CORS Simple Request가 통과하지 못하면 브라우저는 Preflight Request를 사용하여 서버에 요청한다.

결론

CORS는 보안을 위해 사용한다.

 

악의를 가진 사용자가 소스 코드를 쓱 구경한 후 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting)와 같은 방법을 사용하여 애플리케이션에서 코드가 실행된 것처럼 꾸며서 사용자의 정보를 탈취하는 것을 방지하기 위함이다.