ZAP Plug-n-Hack을 이용한 DOM/PostMessage 분석

Plug-n-Hack(PnH)

Plug-n-hack, 즉 PnH는 Mozilla 보안팀이 제안한 표준으로 보안 도구와 브라우저간의 상호 작용을 쉽고 유용하게 할 수 있도록 만들어진 방법을 의미합니다.

이미 10년 가까이 되가는 기술로 초기에는 브라우저 console에서 보안 도구를 컨트롤 할 수 있는 형태로 구성되었지만, 현재는 ZAP의 Monitor Client에서 브라우저의 데이터를 가로채어 분석 도구에서 쉽게 사용할 수 있도록 제공하는 기능으로 바라보는 시선이 더 큽니다. 어쨌던 중요한점은 정해진 프로토콜에 따라 동작을 구성하면, ZAP이 아닌 다른 도구에서도 이와 같은 테스팅 기능을 사용할 수 있다는 점입니다. 혹시나 관심있다면 만들어보시는 것도 좋을 것 같네요.

Install AddOn in ZAP

Marketplace 에서 Plug-n-Hack Configuration 이란 확장으로 설치가 가능합니다.

Testing!

Add monitor clients

history 탭 등에서 context menu(우클릭) > Monitor clients 중 하위 항목을 선택하여 monitor client 추가가 가능합니다.

각각 하위 항목은..

Name Desc
Open as monitored URL monitor clients에 등록된 URL을 오픈합니다. 외부 브라우저로 열리니 참고.
Include subtree 해당 URL 하위를 monitor clients에 포함합니다.
Include all in scope in-scope(context의 대상) 전체를 monitor clients에 포함합니다.

추가된 Client는 Session Properties(Context 더블클릭 시 나타나는 메뉴) 중 Monitor Clients 에서 추가된 Scope와 Exclude 할 URL의 정규식을 확인할 수 있습니다.

Show event data

monitor client가 설정되면 페이지 로드 시 하단 툴바 중 clients 탭에서 이벤트가 수신되는 걸 확인할 수 있습니다. 여기에는 postMessage 데이터, DOM 자체의 이벤트 데이터 등이 포함됩니다.

Show detail data of Event

Request / Response 탭에는 간단한 정보만 보이지만, Data format을 PnH JSON으로 변경하면 아래와 같이 상세 데이터를 JSON 으로 확인할 수 있습니다.

{
    "to": "ZAP",
    "type": "eventInfoMessage",
    "from": "TODO: we need a from",
    "target": "someTarget",
    "data": "a mousemove event happened!",
    "eventData": "{\"isTrusted\":true,\"screenX\":-784,\"screenY\":904,\"pageX\":296,\"pageY\":207,\"clientX\":296,\"clientY\":207,\"x\":296,\"y\":207,\"offsetX\":76,\"offsetY\":118,\"ctrlKey\":false,\"shiftKey\":false,\"altKey\":false,\"metaKey\":false,\"button\":0,\"buttons\":0,\"region\":\"\",\"movementX\":0,\"movementY\":0,\"mozPressure\":0,\"mozInputSource\":1,\"MOZ_SOURCE_UNKNOWN\":0,\"MOZ_SOURCE_MOUSE\":1,\"MOZ_SOURCE_PEN\":2,\"MOZ_SOURCE_ERASER\":3,\"MOZ_SOURCE_CURSOR\":4,\"MOZ_SOURCE_TOUCH\":5,\"MOZ_SOURCE_KEYBOARD\":6,\"detail\":0,\"layerX\":76,\"layerY\":118,\"which\":1,\"rangeOffset\":0,\"SCROLL_PAGE_UP\":-32768,\"SCROLL_PAGE_DOWN\":32768,\"type\":\"mousemove\",\"eventPhase\":3,\"bubbles\":true,\"cancelable\":true,\"returnValue\":true,\"defaultPrevented\":false,\"composed\":true,\"timeStamp\":37090,\"cancelBubble\":false,\"NONE\":0,\"CAPTURING_PHASE\":1,\"AT_TARGET\":2,\"BUBBLING_PHASE\":3,\"ALT_MASK\":1,\"CONTROL_MASK\":2,\"SHIFT_MASK\":4,\"META_MASK\":8}",
    "originalTargetPath":     [
        "__layout",
        0,
        0,
        2,
        2,
        2,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ],
    "messageId": "d95edc18-5d15-b4b6-2404-f1eadac11bd4",
    "endpointId": "f07535d4-36fe-bf02-730e-8f44f8d84cda"
}

Resend event data

수신된 Event는 클릭 시 Request / Response 탭에서 내용을 확인할 수 있고, 우클릭으로 Resend가 가능합니다. 당연히 Resend 시 위에 PnH JSON 으로 디테일한 내용 전송도 가능합니다.

Global BP and Custom BP

Monitor clients에 추가된 패턴은 break 를 통한 테스팅 시 일반적인 웹 요청과 동일하게 잡히기 때문에 테스트할 떄 사용할 수 있습니다. 다만 DOM Event의 경우 양이 굉장히 많기 때문에 가급적이면 Monitor client를 사용할 땐 custom break point 를 걸어서 사용하는 걸 추천합니다.

Remote monitor client

특이하게 삭제 기능이 없습니다. Session Properties에서 URL을 제거해야 삭제할 수 있습니다.

Vs DOM Invader

최근 핫한 DOM Invader와 비교를 안할수가 없겠네요. 우선 Plug-n-Hack은 정말 오래된(ZAP 초기부터 있던 기능)이라 기능 면에선 당연히 DOM Invader가 훨씬 모던한데요, ZAP 사용자 입장에선 현재 크게 선택권이 없기 때문에 Plug-n-Hack이 최선의 대안인 것 같네요.

어쨌던 약간 비교해보면.. Plug-n-Hack 은 순수하게 Manual testing 위한 도구 정도로 보시면 좋을 것 같고, DOM Invader는 Manual testing의 포인트를 쉽게 잡기 위한 반 자동화 도구 정도로 생각하시는게 좋을 것 같습니다. 성격이 약간 다르다 보니 직접적으로 비교하긴 어렵지만, DOM Invader에 대한 대안은 ZAP 팀이 충분히 고려해야할 문제인 것 같네요.

Conclusion

솔직히 ZAP을 써온지도 이제 시간이 좀 지나서 기능이 많이 익숙해졌다고 생각했는데, 의외로 제가 잘 모르고 있던 기능들이 많습니다. 앞으로도 이러한 내용으로 글을 좀 작성해볼거고, 가능하다면 유툽으로 소개하고 이야기드릴 수 있도록 노력해볼게요 :D

References