Today, I write a post about how to use ZAP HUD in an engaging manner. While ZAP HUD may not have incredibly useful features at the moment, experimenting with it could be worthwhile since it has the potential to bring about changes in the analytical approach.
HUD Base Directory
You can find the Base path of your HUD in
Options > HUD > Base Directory
I have a preference for working in VSCode most of the time, so I open it.
When you activate the HUD, menus appear on the left/right sides and the bottom of the browser. Through these menus, you can control ZAP.
To modify the desired area within the HUD, you can use the browser’s developer tools to locate it. When attempting to alter the design, you typically reference classes.
Now, you can proceed to modify the code of the desired section. I’ll try changing the background color to transparent.
Once you reload the HUD, it will operate according to the code changes you’ve made.
From now on, it depends on your imagination. While the HUD may have a few persistent issues, I personally consider it to be a promising interface. Refining and customizing it could allow you to have a distinct testing strategy from others. Let me share a few scenarios where I’ve found it useful.
- Added a button to invoke ZAP REST API (e.g. toggling proxy chain)
- Personally, my ZAP connected through a proxy chain with tools like Caido or Burp.
- Introduced a Bookmarklet for interacting with ZAP
- Implemented functionality to fetch and display data through different 3rd-party APIs
- Added tracking capabilities for DOM, postMessage, WebSocket, etc. (Can be written in JS)
Features like Run ActiveScan and Change ATTACK Mode are already supported in the original HUD, and such functionalities are quite useful too!
Lastly, there’s also a feature to add toggle scripts within the HUD. While I personally prefer running standalone scripts and made separate code adjustments for that purpose, utilizing this functionality for simple toggles can be quite beneficial as well.