Handling Modern Web Apps Better - Part 1

Posted 794 Words

Modern web apps are very prevalent these days, and by “modern” we mean web apps which make heavy use of JavaScript in the browser (a.k.a. the client).

These apps are challenging for all security tools, including ZAP. Historically ZAP has been a MitM proxy which means it can see all of the communications between the browser and the target app, but it has not been able to see what is going on in the browser.

ZAP can explore modern apps pretty effectively using the AJAX Spider and can find DOM XSS vulnerabilities by launching browsers. But we know that we could still do better, and based on our recent What Should We Focus On questionnaire we know it is your top priority too.

So we have a brand new Client Side Integration add-on (also called the Client add-on for short) which helps ZAP understand what is going on inside the browser.

ZAP Chat Video

Starring OWASP Juice Shop

Client Visibility

The Client add-on is not currently included in ZAP by default so you will need to add it via the ZAP Marketplace.

The add-on adds 3 new tabs to ZAP which give you a lot more information about what is happening in the browser.

All of this information is available via Browser dev tools, but only for the pages being displayed. ZAP shows you all of the essential details for the whole app, and this information is also available when automating ZAP.

Client Map

The Client Map is a representation of the apps that the browser accesses, so superficially it looks similar to the Sites Tree.

However if you look closely you will see that it actually includes the URL fragments which are not sent from the browser to the target app, so ZAP doesn’t normally see these. These fragments give you a much more detailed understanding of the client side structure of the app.

Client Map and Details Screenshot

The Client Map includes URLs that have not yet been visited - these have a small red ‘minus’ sign to indicate URLs that have been found in the DOM but which have not been directly accessed by ZAP.

The Client Map also includes storage nodes so you can see the contents of cookies, local storage, and session storage in the browser.

Client Storage Screenshot

It supports a set of context menu options - these can be accessed via a “right click” or the relevant key combination for your OS.

Client Details

The Client Details tab (also shown above) shows details about the node selected in the Client Map.

It allows you to understand much more about the functionality that this URL represents in the target app.

The types of data displayed include:

  • Button: Buttons detected in the DOM
  • Cookies: Cookies set in the browser
  • FORM: Forms detected in the DOM
  • Input: Input elements detected in the DOM
  • Link: Links detected in the DOM
  • Local Storage: Data set in Local Storage in the browser
  • Session Storage: Data set in Session Storage in the browser

Client History

The Client History tab shows all of the client side events sent from the browser extension to ZAP.

Client History Screenshot

In addition to the data displayed in the Client Details tab it also includes:

  • DOM Mutation: Browser MutationObserver event
  • Node Added: A DOM node added to the specified URL
  • Page Load: Browser load event
  • Page Unload: Browser unload event

AJAX Spider Enhancement

While the AJAX Spider is an effective way to explore modern web apps we know that there are some JavaScript based controls that it struggles with. This add-on enhances the AJAX Spider and if it finds in scope URLs in the DOM that have not been accessed by the AJAX Spider then it will directly request those URLs. This means that ZAP may explore your modern apps more effectively.

If you have a modern app and you know the AJAX Spider does not completely explore it then try it with this new add-on.

We score how well the Client add-on does in the regular ZAP vs Crawl Maze scan. Note that the Client column only shows URLs found by the Client add-on but NOT the AJAX Spider.

The Browser Extension

The Client add-on gets all of the data from the browser via a ZAP Browser Extension which it installs in Firefox and Chrome. The Browser Extension is (of course) open source: https://github.com/zaproxy/browser-extension

Future Plans

We plan to enhance the Client add-on to support things like:

  • Client side passive scanning
  • Client side active scanning
  • Storing client data in the ZAP session


We would love to hear your feedback about this add-on, for example:

  • Does it cause problems on any of your web apps?
  • Does it display all of the information clearly
  • What else would you like it to do?

Let us know via the ZAP User Group.