Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Detecting JavaScript Libraries and Versions

DZone's Guide to

Detecting JavaScript Libraries and Versions

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

In the spirit of making our web browsing activities more secure, often times we need to be aware of all the resources and assets being loaded by our important web sites (Internet banking, HR portal, and the likes). Fortunately, it is rather easy to programmatically inspect which JavaScript libraries are used by those sites.

Using PhantomJS, the headless browser based on WebKit, we just need a simple script which loads a web page and then check its content. PhantomJS has the ability of executing any JavaScript code within the web page context, this permits a simple check of the existence of a particular library. Here is a 30-line script which demonstrates this approach:

var page = require('webpage').create(),
    system = require('system'),
    address;
 
if (system.args.length === 1) {
    console.log('Usage: libdetect.js url');
    phantom.exit(1);
}
 
page.settings.loadImages = false;
address = system.args[1];
console.log('Loading', address, '...');
 
page.open(address, function (status) {
  if (status !== 'success') {
    console.log('ERROR: Unable to load', address);
    phantom.exit();
  } else {
    setTimeout(function () {
      var jQueryVersion;
      jQueryVersion = page.evaluate(function () {
        return (typeof jQuery === 'function') ? jQuery.fn.jquery : undefined;
      });
      if (jQueryVersion) {
        console.log('jQuery', jQueryVersion);
      } else {
        console.log('This site does not use jQuery.');
      }
      phantom.exit();
    }, 2000);
  }
});

The principle is quite straighforward: set up the right page object, load the requested URL, and then evaluate a piece of code which extract the jQuery version via jQuery.fn.jquery. For more details, PhantomJS documentation can be quite handy to understand what the script does at every step.

If you run the script on a site like CNN, the outcome will be:

phantomjs libdetect.js http://www.cnn.com
Loading http://www.cnn.com ...
jQuery 1.7.2

For sites which do not use jQuery, we got a prompt like:

phantomjs libdetect.js http://news.bbc.co.uk
Loading http://news.bbc.co.uk ...
This site does not use jQuery.

To keep it simple, the script only checks for the popular jQuery but it should be easy to extend it to detect all other well-known libraries and frameworks out there. Now imagine using the script to crawl thousands popular web sites out there, we can come up with a distribution chart of various JavaScript libraries and versions. Any volunteers?

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Published at DZone with permission of Ariya Hidayat, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}