How we built the CyberSift Attack Map

Recently we launched a small site called the “CyberSift Attack Map” hosted at http://attack-map.cybersift.ioAny one involved in the InfoSec industry will be instantly familiar with the site:

 

Screenshot from 2017-10-12 12-36-06

It’s basically a map of attacks which either trip some rule in a signature based IPS such as SNORT, or land in a honeypot. In this article we’ll list some of the libraries and techniques we used to build the site for any devs out there who are interested.

Backend

We used the python Flask microframework, work in unison with Gevents. This was a relatively straightforward operation, with the major point of note being our inclusion of support for HTML5 server side events [SSE]. SSE are WebSocket’s smaller brother. Whereas websockets allow for bi-directional communication between browser and server, SSE only allow for unidirectional communication from server to browser. This suited our needs perfectly since we don’t really need the browser to get back to our server, but we do need real-time updates to flow from our server back down to the browser to populate the attack details, gauges and so on. We based our SSE Flask implementation off the extremely useful snippet from Oskar Blom you can find here:

http://flask.pocoo.org/snippets/116/

If you are going to go down this road, make sure you add some sort of “heartbeat” which instructs Flask to remove inactive clients from the subscriptions. As soon as our honeypot or twitter microservice got wind of a new attack, it’s pushed  as a message via SSE and updates the client browser in realtime

Frontend

It’s amazing to see just how quickly you can build a useful site because of the incredible hard work of other talented devs… In this case we used the following libraries to build the site:

If the site really catches on, we would need to consider re-writing the frontend with something like ReactJS to improve rendering performance

Advertisements

Super Simple React Native Redux Example

Inspired by http://blog.tylerbuchea.com/super-simple-react-redux-application-example/

In this article we explore the barest of solutions to get started with React Native + Redux. The only pre-requisite to the below is to have “create-react-native-app” installed (https://facebook.github.io/react-native/docs/getting-started.html)

Setup

create-react-native-app superSimple
cd superSimple
npm install --save redux react-redux

redux.js

 

App.js

Notes

  • In most create-react-native-app + redux tutorials that I researched, most mentioned the use of index.android.js or index.ios.js to connect Redux to the React App component. These files are not automatically created by create-react-native-app so I wanted to avoid introducing them.
  • The solution was to create a new “inner component” which I named AppInner in lines 13-23 above. This component contains the JSX of the original App component, which you can extend to contain whatever content you wish
  • Next, we use the connect function to map state and dispatch to props in the AppInner component (lines 57-60).
  • Finally, we change the original App component to point towards the component created by the connect step above (AppContainer in my example above – line 57). Notice how we wrap this in a Provider component to make the store available