##SPOFCheck - Fighting Frontend SPOF at its root

With the increase in 3rd party widgets and modernization of web applications, Frontend Single Point Of Failure (SPOF) has become a critical focus point. Thanks to Steve Souders for his initial research on this topic, we now have a list of common patterns which cause SPOF. The awareness of Frontend SPOF has also increased tremendously among engineers, thanks to some of the recent blogs and articles emphasizing the importance of it.

There are already a bunch of utilities and plugins out there which can detect possible SPOF vulnerabilities in a web application. The most notable ones being webpagetest.org, SPOF-O-Matic chrome plugin and YSlow 3PO extension. At eBay we wanted to detect SPOF at a very early stage, during the development cycle itself. This means an additional hook in our automated testing pipeline. The solution resulted in creating a simple tool which works on our test URLs and produces SPOF alerts. The tool is SPOFCheck.

SPOFCheck is a Command Line Interface (CLI) built in Node.js to detect possible Frontend SPOF for web pages. The output is generated in an XML format that can be consumed and reported by CI jobs. The tool is integrated with our secondary jobs, which run daily automation on a testing server where a development branch is deployed. In case of a SPOF alert, engineers are notified and they act on it accordingly. This process ensures that SPOFs are contained within the development cycle and do not sneak into staging or production.

Thanks to github projects spof-o-matic and 3po, a lot of the code logic has been re-used here. The design and packaging of the tool is based on csslint, thanks to Nicholas Zakas and Nicole Sullivan.

##The command line interface SPOFCheck provides a simple command line interface and runs on Node.js

To install SPOFCheck run the following

$ npm install -g spofcheck

To run SPOFCheck, use the following format

spofcheck [options]* [urls]*

Options
--help | -h                       		     Displays this information.
--format=<format> | -f <format>   		     Indicate which format [junit-xml | spof-xml | text] to use for output.
--outputdir=<dir> | -o <dir>      		     Outputs the spof results to this directory.
--rules=<rule[,rule]+> | -r <rule[,rule]+>   Indicate which rules to include.
--print | -p                      		     Outputs the results in console, instead of saving to a file.
--quiet | -q                      		     Keeps the console clear from logging.

Example

$ spofcheck -f junit-xml -o /tests www.ebay.com www.amazon.com

##Rules SPOFCheck by default runs with 5 rules (checks). The rules are maintained in the rules.js file. New rules can be easily added by pushing entries to the rules array or calling the spof api registerRules. The default rules come from Souders's original list outlined below

1. 3rdparty-scripts - Always load 3rd party external scripts asyncronously in a non-blocking pattern
2. application-js - Load application JS in a non-blocking pattern or towards the end of page
3. fontface-stylesheet - Try to inline @font-face style. Also make the font files compressed and cacheable
4. fontface-inline - Make sure the fonts files are compressed, cached and small in size
5. fontface-inline-precede-script-IE - Make sure inlined @font-face is not preceded by a SCRIPT tag, causes SPOF in IE

##Output SPOFCheck creates a file and writes results in one of the below formats

• junit-xml - a format most CI servers can parse, the default format
• spof-xml - an XML format that can be consumed by other utilities
• text - a textual representation of the results

The format can be specified using the --format or -f option. For just printing results i.e. no file creation, use the --print or -p option

##Programmable API SPOFCheck also provides a programmable API to be used along with build scripts like grunt. The API is called run which takes in a lits of URLs along with options (same options mentioned above) and returns a promise. The promise is either fulfilled with the SPOF analysis results or rejected with an error message.

var spofcheck = require('spofcheck');
spofcheck.run(['www.google.com', 'www.bing.com']).then(function(results){	
	console.log(JSON.stringify(results));
},function(errorObject) {
	console.log(errorObject.message);
});

The format of the results object is shown below

[  
   {  
      "messages":[  
         {  
            "type":"warning",
            "message":"WARNING: Possible SPOF attack in IE due to inline @font-face preceded by a SCRIPT tag",
            "entity":"NA",
            "score":"NA",
            "rule":{  
               "id":"fontface-inline-precede-script-IE",
               "name":"Inline @font-face precede Script tag IE issue",
               "desc":"Make sure inlined @font-face is not preceded by a SCRIPT tag, causes SPOF in IE"
            }
         }
      ],
      "url":"http://www.bing.com"
   },
   {  
      "messages":[  
         {  
            "type":"warning",
            "message":"WARNING: Possible SPOF attack in IE due to inline @font-face preceded by a SCRIPT tag",
            "entity":"NA",
            "score":"NA",
            "rule":{  
               "id":"fontface-inline-precede-script-IE",
               "name":"Inline @font-face precede Script tag IE issue",
               "desc":"Make sure inlined @font-face is not preceded by a SCRIPT tag, causes SPOF in IE"
            }
         }
      ],
      "url":"http://www.google.com"
   }
]

##Testing The entire test suite for both, the Command Line Interface and programmable API is available in the main test file spofcheck.js. For assertion the default Node.js assert module is used. To run the tests - clone the repo, install the package $ npm install and run

$ npm test

##Issues Have a bug or a feature request? Please open a new issue

##Authors Senthil Padmanabhan - github | twitter

##License Copyright (c) 2012 eBay Inc.

Released under the MIT License http://www.opensource.org/licenses/MIT