So you’ve used PyShark to get packet statistics out of your trace files but you want to represent them in a more friendly way than just text output?  How about using Flask and pygal to get those statistics in a graph or chart for use in a web app!

PyGal ExampleThis blog post will be a brief overview of getting some packet data in a chart and on a webpage. Please note that this will be a very simple example and not a recommended production deployment of Flask. I highly recommend using templates, flask-bootstrap, and more advanced Flask topics which you can learn about here.

First, let’s go over some very basic Flask app setup. We’re going to setup a single file flask app called app.py with our necessary imports and a single route that has a graph_pcap() function. This route will return a basic web page with a form for users to upload a pcap file. When the file is uploaded (through an HTTP POST), our graph_pcap() function will use PyShark to extract the packet sizes and return a chart to the user’s browser.  The comments I’ve added below outline the logic that we fill in throughout this article. You can see the modules we will use in this project in the imports section at the top. In order to run this example, use pip in your environment (or virtualenv of course) to install the necessary modules.  Also, for PyShark to work correctly, you’ll need to install a version of Wireshark that includes Tshark (1.10, 1.12, 1.99).

And here’s our app outline:

We can use the flask request object to get the uploaded file and save it to disk, where PyShark will open the pcap for analysis. For help with Flask uploads that will explain this, check out the Flask doc article:

I’m prepending the current datetime to the filename to make sure that we don’t overwrite other files as they’re uploaded and to help avoid naming conflicts. Next, we’ll create and populate a chart axis using a list of tuples in the (point-y, point-x) format. We’ll read in the uploaded pcap with PyShark and then iterate over the packets and store the points to the newly created list:

We need to create a list to store the plot points in and will use PyShark to iterate through the packets to store the packet time (absolute time in seconds from capture start) and the packet length (bytes). If you have any questions about the PyShark parts of this code I highly recommend my PyShark series starting with, PyShark – FileCapture and LiveCapture modules. Our next step is to create a pygal chart instance and add this packet size axis to it. Pygal has some great documentation on their website, and I also highly recommend this quick tutorial on using pygal in Flask.

This creates an XY() style chart object using one of the prebuilt styles of pygal, and also sets the size of the chart. The .title attribute will be used when rendering the chart to give the chart a title and the .add() method will add an axis to the chart. The first argument of .add() is the name of the axis which will be used in the chart legend, so graciously provided by pygal. The last step is to add the HTML template to display the chart, and also the HTML for the form when the user first browses to our page (with an HTTP GET request). Here’s the final version of this basic script for generating a chart of packet sizes of a pcap uploaded through the browser:

You can run this script from the command prompt if you go to the folder containing this app.py file and running the script with python app.py. Then you can open your browser to http://localhost:5000 and you will see the upload form:

Upload FormWhen we upload a pcap, our .graph_pcap() function will go to work and present us with this beautiful graph:

Packet Size Graph

As you can see, it’s a fairly simple process thanks to the amazing PyShark, pygal, and Flask frameworks. I know Flask and pygal may be new to you, but there are a ton of resources out there to help you through creating your own packet analysis web app.

Also, I’ll have a new post soon that will cover adding additional axis to this chart and even more packet graphing tricks!

This article has 2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *