Capture Screen + Network = ReproNow
Let’s imagine you are given a task to fix a web bug that is filed by someone. You will have to understand what is the bug, find the endpoint, go through the reproduction steps and understand exactly what request caused the issue and then try to fix it. What if there is a tool which gives you not only screen recording but also the network recording. The tool can show both: the request/response and the video, and also the sync it. You can search to find a specific text contained in the request/response. The tool will allow you to export to an MKV file which can be played using any media player, but shows the network as soon as it’s accessed from the tool. Well, it’s now possible because of ReproNow.
ReproNow is a browser extension that is built for engineers to triage quicker and better. This tool captures your screen and the underlying network data and presents it as a video. It also provides a Previewer which provides a clean view for the engineer to view the screen capture and the corresponding network requests. It also displays the headers and body of the Request selected and presents the Response headers. Everything happens on the client side and nothing is sent to the server. To top this off, it is Open Source!
The tool consists of 3 main parts
- Screen Capture — Achieved by using chrome.desktopCapture (which uses getUserMedia API)
- Network Capture — Achieved using chrome.webRequest API
- Export Screen + Network as MKV — Achieved by storing the network in attachment section of MKV using ffmpeg.js/ts-ebml on client.
One of the challenges while building ReproNow was merging video and network into a single file. The objective was to make it easier to share the video with an engineer and also view it on ReproNow’s Previewer without much hassle. Finding a way to do all of this on the client side increased the complexity of this.
After evaluating some common video formats like MPEG4, Flash, and MKV, MKV stood out as it had an attachment section where the JSON (network data) could be attached and dumped. WebM being derived from MKV and built specifically to work on the browser also influenced the decision to use MKV for ReproNow.
The next part of the challenge was finding a framework that manipulates MKV to attach JSON on the client side. Ffmpeg.js came to the rescue and has been implemented to attach the network data (JSON) into the video file. The only caveat with ffmpeg.js is it is a little slower and to solve that ts-ebml, a Node.js library is used as a preferred method by ReproNow. It falls back on ffmpeg.js in case ts-ebml fails. Either way, ReproNow provides a reliable way to download videos attached with network data. So, now you can view the video in any third party player and still view the screen and upload the same file to our previewer and watch the network requests go by.
Tool Features
- Capture screen and network data
- Option to copy any request as Curl or Raw
- Video on local storage
- Previewer with a clean UI to have all information on one screen
- Network data is hidden inside the MKV file
- History on the extension shows the previous videos
- Host Previewer locally or just go to https://www.repro-now.com/previewer
- Lots of options to customize what you want to capture
- Everything runs on Client Side
- Open Source — Customize and change as you like
The tool can be used for internal or external QA. It can also be used by bug bounty researchers and engineers to report and reproduce security bugs.
Demo
Go to Repro-Now.com/previewer and load the demo video
Chrome Extension and Code
Download extension from chrome store or check out the code on Github
