Analysing network characteristics with JavaScript

• Philip Tellis

• .com
• philip@lognormal.com
• @bluesmoon
• geek paranoid speedfreak
• http://bluesmoon.info/

Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 1

I <3 JavaScript


So much that I wore Mustache socks to my wedding


I’m also a Web Speedfreak


We measure real user website performance


This talk is (mostly) about how we abuse JavaScript to do it


Messing with JS & the DOM to analyse the
Network

Philip Tellis / philip@lognormal.com

Web-5 / 2012-04-04


1
Latency


1 Blinking Lights

It takes about 18ms for light to get from Béziers to Boston
(30ms through ﬁbre)
Image from http://cablemap.info


1 HTTP


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


Note about the code

Note that in the code,
+ new Date
is equivalent to
new Date().getTime()


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";


2
TCP handshake


2 ACK-ACK-ACK


2 Connection: keep-alive


2 Network latency & TCP handshake in JavaScript
var t=[], tcp, rtt;
var ld = function() {
t.push(+new Date);
if(t.length > 2) // run 2 times
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();

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


3
Network Throughput


3 Measuring Network Throughput

data_length
download_time


Should you fly a 747 or a 737?

• A 747 seats 400+ passengers
• A 737 seats about 150
• Both take about the same time to fly from CDG to MPL
• A 747 takes longer to load and unload

The best selling aircraft to date is the 737

This analogy would have been much cooler if the Concorde still flew


Low Latency, Low Bandwidth


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 @web-5


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


But this is sort of what we see world-wide


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

• .com
• philip@lognormal.com
• @bluesmoon
• geek paranoid speedfreak
• http://bluesmoon.info/


Thank you


Analysing network characteristics with JavaScript

More Related Content

Similar to Analysing network characteristics with JavaScript

More from Philip Tellis

Recently uploaded

Analysing network characteristics with JavaScript