[230404 ~ 5] 아주 살짝 Web server 찍먹해보기

---

🍀 오늘의 날짜 : 23년 04월 04일 ~ 05일
🍀 오늘의 주제 : Webserver 찍먹

---

 

[🔖] CORS 

# SOP _ Same Origin Policy : 동일 출처 정책

   * 출처(Origin) : 프로토콜, 호스트, 포트의 조합 - 이 3 가지가 동일해야 동일한 출처

   * 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줍니다. 

   * 다른 사이트와의 리소스 공유를 제한하기 때문에 중요한 정보가 타사이트의 코드에 의해 새어나가는 것을 방지할 수 있다. 

 

 

# CORS 는 SOP 정책으로 방지된 다른 출처의 리소스를 받아올 수 있게 합니다. 

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

 

추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 

:: CORS is an HTTP-header based mechanism that allows a server to indicate any origins other than its own from which a browser should permit loading resources. ... by MDN

 

 

 

 

 

🔰 CORS 동작 방식 3 가지 

 

[1] 프리플라이트 요청(preflight Request)

서버에 요청을 보내기 전 OPTIONS 메서드로 사전 요청을 보내서 해당 출처 리소스에 접근 권한이 있는지 확인하는 것으로, 응답 헤더의 Access-Control-Allow-Origin으로 요청을 보낸 출처가 돌아오면 실제 요청을 보냅니다. 

 

* 실제 요청을 처음부터 통째로 보내는 것보다 리소스 측면에서 효율 적이고 CORS가 대비되어 있지 않은 서버를 보호할 수 있기 때문에 필요합니다. ( CORS 의 기본 사양 )

 

 

[2] 단순 요청(Simple Reqeust)

특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것 입니다. 

 

 

:: 특정 조건 

- GET / HEAD / POST 요청 중 하나

- 자동으로 설정되는 헤더 외에, Accept, Accept-Language, Content-Language, Content-Type 헤더의 값만 수동으로 설정 

  ** Content-Type 헤더에는 application/x-www-form-form-ur lencoded, multipart/form-data, text/plain

 

 

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

요청 헤더에 인증 정보를 담아 보내는 요청입니다. 출처가 다른 경우에는 별도의 설정을 하지 않으면 쿠키를 보낼 수 없습니다. 

프론트, 서버 양측 모두 CORS 설정이 필요합니다. 

 

* 프론트 : 요청 헤더에  withCredentials : true 

* 서버 : 응답 헤더에  Access-Control-Allow-Credentials : true 

 

 

 

간단한 느낀 점 
#MDN의 CORS 글은 프론트/백/서버 모두 필수적으로 읽으면 좋을 글이라고 해서 꼭 정독 해보아야 겠다. 

 

✳️ HTTP 트랜젝션 해부

✳️ 교차 출처 리소스 공유 (CROS) _ MDN

✳️ 참고 블로그 : 늦은 node.js basic server 만들기

✳️