Messing with JavaScript and the DOM to measure network characteristics

Messing with JS & the DOM to analyse theNetwork

Philip Tellis / [email protected]

JSConf.eu / 2011-10-01

JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 1

http://jsconf.eu/2011/


HTTP/TCP/IP

Developed by three guys with one beard between them



JavaScript: The good parts

Discovered by one guy with one beard on him



Let’s play with the nasty parts



1Latency



1 Blinkenlichten

It takes about 23ms for light to get from Berlin to NY(35ms through fibre)

Image from http://cablemap.info


http://cablemap.info/


1 HTTP



So to measure latency, we need to send 1 packet each way, andtime it



1 Network latency in JavaScript

var ts, rtt, img = new Image;img.onload=function() { rtt=(+new Date - ts) };ts = +new Date;img.src="/1x1.gif";



2TCP handshake



2 ACK-ACK-ACK



2 Connection: keep-alive



2 Network latency & TCP handshake in JavaScript

var t=[], n=2, tcp, rtt;var ld = function() {

t.push(+new Date);if(t.length > n)done();

else {var img = new Image;img.onload = ld;img.src="/1x1.gif?" + Math.random()

+ ’=’ + new Date;}

};var done = function() {

rtt=t[2]-t[1];tcp=t[1]-t[0]-rtt;

};ld();



The astute reader will notice that we’ve ignored DNS lookuptime here... how would you measure it?



1 Notes

• 1x1 gif is 35 bytes• including HTTP headers, is smaller than a TCP packet• Fires onload on all browsers• 0 byte image fires onerror• which is indistinguishable from network error



3Network Throughput



3 Measuring Network Throughput

sizedownload_time



3 Network Throughput in JavaScript

// Assume global object// image={ url: ..., size: ... }var ts, rtt, bw, img = new Image;img.onload=function() {

rtt=(+new Date - ts);bw = image.size*1000/rtt; // rtt is in ms

};ts = +new Date;img.src=image.url;




If it were that simple, I wouldn’t be doing a talk at @jsconfeu



3 TCP Slow Start




So to make the best use of bandwidth, we need resources that fitin a TCP window



3 There is no single size that will tax all available networks

http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/


http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/


3 Network Throughput in JavaScript – Take 2

// image object is now an array of multiple imagesvar i=0;var ld = function() {

if(i>0)image[i-1].end = +new Date;

if(i >= image.length)done();

else {var img = new Image;img.onload = ld;image[i].start = +new Date;img.src=image[i].url;

}i++;

};




Slow network connection, meet really huge image




var img = new Image;img.onload = ld;image[i].start = +new Date;image[i].timer =

setTimeout(function() {image[i].expired=true

},image[i].timeout);

img.src=image[i].url;




if(i>0) {image[i-1].end = +new Date;clearTimeout(image[i-1].timer);

}




if(i >= image.length|| (i > 0 && image[i-1].expired)) {

done();}




Are we done yet?




Are we done yet?sure...




Except network throughput is different every time you test it



Statistics to the Rescue

flickr/sophistechate/4264466015/


http://www.flickr.com/photos/sophistechate/4264466015/



The code for that is NOT gonna fit on a slide



4DNS



4 Measuring DNS

time_with_dns − time_without_dns



4 Measuring DNS in JavaScript

var t=[], dns, ip, hosts=[’http://hostname.com/’,’http://ip.ad.dr.ess/’];

var ld = function() {t.push(+new Date);if(t.length > hosts.length)done();

else {var img = new Image;img.onload = ld;img.src=hosts[t.length-1] + "/1x1.gif";

}};var done = function() {

ip=t[2]-t[1];dns=t[1]-t[0]-ip;

};ld();



4 Measuring DNS

What if DNS were already cached?



4 Measuring DNS

What if DNS were already cached?Use a wildcard DNS entry



4 Measuring DNS

What if you map DNS based on geo location?



4 Measuring DNS

What if you map DNS based on geo location?A little more complicated, but doable



4 Measuring DNS

Full code in boomerang’s DNS plugin



5IPv6



5 Measuring IPv6 support and latency

1 Try to load image from IPv6 host• If timeout or error, then no IPv6 support• If successful, then calculate latency and proceed

2 Try to load image from hostname that resolves only to IPv6host

• If timeout or error, then DNS server doesn’t support IPv6• If successful, calculate latency



5 Measuring IPv6 support and latency

Full code in boomerang’s IPv6 plugin



6Private Network Scanning



6 Private Network Scanning

JavaScript in the browser runs with the User’s SecurityPrivileges



6 Private Network Scanning

This means you can see the user’s private LAN



6 Private Network Scanning – Gateways

1 Look at common gateway IPs: 192.168.1.1, 10.0.0.1, etc.2 When found, look for common image URLs assuming

various routers/DSL modems3 When found, try to log in with default username/password

if you’re lucky, the user is already logged in



6 Private Network Scanning – Services

1 Scan host range on private network for common ports (80,22, 3306, etc.)

2 Measure how long it takes to onerror• Short timeout: connection refused• Long timeout: something listening, but it isn’t HTTP• Longer timeout: probably HTTP, but not an image

3 Try an iframe instead of an image



–.done()



Code/References

• http://github.com/bluesmoon/boomerang

• http://samy.pl/mapxss/



• Philip Tellis• LogNormal.com• [email protected]

• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.info/


http://lognormal.com/

http://twitter.com/bluesmoon

http://bluesmoon.info/


Thank you



Technology

Messing with JavaScript and the DOM to measure network characteristics