해커에게 필요한 웹 구조 해부하기 11
폼 검증에서 Ajax로 서버 데이터(콜백)의 중첩 문제 해결까지
섹션 #10에서 말한 바대로 지금까지 만든 웹 사이트의 취약점을 CSRF(크로스 사이트 요청 변조)라는 공격으로 절단내기 전에 한국이 코로나 바이러스의 공격으로 절단날 거 같아서, 일단 프런트 엔드단의 Coffee Order 애플리케이션 코딩 작업을 완료하겠다. 그리고 순차적으로 해당 웹서비스 구조에서 드러나는 취약점을 알아보려고 한다.
필자는 이것을 실습하기 위해 참조한 책을 사지는 않고 여태껏 어느 한 대형서점에서 본인 랩탑으로 치고 보고 있다. 이 책 저자의 말대로라면 이 책의 주요한 골자는 프런트엔드 개발 참고서나 안내서를 보기 위해 초기 난관을 극복하는 가이드로 생각하면 되고 5일 과정 강의량 정도라고 한다. 그래서 필자도 이 책을 통해 일전에 배운 적이 있었던 프런트 엔드단의 다채로운 자바스크립트 라이브러리(Ajax, Node.js,...)를 환기하면서 웹 구조의 취약점을 살펴보고 있는 것이다. 웹 해킹을 위한 취약점 분석을 하기 위해 참조할 책은 한국인 3인방이 일본 보안 개발자의 책을 번역한 것으로 약 3개월 전에 사서 회사 책상에 관상용으로 두고 있었다(『웹 애플리케이션 보안 완벽 가이드』).
CoffeeOrder App의 최종 실습과정으로 디퍼드 객체는 then으로 등록된 콜백을 실행하는 구조의 로직섹션 #10에서 만들었던 CoffeeOrder App의 실습과정을 정리하면, CoffeeOrder의 사용자는 폼을 채워(입력) 주문을 추가할 수 있다. 폼을 제출하면 애플리케이션의 데이터베이스에 주문 정보를 추가하고 아래와 같이 주문을 체크리스트(Pending Orders) 항목으로 보여준다(아키노, 2017).
폼을 제출하면 체크리스트에 항목 추가됨(현재 3개의 주문이 들어와 있는 상태).다음으로 사용자는 체크리스트 항목을 확인할 수 있어야 한다. 체크리스트 항목을 클릭하는 것은 주문이 이미 처리된 것이라는 의미로, 주문 정보는 데이터베이스에서 삭제되고 체크리스트 항목은 페이지에서 없어져야 한다(아키노, 2017).
이것을 포함한 이 서비스 개발의 마지막까지의 실습과정을 크게 다음과 같이 네 가지 파트로 나뉘어서 코딩한다.
줄을 클릭하여 주문 처리 완료 (2/24 완료)
폼 검증 (2/26 완료)
Ajax (백그라운드 상에서 데이터 전송을 위한 라이브러리) 사용 (2/26 완료)
Ajax 자바스크립트 라이브러리는 이 시리즈의 섹션 #2에서 잠깐 언급한 적이 있었다.
“Ajax를 jQuery 라이브러리를 통해 이용하면 기존의 화면에 뿌려진 웹페이지에서 바뀐 부분만을 업데이트해서 뿌릴 수 있다.”
아래 부가설명은 참조사항이다.
MS사에서 만든 HTML 마크업을 보완하기 위한 XML 페이지를 다루는 통신 프로토콜 정도라고 말이다. 실습 간에 참조한 책에서는 "Ajax" 용어는 "asynchronous JavaScript and XML, 에이잭스"의 준말로 '비동기적'인 데이터 통신 스타일을 위해 일반적으로 사용한다고 한다. 어떠한 기술이 실질적으로 연관되어 있음에도 불구하고 말이다. 이 기술이란 앞서 말한 비동기(asynchronous)라는 개념이다. 앱에서의 비동기 통신이란 요청을 함과 동시에 서버의 응답을 기다릴 필요 없이 다시 요청을 보낼 수 있는-미리 약속된 신호에 의한- 통신을 일컫는다. 보통의 이 단어의 직관적인 뉘앙스와는 달리 말이다(반면에 동기식(synchronous) 통신은 하나의 요청 후 그것에 대한 응답을 받은 뒤에 새로운 요청을 할 수 있는 순차적인-일정한 속도의- 통신을 일컫는다). 현재 Ajax는 이러한 비동기식으로 주고받는 데이터 통신의 표준 메커니즘이 되었다.
디퍼드와 프로미스 (콜백과 관련된 객체)를 이용한 데이터 로딩 (2/27 완료)
해당 실습 과정의 소스 코드는 본인의 GitHub Repository에서 다운로드할 수 있다. 그리고 가이드라인은 아래의 참조 서적의 설명을 확인하기를 바란다. 책의 역자가 현업 개발자라서 발 번역이 아니다(그런데 중간중간 소스 코드에서 오탈자가 간혹 보이긴 한다). 개발 초짜인 필자도 충분히 이해를 쫓을 수 있었으며, 만약 본인이 한 영어 한답시면 해당 서적 제목의 영문명을 구글링 해보시라. 원서의 내용도 인터넷으로 다운로드가 가능하다.
다음 섹션부터 지금까지 만든 웹서비스에서 테스트 가능한 웹 취약점을 들춰보면서 웹 구조 절단을 마저 하겠다. 단 대한민국이 절단 나있지 않았다면 말이다(아... 절단 나기 일보 직전이데;).
참조
크리스 아키노. (2017). FRONT-END WEB DEVELOPMENT: The big NERD ranch guide. (2016). 한국 번역판 역자 이지은(2017). 제대로 배우는 프런트엔드 웹 개발. 서울 : BJ(비제이 퍼블릭).
