front-end-tracker's Introduction

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

Use a CDN

The latest bundled version of this module is available at unpkg.com/browse/@zaproxy/front-end-tracker.

Insert the following snippet, preferably first in the <head> tag (to ensure it is run before anything else), to have it available in your webpage.

<script src="https://unpkg.com/@zaproxy/front-end-tracker@latest/dist/front-end-tracker.js"
    crossorigin="anonymous"></script>

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');

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

front-end-tracker's People

Contributors

Stargazers

Watchers

front-end-tracker's Issues

Spot the difference between `localStorage` and `sessionStorage` interactions.

For now, a unique storage event is published in the mailbox, and it's impossible to distinguish between the two kinds.

It could be pertinent though.

Add a `CONTRIBUTING.md`

To help wannabe contributors find useful information about the project.

Publish on a CDN for ease of use

It would be handy for people to be able to inject into their HTML directly, using something like:

<script src='front-end-tracker.js'></script>

UNPKG is a web service serving content from npm.
As it is now, the version 1.0.0 of the front-end-tracker is published on there already: unpkg.com/@zaproxy/[email protected]/.
However, there is no bundled version to inject directly in the page.

One solution would be to have travis to run the build and push it to npm, without cleaning the generated dist/ file (see some example on my fork).

Then, hopefully, this would work:

<script src='https://unpkg.com/@zaproxy/[email protected]/dist/front-end-tracker.js'></script>

Improve API documentation

As for now, the API documentation needs to be generated manually, browsed locally... and looks a bit ugly.

Would be nice to:

publish it online
- with a service such as esdoc, by publishing on GitHub pages, or by using GitBook
- then link the endpoint in the wiki (look for occurences of "API documentation", "https://github.com/zaproxy/front-end-tracker/wiki#api-documentation")
use a template to restyle

Recommend Projects

zaproxy / front-end-tracker Goto Github PK