자바스크립트 (JavaScript, JS)는 모던 웹이나 앱 개발에 필수적인 언어입니다, 하지만 이 언어의 수많은 능력은 탐구가 덜 되어 있죠. JS에는 수많은 use case에 적용이 될 수 있는 무한하고 다양한 기능들이 존재합니다.
이 포스팅에서는 잘 알려지지 않았지만 유용한 다섯가지 자바스크립트 (JavaScript) 기능들을 예제를 통하여 알아 보겠습니다.
1. 해로운 웹사이트를 감지
이 JS 기능은 hooks를 이용하여 웹사이트가 진짜인지 아닌지 효율적으로 감지할 수 있습니다.
Hooks는 상태와 수명주기 기능에 연동하는 리액트 (React) 개발자들이 사용하는 JS 기능입니다. 이 기능으로 개발자들은 각각의 클래스를 사용하지않고도 리액트를 사용할 수 있죠.
아래의 예제는 정적과 동적인 컴포넌트를 사용하여 만들어진 웹 페이지를 사용하여 보겠습니다. 정적 (static) 컴포넌트는 항상 HTML 소스 코드에 선언이 되어있고 브라우저나 플러그인에 의하여 렌더링이 됩니다. 동적 (dynamic) 컴포넌트는 자바스크립트같은 스크립트가 추가되고 XMLHttpRequest 같은 객체를 이용하여 HTML 문서를 수정하며 페이지의 엘리먼트를 추가, 삭제 또는 업데이트를 합니다.
사용 방법:
사이버 범죄자들이 사용하는 툴킷 (toolkit)과 해로운 웹사이트나 앱은 서명기반 (signature-based)의 보호 방법을 혼란시키는 데 있습니다. JS에는 코드나 엘리먼트를 수정하여 브라우저가 이해하고 처리할 수 있도록 사이트의 혼란을 막을 수 있는 기능이 있습니다.
범죄에 사용되는 익스플로잇 킷 (Exploit kits)들은 브라우저에 혼란을 주도록 아주 큰 코드 블록이 첨가되어 있습니다. 이 코드가 JS에 디코딩이 된 후에는 새로운 엘리먼트가 추가되고 자바 애플릿 엘리먼트가 추가되어 해로운 코드가 로딩이 되죠.
이 말은 JS hooks가 해로운 코드가 로딩되는 해독 프로세스 중에 적용이 되어 해로운 자바 애플릿 엘리먼트가 추가되는 등의 특이한 경우를 감지하여 경고를 보낼 수 있습니다.
그러기 위해서는 먼저 엘리먼트가 생성이되는 appentChild, replaceChild 또는 document.write 같은 세가지의 메소드에 hook을 하는 것에 포커스를 맞추어야 합니다. 그리고 네 번째 방법은 document.getElementById() 나 document.createElement() 같은 함수에 hook을 하여서 좀 더 어렵습니다. 객체들은 후에 MutationObserver 객체에 추가가 되거나 Mutation Events를 이용하여 변화되는 것을 모니터 할 수 있습니다.
아래의 예제 코드는 hook을 등록하는 함수입니다:
2. Node.js에서 리포트 작성하기
리포팅이나 문서화는 사이버 보안에 중요한 요소 중 하나입니다, 하지만 시간도 오래 걸리고 지루하죠. 특히나 침투 시험 (pentesting) 이나 취약점 검색 (vulnerability assessments)등의 민감한 정보를 다루는 리포트는 더 하죠. Jsreport는 오픈소스 기반의 자바스크립트 리포팅 플랫폼으로 Node.js에서 구동이 됩니다. 이 플랫폼은 HTML에서 PDF로 변형하는 기능등의 여러 기능이 존재합니다.
크롬 브라우저를 이용하여 jsreport npm 패키지를 설치하고 함수를 호출 할 수 있습니다. HTML 문서를 DOCX나 스프레드 시트, PDF로 출력이 가능하죠. 이 기능은 데이터가 서드파티 툴을 거치지 않고 한 곳에서 리포팅이 가능하여 보안에 관한 리포팅에 적격입니다.
Jsreport는 크롬 뿐만아니라 XML을 렌더링하는 Apache FOP 같은 다른 서비스와 호환합니다.
사용 방법:
jsreport npm 패키지를 설치한 후 함수 호출:
3. Generators를 사용하여 실행 흐름 (Execution Flow)을 컨트롤 하기
Generators는 개발자들이 프로그램 실행 흐름의 컨트롤을 가능하게 하는 멈춤 (pause)과 재개 (resume)가 가능한 함수의 한 타입입니다. Generators는 알고리즘, 무한 시퀀스나 비동기 오퍼레이션의 되추적 (backtracking)에 이용이 되고 게다가 반복자 패턴도 생성 할 수 있습니다.
아주 파워풀하고 다용도로 사용이 가능한 이 자바스크립트 기능은 많은 개발자들이 잘 모르거나 활용도가 낮은 기능입니다.
사용 방법:
아래의 간단한 예제로 알아보겠습니다.
generator 함수를 지정하려면 우선 generatorFunction 함수에 function*를 사용하여 지정합니다. 그 후에 함수 내에서 yield 키워드를 사용하여 실행을 멈추고 값을 반환하죠. 다음에는 generator 객체가 generatorFunction을 호출하며 생성이 됩니다. next 메소드를 호출 할 때 마다 generator는 실행을 재개하며 현재 값을 반환하게 됩니다.
4. Temporal을 사용하여 날짜 (Date) 관리를 개선하기
수년동안 자바스크립트에서는 어려운 날짜 관리 때문에 개발자들이 어려움을 호소했습니다. 다행이도 Temporal을 이용하여 자바스크립트 네이티브로 날짜를 쉽게 관리할 수 있습니다. 문제의 간단한 예를 들면 일 (day)는 1이지만 월 (month)은 0부터 항상 시작이 되었죠.
여러 시간대나 그레고리력이 아닌 달력을 지원하는 Temporal은 문자열에서 날짜를 파싱 쉽게 파싱하는 API가 존재합니다. 불변성 (immutable)을 가지는 Temporal 객체들은 버그나 원치않은 수정에 보호를 받을 수 있죠.
사용 방법:
아래의 예제와 같이 여러 Temporal 메소드가 존재합니다.
ㄱ) PlainDate() - 시간을 제외한 날짜 생성
ㄴ) PlainTime() - 날짜를 제외한 시간 생성
ㄷ) PlainMonthDay() - 연도를 제외한 월일을 생성. 매년 같은 날을 사용할 시에 유용.
5. 고차함수 (High-Order Functions)를 이용하여 재사용 가능한 코드를 생성
자바스크립트에서는 고차함수를 이용하여 코드 체계를 생성할 수 있습니다. 고차함수 (High-Order Functions)는 하나또는 여러 함수들을 아규먼트 (arguments)로 변형시키거나 다른 함수를 반환하는 기능을 가지고 있습니다. 이 기능은 컴포지션 (composition), 커링 (currying) 이나 함수 체인 (function chanings) 등을 가능하게 합니다. 이 기능으로 스트림라인화, 모듈화된 코드를 개발 할 수 있죠.
사용 방법:
아래의 예제는 함수 체인에 관한 예제입니다. 이 인스턴스에는 calculator라는 객체가 존재하고 함수를 엮어서 내부 상태를 변화시켜 각 상태를 반환합니다.
Comments