Immersive Course
Immersive Course(이하 IM)는 프로그래밍 교육기관 코드 스테이츠의 웹 개발 심화 코스이다. 아래 내용은 IM에서 배우고, 내가 찾아보고, 다른 수강생들이 전해 준 지식이다.
1. Authentication Sprint
스프린트 Shortly Express는 클라이언트 요청을 받아 클라이언트를 인증한 후, 데이터베이스의 정보를 반환하는 일련의 작업이었다. 스프린트 당시에는 인증과 쿠키, 사용하는 모듈들을 잘 이해하지 못했지만, 분기마다 보는 시험을 치르고 내용을 되짚어보면서 어느 정도 이해할 수 있었다. 저번 스프린트에 이어서 통신 그 자체에 대해 더 공부해야겠다고 느꼈다.
인증하기
클라이언트에서는 서버로 다양한 요청을 보낸다. 요청 발신지 역시 다양하다. 서버는 이 요청이 누구에게서 왔는지, 요청에 대해 답을 해도 되는지 여부를 판단하기 위해 발신지를 파악해야 한다. 어떤 사용자가 서비스에 로그인한 뒤 프로필 정보를 확인하고자 한다면, 우선 로그인을 하면서 아이디와 암호 정보를 서버로 보낼 것이다. 그러면 서버는 정보를 받아 회원 정보 데이터베이스와 대조하여 요청자가 유효한 회원인지를 조회한다.
하지만 대부분의 통신에서 사용하는 HTTP 통신은 하나의 통신과 통신 사이의 맥락이 없다. 그러므로 유효한 회원인지를 확인한 후 해당 회원이 연이어 다른 요청을 보내더라도, 이 회원이 인증을 이미 거친 - 정보를 볼 자격이 있는 - 회원이라는 사실을 알 수 없다. 이때 필요한 객체가 세션과 쿠키다.
Session, Cookie
Session
세션은 웹 브라우저가 서버에 접속하고 있는 상태, 그 기간이라고 볼 수 있다. 클라이언트가 서버로 어떤 요청을 보내면, 서버는 필요 시 클라이언트 유효성을 인증하고 나서 세션 ID를 쿠키에 실어 클라이언트로 돌려보낸다. 그리고 서버에도 세션 ID를 저장한다. 세션 ID는 서버가 클라이언트를 구분하기 위해 부여하는 중복되지 않은 KEY로, 웹 브라우저가 서버 접속을 종료하면 삭제된다.
세션 ID를 받은 클라이언트는 다음 요청부터 항상 세션 ID를(이를 담고 있는 쿠키를) 통신 헤더에 포함해서 서버로 보낸다. 서버에서는 받은 요청 헤더에 세션 ID가 존재한다면 사용자 정보(아이디, 암호 등)를 확인하지 않고 세션 DB에서 세션 ID를 통해 자격을 확인할 수 있다.
Cookie
쿠키는 클라이언트의 여러 가지 정보를 클라이언트 단에 저장해놓고 참조하는 파일이다. 세션 ID를 받았다면 그도 쿠키에 포함된다. 쿠키는 통신마다 통신 헤더에 포함되어 서버로 전달된다. 장바구니 목록, 팝업창에 '7일간 보지 않기' 체크 여부 등을 저장하기에 알맞다. 서버에서 쿠키에 저장할 객체를 지정할 때 유효기간을 설정할 수 있어서, 클라이언트에서 쿠키를 지우지 않는다면 원하는 기간만큼 클라이언트에 저장할 수 있다.
쿠키 내용 및 그 안에 포함된 세션 ID는, 크롬 기준 개발자 도구에서 Application - Cookies 항목에서 실시간으로 확인할 수 있다.
세션과 쿠키의 단점
- 취약한 보안 :
쿠키는 클라이언트에 저장되고 통신마다 전송되기 때문에 접근하기 쉽다. 그래서 탈취되어도 문제없는 정보만 저장해야 한다. 세션ID 역시 쿠키에 저장되지만, 서버에 있는 세션 DB 정보에 접근하지 못한다면 아무런 소용이 없으므로 쿠키보다는 상대적으로 안전하다. 하지만 세션 ID가 유효한 기간에 누군가가 요청 자체를 탈취한다면 정보가 유출될 가능성도 있다. - 자원 사용 :
세션ID는 서버 세션 DB에 저장되기 때문에 접속자가 많을수록 서버 공간을 많이 차지하게 된다.
2. Hiring Assessment
Hiring Assessment는 분기별로 치루는 시험이다. 기간 동안 배운 내용을 종합적으로 적용할 수 있는 문제가 출제된다. 이번 시험에는 인증과 클라이언트에서 서버로 정보를 요청하는 과정을 구현해야 했다. 인증과정이나 요청 자체가 작동하는 흐름은 이해하고 있었지만, 그를 코드로 작성하면서 막히는 부분이 많았다. 특히 서버에서 사용하는 express와 관련 모듈들이 담당하는 기능이 무엇인지 정확히 모르고 있었다. 관성적으로 npm install 명령을 입력했던 지난날을 반성했다.
Express.js의 미들웨어들
[ Express 미들웨어 | Express.js ]
express.js는 버전 3에서 4대로 바뀌며 많은 기능이 추가되고, 기존에 내장되었던 기능 몇가지가 모듈화되었다. 그중 스프린트들에서 사용했던 모듈들은 다음과 같다.
express-session
[ express-session | npm ]
[ 쿠키를 안전하게 사용 | Express.js ]
...express-session 미들웨어는 세션 데이터를 서버에 저장하며, 쿠키 자체에는 세션 데이터가 아니라 세션 ID만 저장됩니다. 기본적으로 express-session은 인메모리 스토리지를 이용하며, 프로덕션 환경용으로 설계되지 않았습니다. 프로덕션 환경에서는 확장 가능한 session-store를 설정해야 합니다. ...
cors
[ cors | npm ]
[ HTTP 접근 제어 (CORS) | MDN ]
...Cross-Origin Resource Sharing (CORS)은 추가 HTTP 헤더를 사용하여 브라우저가 한 출처에서 실행중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록하는 메커니즘입니다. 다른 출처의 자원. 웹 응용 프로그램은 자체와 다른 출처 (도메인, 프로토콜 또는 포트)를 가진 리소스를 요청할 때 cross-origin HTTP 요청을 실행합니다.
cross-origin request의 예: domain-a.com에서 제공되는 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 domain-b.com/data.json를 요청.
...보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한합니다. 예를 들어, XMLHttpRequest and the Fetch API는 same-origin 정책을 따르기에, 즉, 다른 API의 응답에 올바른 CORS 헤더가 포함되어 있지 않으면 해당 API를 사용하는 웹 응용 프로그램은 응용 프로그램이로드 된 동일한 출처의 리소스 만 요청할 수 있습니다...
cor는 CORS 요청에 대해 어떻게 대응할지 상세한 옵션을 지정할 수 있는 express.js의 미들웨어이다.
body-parser
[ body-parser | npm ]
body-parser는 form 데이터, AJAX 요청에 포함된 body를 해석할 수 있는 미들웨어이다. JSON, URL-encoded,Raw, Text형식을 해석한다.
