[WEB] SOP & CORS

🌐 SOP(Same-Origin Policy)

SOP는 동일한 출처 사이에서만 리소스 공유 가능 규칙이다. 이는 다른 출처의 리소스 사용을 제한하기 위한 브라우저 보안 정책이다.

SOP는 외부 사용자가 CSRF 또는 XSS 등 공격을 통해 사용자 정보를 탈취당하는 것을 1차적으로 방어하기 위해 같은 출처에서만 자원을 공유할 수 있게 만들었다.

출처는 URL의 Protocol, Host, Port 3가지로 정의가 되며, 같은 출처를 판단하는 기준은 위 3개가 모두 같은지 확인한다.

1) Protocol: http://www.domain.com:3000 과 https://www.domain.com:3000 은 다른 프로토콜로 동일 출처가 아님 ❌

2) Host: https://www.domain.com:3000 과 https://domain.com:3000 은 다른 호스트로 동일 출처가 아님 ❌

3) Port: https://www.domain.com:3000 과 https://www.domain.com:8080 은 다른 포트임으로 동일 출처가 아님 ❌

https://www.domain.com:3000/main 과 https://www.domain.com:3000/search 은 프로토콜, 호스트, 포트가 모두 동일함으로 동일 출처가 맞음 ⭕

🔁 CORS(Cross-Origin Resource Sharing)

CORS는 출처가 다른 리소스를 사용할 수 있도록 하는 정책이다. 이는 SOP에 의해 막혀야 될 요청을 풀어주는 정책이다.

💡만약 모든 출처에 대한 요청을 허용하고 싶다면 Access-Control-Allow-Origin 헤더를 (*)와일드카드로 설정하면 된다.

⚙️ CORS 동작 원리

1) 브라우저는 다른 Origin으로 요청을 보냄, 이때 Origin 헤더에 자신의 Origin을 설정

2) 서버가 응답을 받고 응답에 Access-Control-Allow-Origin 헤더에 설정된 Origin 목록 검사

3) 요청이 들어온 Origin 헤더 값이 포함되어 있는지 확인

🙋‍♂️ 단순 요청(Simple Request)

- 단순 요청 조건

• HTTP 메서드가 GET, HEAD, POST 중 하나!

• 브라우저에 의해 자동 설정되는 헤더를 제외하고, 요청 헤더가 여기 포함된 것만 가능!
  (Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width ...)

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

• 단순 요청이 아닌 경우, 서버에 실제 요청을 보내기 전 미리 프리플라이트 요청을 보내서 먼저 요청이 안전한지 확인을 한다. 이후에 확인이 되면 실제 요청을 서버에 보내 총 두번의 요청을 전송한다.

🙋‍♀️ 인증정보를 포함한 요청(Credentialed Request)

• 해당 요청은 쿠키, 토큰와 같은 사용자 식별 정보가 담긴 요청을 의미한다. 기본적인 API 요청은 다른 출처에 요청하는 경우에는 쿠키 정보나 인증 정보와 관련된 헤더를 요청에 포함하지 않는다. 이때 이를 포함하고자 한다면 credentials 옵션을 사용한다.

same-origin: 기본값, 같은 출처 간 요청에만 인증 정보 포함

include: 다른 축처에 요청하는 경우 항상 인증 정보 포함

omit: 인증 정보를 포함하지 않음

서버는 응답 시 Access-Control-Allow-Credentials 헤더를 true로 설정해야한다.

이때 Access-Control-Allow-Origin 헤더 값은 (*)와일드카드를 사용할 수 없으면, 출처가 명확해야 한다.