해커에게 필요한 웹 구조 해부하기 10

갓잇? 웹 애플리케이션 보안 완벽 가이드

코드를 작성하는데 개념 혼동을 피하기 위해 아래와 같이 다른 용어이지만 같은 개념에 대해 미리 주지하였다.

이벤트 = 핸들러 = 메서드 = 프로퍼티 -> 데이터 값을 호출하거나 전달하기 위한 일련의 이벤트를 발생시키는 함수(아래 도식에서 addRow(), createOrder(), add() )로 명칭에서 보이듯이 첫 글자가 전부 소문자이다.

함수 = 생성자 = 인스턴스 = 모듈  -> 그 데이터 값의 속성을 정의하여 해당값만 지니는 함수(아래 도식에서 FormHandler, Cafe, DataStore, CheckList, Row)로 명칭에서 첫 글자가 전부 대문자이다.

도식 3. CoffeeOrder 애플리케이션 기능 구현을 위한 로직으로 주문 폼(form)을 제출했을 때의 이벤트 순서

위의 이벤트 순서 도식에서 가운데 CheckList 박스(모듈)라는 아직까지 코드로 짜지 않은 로직이 하나 보일 것이다. 이번 섹션은 데이터를 DOM(Document Object Model, 브라우저 화면에서 보이는 주문 폼 <form>과 관련된 모듈)으로 보내는 코드를 추가한다. 그러면 위의 이벤트가 어떻게 진행하는지 한 번 따라가 보자. 먼저 앞서 만든 FormHandler라는 모듈이라는 비즈니스 로직(애플리케이션을 컨트롤하기 위한 구성요소라는 개념으로 커피를 주문받은 뒤에 바리스타에게 주문 내역을 확인시켜주고 완료(제거)하는 업무를 제어해주는 파트)에 사용자가 주문한 데이터를 제출(submit)한다. 이 모듈은 사용자가 상호작용(Interactive, 반응을 보이는)하는 폼과 나머지 코드를 연결하는 역할을 한다. submit 이벤트를 가로채 사용자의 입력을 createOrder()라는 함수(메서드)를 통해 Cafe 모듈(인스턴스)에 제공하여 마찬가지로 DataStore 인스턴스에 add() 메서드를 통해 저장하게 한다.

그리고 새롭게 추가할 UI(User Interface) 코드의 다른 부분인 CheckList 모듈은 Cafe 모듈과 마찬가지로 FormHandler로부터 데이터를 받지만, 대기 주문 체크리스트를 페이지에 추가하는 동작을 한다. 체크리스트의 항목을 클릭했을 때 체크리스트는 페이지에서 해당 항목을 지우고 Cafe 모듈에도 DataStore에서 제거하도록 알린다.

폼 제출 하기(각 주문 항목별 데이터를 입력) 전의 빈 대기 주문 영역(Pending Orders 명칭의 체크리스트)과 주문 후에 해당 아이템이 표시되는 것을 확인할 수 있다.

그리고 Row 모듈(생성자)을 통해 커피 주문을 표시하기 위해 필요한 모든 DOM 엘리먼트와 체크박스 및 설명 문구를 생성했다. 이 과정의 첫 번째로 jQuery를 사용하여 DOM 엘리먼트를 생성하면서 체크리스트 항목이 될 개별적인 엘리먼트를 위한 변수를 선언했다. 다음으로 생성자는 이들을 DOM 엘리먼트의 하위 트리로 붙인다. 이 일련의 과정을 본인이 업로드한 gitHub Repository의 소스코드를 통해서 확인하기를 바란다. 주석으로 해당 엘리먼트를 생성하기 위한 존 레식의 천재적인 jQuery 기능을 main.js와 CheckList.js 소스에 일목요연하게 표시해놨으며, 이 코딩 과정을 진행하기 위해 참고했던 책의 설명도 함께 보면 좋겠다(격찬을 받을 수밖에 없는 책이다!).

사용자 주문 폼을 계속해서 제출(submit)하면 주문 대기 체크리스트에 항목이 추가되고, 애플리케이션의 DB에도 주문 정보가 추가된다.

이후 코딩은 체크리스트의 항목을 클릭하여 주문 처리를 완료(애플리케이션의 DB에서 해당 데이터를 삭제)하면 체크리스트 항목 또한 페이지에서 없어져야 하는 과정이다. 순차 다이어그램으로 체크리스트 항목을 클릭할 때의 도식을 하나 더 추가해서 이 로직의 코딩 실습을 계속 진행할까 하다가, 이 정도 했으면 이제 해커에게 필요한 여기까지서의 웹 구조에서 뭔가를 절단 낼 때가 됐다.

만약 주문하기 전에 일반 사용자의 세션 ID(cookie)를 도용하면 이것을 탈취한 사람(블랙 해커)이 사용자의 결제수단으로 커피 주문을 하고 카페에 가서 이 일반 사용자의 개인정보를 제시하여 커피를 마실 수 있다. 위의 세션 정보를 가로채는 방법인 CSRF(Cross-Site Request Forgery, 크로스 사이트 요청 위조)을 통해 변조된 세션으로 해당 일반 사용자의 접속 타이밍을 빼앗을 수 있다. 이것을 다음 섹션에서 테스트해 보겠다.

참조

크리스 아키노. (2017).  FRONT-END WEB DEVELOPMENT: The big NERD ranch guide. (2016). 한국 번역판 역자 이지은(2017). 제대로 배우는 프런트엔드 웹 개발. 서울 : BJ(비제이 퍼블릭).