Messing with JavaScript and the DOM to measure network characteristics
1. 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
2. HTTP/TCP/IP
Developed by three guys with one beard between them
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 2
3. JavaScript: The good parts
Discovered by one guy with one beard on him
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 3
4. Let’s play with the nasty parts
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 4
5. 1
Latency
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 5
6. 1 Blinkenlichten
It takes about 23ms for light to get from Berlin to NY
(35ms through fibre)
Image from http://cablemap.info
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 6
7. 1 HTTP
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 7
8. So to measure latency, we need to send 1 packet each way, and
time it
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 8
9. 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";
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 9
10. TCP handshake
2
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 10
11. 2 ACK-ACK-ACK
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 11
12. 2 Connection: keep-alive
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 12
13. 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();
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 13
14. The astute reader will notice that we’ve ignored DNS lookup
time here... how would you measure it?
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 14
15. 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
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 15
16. Network Throughput
3
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 16
17. 3 Measuring Network Throughput
size
download_time
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 17
18. 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;
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 18
19. 3 Measuring Network Throughput
If it were that simple, I wouldn’t be doing a talk at @jsconfeu
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 19
20. 3 TCP Slow Start
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 20
21. 3 Measuring Network Throughput
So to make the best use of bandwidth, we need resources that fit
in a TCP window
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 21
22. 3 There is no single size that will tax all available networks
http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 22
23. 3 Network Throughput in JavaScript – Take 2
// image object is now an array of multiple images
var 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++;
};
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 23
24. 3 Measuring Network Throughput
Slow network connection, meet really huge image
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 24
25. 3 Network Throughput in JavaScript – Take 3
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;
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 25
26. 3 Network Throughput in JavaScript – Take 3
if(i>0) {
image[i-1].end = +new Date;
clearTimeout(image[i-1].timer);
}
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 26
27. 3 Network Throughput in JavaScript – Take 3
if(i >= image.length
|| (i > 0 && image[i-1].expired)) {
done();
}
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 27
28. 3 Measuring Network Throughput
Are we done yet?
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 28
29. 3 Measuring Network Throughput
Are we done yet?
sure...
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 28
30. 3 Measuring Network Throughput
Except network throughput is different every time you test it
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 29
31. Statistics to the Rescue
flickr/sophistechate/4264466015/
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 30
32. 3 Measuring Network Throughput
The code for that is NOT gonna fit on a slide
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 31
33. 4 DNS
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 32
34. 4 Measuring DNS
time_with_dns − time_without_dns
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 33
35. 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();
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 34
36. 4 Measuring DNS
What if DNS were already cached?
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 35
37. 4 Measuring DNS
What if DNS were already cached?
Use a wildcard DNS entry
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 35
38. 4 Measuring DNS
What if you map DNS based on geo location?
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 36
39. 4 Measuring DNS
What if you map DNS based on geo location?
A little more complicated, but doable
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 36
40. 4 Measuring DNS
Full code in boomerang’s DNS plugin
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 37
41. 5 IPv6
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 38
42. 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
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 39
43. 5 Measuring IPv6 support and latency
Full code in boomerang’s IPv6 plugin
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 40
45. 6 Private Network Scanning
JavaScript in the browser runs with the User’s Security
Privileges
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 42
46. 6 Private Network Scanning
This means you can see the user’s private LAN
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 43
47. 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
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 44
48. 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
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 45
49. –
.done()
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 46
50. Code/References
• http://github.com/bluesmoon/boomerang
• http://samy.pl/mapxss/
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 47
51. • Philip Tellis
• LogNormal.com
• philip@bluesmoon.info
• @bluesmoon
• geek paranoid speedfreak
• http://bluesmoon.info/
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 48
52. Thank you
JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 49