Massimo Candela

Skype:

massimo-candela

Email:

BGPlay

BGPlay.js provides a graphical and intuitive representation of the inter-domain routing and its evolution over time. BGPlay

I developed BGPlay as a part of my Master's thesis at the Computer Network Research Group of Roma Tre University (Italy) in collaboration with RIPE NCC.

BGPlay runs in a browser without plug-ins. It uses data collected by projects like the RIPE Routing Information Service (RIS), where servers emulate the behaviour of AS border routers and regularly collect routing information from the ASes in peering.

This tool is maintained in my free time.

What I'm Looking at?

We consider as targets, represented by red nodes:

the AS the user queried for;
the ASes annoucing the prefix(es) the user queried for.

ASes peering directly with the Route Collectors are the "leaf" nodes, represented in blue; any other traversed AS is shown in black.

When a BGP announcement occurs, the creation of a new path connecting a set of nodes is animated. Each event involving that path triggers an animation specific to the event type resembling the transition to the new status. The path not involved in any routing change (so passing the same set of ASes) are represented by dashed lines. Instead, a path involved in a routing change is represented by a straight line. This approach highlights what is stable and what is changing.

How to Embed BGPlay in Your Page

You can both embed the widget by including it in your page from a repository/host, or by downloading the source code.

From a Repository/Host

You need to instantiate the widget as described in the Instantiate the Widget section below. You have to change the first line of the example, where the initialiser of the widget is loaded, to point to the repository.

Instantiate the Widget

Instantiating the widget is simple, usually requires a copy-paste of the embed code. The first parameter of the loader expresses the type of widget you want.

The examples below show how to embed BGPlay classic and real time (the commented lines are optional).

Data from a REST API

<script src="https://bgplay.massimocandela.com/bgplay/widget/bgplayjs-main-widget.js"></script>

<div id="bgplay"></div>

<script>
    BGPlayWidget(
            'BGPlay', // Version type (classic)
            'bgplay',  // DOM element ID to populate
            {
                width: 1100,
                height: 800
            }, {
                "resource": "193.0.0.0/21", // Comma-separated resources to monitor
                //"starttime": UNIX_TIMESTAMP,
                //"endtime": UNIX_TIMESTAMP,

                //"rrcs": "1,2,3,4", // A list of Route Collectors
                //"ignoreReannouncements": true|false,
             });
</script>

Data from WebSocket (Real Time Updates)

<script src="https://bgplay.massimocandela.com/bgplay/widget/bgplayjs-main-widget.js"></script>

<div id="bgplay"></div>

<script>
    BGPlayWidget(
            'BGPlayRT', // Version type (real time)
            'bgplay', // DOM element ID to populate
            {
                width: 1100,
                height: 800,
                updateWithStreaming: true, // Enable the streaming functions
                streamInitialDump: true, // Get the initial dump from the streaming (or from the REST API)
                streamingOn: true, // Streaming updates enabled by default
                streamingServerUrl: "ws://[IP:PORT]/my_subnet_reachability",
                //authenticationToken: "002cf306682129f68b1dc806a550d1",
                prefixMatch: 1 // -1 = less specific, 0 = exact match, 1 = more specific
            }, {
                // Same as above
             });
</script>

Get the Source Code

BGPlay.js is an open source project.

Before to use the code, you have to read and agree:

the LICENSE.txt contained in the code;
the Acknowledgments section below.

You can download the source code from this GitHub repository.

Acknowledgments

BGPlay has been installed on a great number of websites, including many for-profit services.
If you are using BGPlay, or an image of the tool, on your website or service, please include a link "About BGPlay" at the bottom of the tool pointing to this url: http://bgplayjs.com/?section=bgplay
Usually this notice is added by the widget itself. If you have a version of the code that doesn't do that, please add it manually.
Please, refer to the tool with the correct name of BGPlay.
If you are sharing a link to a BGPlay instance or an image of the tool on a social media, please add the tag #BGPlay or include @BGPlayJS

How to Use Your Data in BGPlay

After you downloaded the source, the easiest way is to create a REST API having the same format and functions of the one documented here and change the url to point to your API in "JsonWrap.getJsonUrl()".

