예전에 ZAP쪽 트윗보고 트위터로 공유해두었던게 있었는데, 최근 @Dakkar Key의 멘션으로 급 생각나서 글로 정리해둡니다.
그땐 정말 많이 대충 봐서(그냥 제목정도만..ㅋㅋ) 정확하게 뭔지 몰랐었는데, 찾아보니 생각보다 좋은 도구인 것 같네요.

오늘 이야기드릴 주제는 OWASP에서 진행중인 ZAP HUD에 대한 이야기입니다.

https://github.com/zaproxy/zap-hud



What is ZAP HUD(Heads Up Display)?

HUD는 Heads Up Display, 즉 전투기에서 볼 수 있는 디스플레이(계기판, 그 머리에 쓰고 눈에 보이는?)을 의미합니다.




ZAP HUD 또한 이를 컨셉으로 만들고 있는 도구이고 공식 repo에선 이렇게 정의해놨습니다.

The HUD is new interface that provides the functionality of ZAP directly in the browser.

즉 웹 브라우저에서 ZAP의 기능을 사용하기 위한 새로운 형태의 Interface인데, 웹 브라우저에 ZAP의 기능을 컨트롤 할 수 있는 UI 적인 요소들이 생기고 이를 이용해 ZAProxy로 넘어가지 않고 기능들을 수행할 수 있도록 만든 인터페이스입니다.
(확장기능과 비슷하지만, 확장 기능 이상으로 생각되네요.. 아이디어 좋은듯) 

이렇게 페이지 좌우에 버튼이 생성됩니다

아직 공식 릴리즈된건 아니고 alpha 버전으로 오픈소스로 진행만 되고 있어서 자료나 추가적인 프로젝트가 많진 않습니다.

하나 아쉬운점이라면 alpha라서.. ZAP 자체도 alpha(weekly) 버전에서만 사용 가능한단 점입니다. (분석 세팅 되어 있는 사람에겐 매우 귀찮은..)

How to install & How to use?

위에서 이야기드렸지만 아직 공식 버전이 아니기 때문에 weekly(사실상 dev 버전)에서만 적용이 가능하기 떄문에 weekly 버전으로 설치해줍니다.
https://github.com/zaproxy/zaproxy/wiki/Downloads#zap-weekly

ZAP Extension 형태로 제공되며 (아마 추후에도 이렇게 갈듯) Dev 버전엔 기본으로 깔려있어 특별히 손댈게 없습니다. 혹시나 없다면 Market Place로 들어가서 ZAP HUD를 찾아주세요!

만약 직접 빌드해서 적용하고 싶으시다면 공식 repo에서 클론해주시고..

#> git clone https://github.com/zaproxy/zap-hud.git
#> cd zap-hud

gradle 로 빌드해줍시다! (dependency가 생각보다 많다는..)

#> ./gradlew runZap
Starting a Gradle Daemon (subsequent builds will be faster)
<-<-------------> 0% INITIALIZING [38s] ....... 

gradle script로 빌드 시 자동으로 ZAP에 로드되며 (runZap으로 인자를 줬으니.. 다르 옵션은 gradle 까보셔욤) Radar icon으로 on/off가 가능합니다.

on 상태에서 전용 브라우저를 열게 되면 페이지 좌/우로 기능 버튼들이 생기며 이를 통해서 브라우저에서 ZAP을 직접 제어할 수 있게 됩니다.




기능에 대한 자세한 부분은 공식 youtube 영상이랑 wiki 참고하시는 게 좋을듯 싶어요 :)
https://github.com/zaproxy/zap-hud/wiki

우선 전용 브라우저를 열고 ZAP HUD를 키면 아래와 같이 튜토리얼 하겠냐고 물어봅니다. 기본적인 사용방법은 튜토리얼만 따라해도 금방인듯 합니다.




대충 인터페이스를 정리하면.. 이렇습니다.



어떻게 구현했을까?

아래 블로그 글에 잘 설명되어 있습니다 .
https://segment.com/blog/hacking-with-a-heads-up-display/

요약하자면 일반적인 브라우저 확장 기능과 거의 동일합니다. js 파일을 브라우저단에서 inject 하고(이게 확장기능 동작 원리죠) inject된 js와 ZAP간 API 통신으로 기능을 수행하게 됩니다.
하나 특이한점은? service worker가 통신할때 postMessage로 구현되었다는 건데요(굳이?)

ZAP과 직접 통신하지 않고 하나를 거쳐서 postMessage를 이용한 이유가 궁금하긴 합니다.
(ZAP 자체가 웹이 아닌 Java Appilcation이라 SOP 영향도 안받고 CORS 지정도 자유로울텐데 조금 의문이기하네요)



https://segment.com/blog/hacking-with-a-heads-up-display/

댓글 5개:

  1. 답글
    1. proxy를 거치지 않고 repeat 을 할 수 있다는 건가요?
      항상 좋은 포스팅 감사드리고 있습니다. :-)

      삭제
    2. 음 사실상 모든 요청이 프록시를 거치게 되는거구요(이건 ZAP에서 내부 브라우저로 올렸을땐 원래 그렇습니다),
      ZAP에서 제공해주는 AP, HUD에서 추가된 기능 정도선에선 가능합니다. (따로 브라우저단 repeat은 없었는데, 만들어서 해도 괜찮을듯해요)

      지금까지 나온 기능에선 break point(burp에선 intercept) 거는게 브라우저에 있단게 제일 편하네요 :)

      삭제
    3. @익명(anonymous)
      requester 같은 add-on 에서 제공하는 기능은 별도 tool로 만들지 않으면 HUD 자체에서 사용은 불가능하구요, 대신 bp 걸로 트래픽 잡는 과정은 ZAP 안거치고(UI단 기준, 트래픽은 당연 지나갑니다) 테스트할 수 있습니다.

      다만 이게 꼭 좋은지는 모르겠네요. HUD쪽에 이야기하거나 코드 추가해서 던질 예정입니다.
      (몇번 써보심 알겠지만, 이 부분은 웹에서 테스트하는게 더 불편하더군요..)

      삭제