Messing with JavaScript and the DOM to measure network characteristics

Messing with JS & the DOM to analyse the
Network

Philip Tellis / philip@bluesmoon.info

JSConf.eu / 2011-10-01

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

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


1
Latency


1 Blinkenlichten

It takes about 23ms for light to get from Berlin to NY
(35ms through ﬁbre)
Image from http://cablemap.info


1 HTTP


So to measure latency, we need to send 1 packet each way, and
time 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";


TCP handshake
2

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 lookup
time 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 ﬁres onerror
• which is indistinguishable from network error


Network Throughput
3

3 Measuring Network Throughput

size
download_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 ﬁt
in 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/


3 Network Throughput in JavaScript – Take 2

// image object is now an array of multiple images
var i=0;
if(i>0)
image[i-1].end = +new Date;
if(i >= image.length)
done();
else {
img.onload = ld;
image[i].start = +new Date;
img.src=image[i].url;
}
i++;
};



Slow network connection, meet really huge 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

ﬂickr/sophistechate/4264466015/


The code for that is NOT gonna ﬁt on a slide


4 DNS


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/’];
t.push(+new Date);
if(t.length > hosts.length)
done();
else {
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


5 IPv6


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 IPv6
host
• 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


6
Private Network Scanning


6 Private Network Scanning

JavaScript in the browser runs with the User’s Security
Privileges


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 modems
3 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
• philip@bluesmoon.info
• @bluesmoon
• geek paranoid speedfreak
• http://bluesmoon.info/


Thank you


Messing with JavaScript and the DOM to measure network characteristics

More Related Content

What's hot (15)

Similar to Messing with JavaScript and the DOM to measure network characteristics (20)

More from Philip Tellis (20)

Recently uploaded (20)

Messing with JavaScript and the DOM to measure network characteristics