<node.js> SOP와 CORS 알아보기

서버는 백엔드만의 영역?

no…안타깝게도 아니다…와이…

오늘은~ 작고 귀여운 노드 서버 기초에 대해 배워볼 것인데

이번에 실습하는 API 서버는 프론트엔드 개발자라도 구현할 수 있어야 한다

SOP

Same-Origin Policy, 동일 출처 정책

동일 출처와 동일 출처가 아닌 문서를 구분하여 위협 요소가 있을 수 있는 경로를 줄여줌

다른 사이트와의 리소스 공유를 제한하여 정보가 다른 사이트의 코드에 의해 유출되는 것을 방지

프로토콜, 호스트, 포트가 모두 같아야 함

• https://www.myhome.com vs http://www.myhome.com
  ⇒ 프로토콜이 다름, 동일 출처 X
• https://room.myhome.com vs https://myhome.com
  ⇒ 호스트가 다름, 동일 출처 X
• http://myhome.com:81 vs http://myhome.com http 프로토콜의 기본 포트는 80 / http://myhome.com = http://myhome.com:80
  ⇒ 포트가 다름, 동일 출처 X
  
• https://myhome.com:443 vs https://myhome.com https 프로토콜의 기본 포트는 443 / https://myhome.com = https://myhome.com:443
  ⇒ 프로토콜, 호스트, 포트가 모두 같은 동일 출처
  

CORS

Cross-Origin Resource Sharing, 교차 출처 리소스 공유

HTTP 헤더를 사용하여, 브라우저가 다른 출처의 리소스에 접근권한을 부여하는 메커니즘

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

CORS 동작 방식

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

실제 요청 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스의 접근 권한 유무를 확인

[출처 : https://livebook.manning.com/book/cors-in-action/chapter-4/14]
프리플라이트의 개념은 동일 출처 정책에 의존하는 기존 서버를 손상시키지 않고 리소스의 접근 요청을 할 수 있도록 하기 위해 존재

CORS를 고려해서 만들어진 서버는 프리플라이트 요청에 적절하게 응답

하지만 CORS 이전의 SOP만 고려한 서버에 요청을 보내면 서버는 올바른 프리플라이트 응답이 돌아오지 않고, 실제 요청도 보내지지 않음 ⇒ CORS를 인식하지 못하는 서버의 보안적 문제 방지/보호

2 단순 요청 (Simple Request)

특정 조건이 만족 시, Preflight의 요청없이 바로 서버로 요청을 보냄

GET, POST, HEAD 메서드를 사용하고 Content-Type이 있음

3. 인증정보를 포함한 요청 (Credentialed Request)

요청 헤더에 인증 정보를 담아 요청을 보냄

• 프론트, 서버 양측 모두 CORS 설정이 필요
• 프론트에서는 요청 헤더에 withCredentials : true ,서버에서는 응답 헤더에 Access-Control-Allow-Credentials : true 를 넣어줘야 함
• 서버 측에서 Access-Control-Allow-Origin을 설정할 때, 모든 출처를 허용한다는 뜻의 와일드카드(*)로 설정하면 에러가 발생