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

사용자 인터페이스(UI)에서는 보이지 않는 로직 라이브러리(jQuery)

부트스트랩을 이용한 UI 적용

부경대에서 받은 개발자 교육 과정의 주강사님이 각 언어에 대해 도입부를 설명할 때마다 항상 시작하는 레퍼토리가 해당 언어를 만든 작자를 거론하는 거였다. 이를테면 제이쿼리는, "제이 쿼리는 존 레식이가 만들었다~ 그것도 이십 대 때 말이지."

"..."

제이쿼리는 정확하게 말하면 언어가 아니라, 자바스크립트의 오픈 라이브러리(API)이다. 다목적용이지만 그중에 DOM(Document Object Model) 관리, 엘리먼트 생성, 서버 통신, 이벤트 처리에 대한 간편한 방법을 제공한다(아키노, 2017).

반복 callback으로 폼 데이터 복사하는 것을 확인하기 위해 serializeArray(직렬화 배열) 메서드를 통한 폼 데이터를 객체의 배열로 반환하는 것을 먼저 테스트하였다.

제이쿼리를 사용하여 폼(Form) 데이터의 유효성(실제로 올바른 사용자로부터 주문을 받은 정보인지) 검증의 단계로 나아가지 전에 몇 가지 버그로 인해서 수정하는 데 시간이 좀 걸렸다. 두 가지 버그의 주요한 원인은 index.html 파일에서 <div> 범위 설정을 올바르게 하지 않아서, 해당 폼의 class 객체를 인식하지 못했다는(Uncaught TypeError: Cannot read property '해당 변수' of undefined)것과 메서드명의 첫 영문자의 대소문자 구분을 명확하게 해서 타이핑하지 못해서였다. 어쨌든 프런트엔드 웹 개발이 소기의 목적이 아니라, 이 프런트엔드 개발 시 알아두어야 할 보안 취약점(유효성 점검과 DOM과 관련된 객체 전달 간에 오용된 토큰(cookie) 사용으로 사용자의 개인정보를 가로챌 수 있는 자바스크립트 자체의 취약점)에 필요한 개념을 익히는 것인데, 하루 만에 끝내고도 남을 진도를 이틀이나 붙잡고 있으니 깝깝했다.

FormHandler의 Type 에러는 index.html 파일에서 div와 form 범위 설정의 오류였다.

디버깅 완료 후, 폼을 제출했을 때 createOrder 함수 호출이 제대로 이루어졌다.

다음 섹션부터 데이터를 DOM에 추가하여 FormHandler라는 모듈의 역할을 보완할 수 있는 스크립트 코드 작성과 사용자 인터페이스(User Interface) 상의 입력 폼(이것을 Form이라고 한다)에 커피 주문을 입력하는데 누군가 누락된 정보 또는 사용할 수 없는 정보로 주문하려고 할 때 애플리케이션에서 어떤 일이 발생하는지에 대한 폼 검증을 시도하고, 약간의 코드(Secure coding)로 이러한 유효성 검증을 하는 것도 진행하려 한다. 대부분의 최신 브라우저는 폼 데이터를 제출할 때 유효성 검사를 할 준비가 되어 있고, 해야 할 일은 규칙을 제공하는 것이 전부이다(아키노, 2017). 그럼에도 불구하고 가장 많은 보안 사고가 이와 관련된 XSS(Cross-Site Scripting, CSS(Cascade Style Sheet)와 구분하기 위해 본래의 철자 C를 X로 바꾸어 부른다)와 CSRF(Cross-Site Request Forgery, 크로스 사이트 요청 위조) 공격으로 이루어진다.

왜냐하면 보안에 주안을 두고 서비스 배포를 하기 시작하면, 사용자가 서비스를 사용(보안 용어로 '가용성'이라고 한다)하는 데 제약이 있을 수도 있기 때문에 개발자들은 보안을 등한 시 하는 경우가 있다. 또 그럼에도 불구하고 보안을 염두하고 개발을 해야 하는 까닭을 '세션 하이재킹'이라는 간단한 보안 공격의 개념을 예를 들어 설명한다면 다음과 같다. 취약한 네트워크를 사용하는 스타트업(신생 개발업체)의 네트워크 IP 대역이 이미 공격자에게 노출되어서 해당 서버에 공격자의 악성코드가 심어져 있다고 가정해보자. 그리고 해당 서버단을 통해 배포한 서비스(앱)에서 사용자에게 보이는 화면(세션)의 토큰(세션 번호, cookie)에 대한 검증을 하지 않도록 개발되었다면, 이 서비스의 사용자는 본인의 부주의를 떠나서 단지 해당 서비스에 접속하는 것만으로도 자신의 로그온 아이디와 비밀번호가 털리게 된다.

해킹의 원리는 어렵지 않다. 해킹을 시도하는 것 자체가 불법이기 때문에 특정 다수만 드물게 경험할 뿐이다. 하지만 단 한 번의 해킹을 당함으로써 자신의 모든 개인 정보가 유출되는 것은 더 어렵지 않다. 지금까지 진행한 소스코드는 본인의 gitHub repository에 업데이트했다.

참조

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