veracitylab / DOM-Instrumentation-to-Display-Provenance-Data

Honours Project: JavaScript program to Instrument DOM elements manipulated by Ajax calls to facilitate in exposing Provenance Data
0 stars 0 forks source link

Veracity Spearhead Provenance Viewer Browser Extension

This repo extends the Chrome browser extension from Jayen's original fork to pick up provenance information from provenance-id headers in server-generated HTTP responses, and display them to the user in a simple overlay UI. The server, typically a web app, must generate these headers somehow; for a Java web app, one way to do so is by using our provenance injector Java agent.

Usage

  1. Download or clone this repo.
  2. In a Chrome-compatible browser (e.g., Google Chrome, Chromium, MS Edge, Opera), install the extension located in browser-extension/chrome using "Load Unpacked" (enable Developer Mode first if necessary).
  3. All subsequently opened pages will display a small ▶ Prov button in the top-left corner. Clicking it will toggle the display of provenance-enriched HTTP responses generated by this page -- including the original page load, contained resources such as images, and any XMLHttpRequest or fetch() requests generated programmatically.

Example

The Movie Recommender demo is a Spring Boot app to which the provenance injector can be applied.

After loading the browser extension in Chromium, starting the web app with the provenance injector agent attached (TODO: more detail), logging into the app at http://localhost:8080/, navigating to the Library page, and clicking ▶ Prov in the top-left corner:

image

Clicking on a movie triggers an XMLHttpRequest back to the server, which is added to the list of provenance-enriched responses in the overlay UI. Clicking it pops up a new tab showing the provenance data collected automatically by the agent during server-side processing of that request:

image