If you have a different JSON format:

Edit "getParams()" and "setParams()" making it suitable for the exchange of parameters from/to the tool. In particular "getParams()" converts the parameters from the URL/HTML/external code in those valid inside the tool. Instead, "setParams()" converts the internal parameters in those valid for the URL/HTML/external code;
if you changed the JSON structure, for example introducing new attributes for the objects in the scene, remember to change accordingly the JsonWrapper. In particular the "createNodes()", "createSources()", "createTargets()", "createEvents()", and "createInitialState()" methods.

If you instead want to use WebSockets to update or create the initial status of BGPlay:

You have to create a connector layer to interact with your streaming back-end. It has to support the "connect()" and "subscribe()" methods. A practical example is the "IsolarioFacade";
It has to receive, in the options map at inisialisation time, the following callbacks: "onConnect", "onDump" (only if you are going to support also the initial dump done through sockets), and "onEvent";
the message format of your connector layer must be like described below.

{
    "type":"A",
    "timestamp":1443524986,
    "path":[
        {
            "owner":" CNR Consiglio Nazionale delle Ricerche,IT",
            "as_number":"2598"
        },
        {
            "owner":" CCTLD-IT Registry of ccTLD it - IIT-CNR,IT",
            "as_number":"2597"
        }
    ],
    "source": {
        "as_number":"2598",
        "rrc":"isolario",
        "id":"isolario-192.65.131.235",
        "ip":"192.65.131.235"
    },
    "target":{
        "prefix":"209.212.8.0/24"
    },
    "community":
        "2597:101 2597:111 2597:666 2597:1000"
}

Some Viz Details

Automatic calculation of the position of the elements in the graphs. It is essential that the nodes do not change their position during the evolution of the routing in order to maintain the mental map.
The paths, except for static paths, are straight-lines coloured using different and unique colors. Each color is extracted from a predefined set filled with an algorithm that generates colors distinguishable by the human eye.
Paths that do not change their route for the entire time window (or "up to now" for the streaming) are called static paths (we may want to find a better name in the future) and represented by dashed lines. Static paths are divided in different colored trees and paths into the same tree are collapsed in a single dashed line. A path is part of a tree if and only if collapsing it will be however always possible to understand its start and end point. This approach reduces dramatically the number of connections represented in the scene without losing information.
Paths between edges are arranged in a metro-line fashion. The consistency of the position of a path in a beam traversing the same set of edges is guaranteed. In this way it is easy to understand how a path connects a set of nodes;
You can focus in a portion of the graph hovering over a node or a path.

How to Build on Top of BGPlay

Implement your module as a Backbone.js View and declare it in your modules.js.

Include any HTML snippet required to your module in the html directory and use the "parseTemplate()" method to automatically load and parse it. The template system is based on Mustache.js.

History of BGPlay

The first version of BGPlay was a Java applet created by the Computer Networks Research Group at Roma Tre University. The tool was hosted by RIPE NCC (using the RIS database as a data source) from May 2004 to July 2009. Currently, an instance of BGPlay is hosted by the University of Oregon and uses ORV data.

I presented BGPlay in its new web application vest on 2013-05-16 during the RIPE 66 meeting.

Who is Using BGPlay

The traceroute visualisation project Radian. I developed this project at the Computer Network Research Group of Roma Tre University. The project is mainained by Roma Tre.
The RIPE NCC RIPEstat service
The isolario project
bgpmon.net and its BGPstream service

Many companies which I supported the installation of BGPlay in their data centers for day-to-day operations.

Links About BGPlay

Video "Real-time BGPlay demo" by Massimo Candela
Video "North Korea Breakdown" by denschub
Video "#Facebookdown on BGPlay" by Massimo Candela
RIPE labs article "BGPlay integrated in RIPEstat" by Vasco Asturiano
RIPE labs article "Has the Routability of Longer-than-/24 Prefixes Changed?" by Emile Aben
OpenDNS article How Hacking Team Helped Italian Special Operations Group with BGP Routing Hijack
Ars Technica Russian-controlled telecom hijacks financial services' Internet traffic

Many many more articles, please email me if you want I add something here.