Front-End Tracker

Keep track of events that can happen in a webpage.

Disclaimer: This add-on is not for web development. It is meant for testing web sites (debug, security). Its features may cause sites to break entirely, and which can cause privacy or even security issues. Use at your own risk.

Installation

npm install --save @zaproxy/front-end-tracker

Usage

When imported into a webpage, it exposes a mailbox variable in the global scope, which is a PubSub object with the following topics:

• dom-events
• storage

You can then react to these topics by subscribing to the mailbox.

For example, one can log DOM events' information using the following code:

const topic = 'dom-events';
mailbox.subscribe(topic, (_, data) => {
  console.log(data);
});

Import in your application

If you use a Javascript bundler

Such as webpack, rollup, browserify, ... All you need to do is to require this package in your application.

require('@zaproxy/front-end-tracker');

If you do not

There is a pending feature request to make a bundled version of this package available from a CDN.

Import in any HTML page

You can use ZAP to inject a bundle of this package in HTTP responses.

inject.js is an HTTP Sender script (see more here) to inject any kind of Javascript content into webpages that interest us.

• Install the Script Console from the add-on marketplace.
• Install the Community Scripts from the add-on marketplace.
• Bundle the tracker from the source

git clone [email protected]:zaproxy/front-end-tracker.git
cd front-end-tracker
npm install
npm run build

• Copy the bundled content to the imported location: cp dist/front-end-tracker.js /tmp/test.js
• Enable the HTTP Sender > inject_js_in_html_page.js script from ZAP's interface