Getting Started
Install the browser extension with Firefox or Chrome using one of the following links:
Load the extension using the add-on developer options. In order to get the UI working, you will need to build it with npm run build from the root directory of the project. Once that is done, you should be able to sideload the extension using the browser development options. When
loading an unpacked extension, load the plugin/manifest.json file from the commit version you are trying
to run tracy from.
The entire workflow for the extension involves inserting "tracer strings" into the
web page being tested. A tracer string is a special string that the tracy knows
about and can look for in HTTP requests, DOM mutations, and other potentially interesting
JavaScript interactions. These tracer strings are created using the tracy logo (the owl) next to inputs
that are either replaced by the extension when the form field is submitted or generated on-the-fly.
While navigating a web application, the extension will highlight potential fields
of interest with a colored box and the tracy logo. The tester can click the logo and pick
from a dropdown of configured tracer strings to fill the input field with. Usually, this will
look like zzXSSzz or zzPLAINzz. For a listing of the various tracers and their payloads,
see the configuration section. tracy stores these payloads and looks for them in the DOM
while the tester browses the application.
Tracer strings should be chosen wisely, as the server of the web application might
not accept all types of tracer string payloads as input. For example, email form
fields often have strict input validation and will probably not accept an
zzXSSzz payload. However, it may accept a zzPLAINzz tracer string acting
as the alias to a known email address:
After a tracer string has been added to an input field, the tester will submit the
form. The tracy proxy will find any tracer strings
in the request and replace them with their corresponding tracer string payload.
Any time these random values are spotted in a potential sink location, an event is
triggered by the proxy or the extension. These events can be viewed in the UI. Click
the extension icon to see the UI. The UI shows all tracer strings that have been added
to the web application and the locations where they have triggered events.