[Network] SOP, CORS

해당 글은 VSFe 깃허브 레포를 참고하여 작성한 글입니다. (아래 출처에 표기)

 

✅ 출처

출처(Origin): 웹 페이지의 프로토콜, 호스트, 포트를 결합한 것이다.

 

▶ 출처의 구성 요소

1. 프로토콜(Protocol): 웹 페이지와 자원 간 통신 방법
2. 호스트(Host): 웹 사이트의 주소
3. 포트(Port): 웹 서버가 요청을 수신하는 네트워크 포트 번호

위 세 가지 요소가 동일하면 동일 출처라고 한다.

 

▶ 예시

http://example.com:81

1. 프로토콜: http
2. 호스트: example.com
3. 포트: 81

 

 

✅ SOP 정책에 대해 설명해 주세요.

▶ SOP 정책

SOP (Same-Origin Policy, 동일 출처 정책): 웹 보안 정책으로, 동일한 출처에서만 자원을 공유할 수 있도록 제한한다. 이 정책은 웹 페이지가 악의적인 코드나 공격으로부터 사용자의 데이터를 보호하는 데 중요한 역할을 한다.

 

 

✅ CORS 정책이 무엇인가요?

▶ CORS 정책

CORS (Cross-Origin-Resource Sharing): SOP 정책의 제약을 완화하여 웹 페이지가 다른 출처의 자원에 접근할 수 있도록 허용하는 메커니즘이다.

 

▶ CORS 요청의 종류

1️⃣ 단순 요청(Simple Requests)

• 정의
  • 추가적인 사전 검증 없이도 허용될 수 있는, 비교적 간단한 요청이다.
• 조건
  1. HTTP 메서드: GET, POST, HEAD 중 하나여야 한다.
  2. 헤더: 서버가 기본적으로 허용하는 헤더만 포함해야 한다.
     • 예: Accept, Accept-Language, Content-Language, Content-Type 중 application/x-www-form-urlencoded, multipart/form-data, text/plain 등

• 작동 방식
  1. 클라이언트(브라우저)는 CORS 요청을 보낼 때 Origin 헤더를 포함하여 출처를 서버에 전달한다.
  2. 서버는 응답에 Access-Control-Allow-Origin 헤더를 포함하여 허용된 출처를 명시한다.

🔽 예시

GET /resource HTTP/1.1
Host: api.example.com
Origin: https://www.example.com

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.example.com

 

2️⃣ 복잡한 요청(Preflight Requests)

• 정의
  • 사전 요청(Preflight Request)을 필요로 하는 요청이다.
• 조건
  1. HTTP 메서드: PUT, DELETE, PATCH 등 SOP의 기본 메서드 외의 메서드를 사용한다.
  2. 헤더: 사용자 정의 헤더를 포함하거나, Content-Type이 application/x-www-form-urlencoded, multipart/form-data, text/plain 이외의 값인 경우이다.

기본 메서드: 추가적인 사전 검증 없이 사용할 수 있는 HTTP 메서드로, 일반적으로 서버의 상태나 데이터베이스를 변경하지 않는다고 간주되어 안전하다고 여겨진다. 예로는 GET, POST(특정 조건에 한해), HEAD가 있다.

• 작동 방식
  1. 브라우저는 실제 요청을 보내기 전에, OPTIONS 메서드를 사용하여 Preflight 요청을 보낸다. 이 요청은 서버가 해당 요청을 허용하는지 확인한다.
  2. 서버는 Preflight 요청에 대해 허용 여부를 응답으로 반환한다. 이 응답에는 Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Allow-Origin 헤더가 포함되어야 한다.
  3. Preflight 요청이 성공적으로 처리되면, 브라우저는 실제 요청을 서버에 보내고, 서버는 이 요청에 대해 CORS 관련 헤더를 포함하여 응답을 반환한다.

🔽 예시

OPTIONS /resource HTTP/1.1
Host: api.example.com
Origin: https://www.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header

PUT /resource HTTP/1.1
Host: api.example.com
Origin: https://www.example.com
X-Custom-Header: value

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.example.com

 

 

✅ Preflight에 대해 설명해 주세요.

▶ Preflight

Preflight 요청: CORS 요청의 일환으로, 브라우저가 실제 요청을 보내기 전에 서버가 해당 요청을 허용하는지 확인하기 위해 보내는 사전 요청이다.

위 CORS 요청의 종류에서 설명하여 생략하겠다.

 

 

📍 문제 출처

Tech-Interview / 03-NETWORK.md

 

📍 참고 자료

• SOP, CORS, Preflight-Request
• SOP와 CORS와 Preflight와 Credentials
• CORS / SOP가 머임