Messing with JavaScript and the DOM to measure network characteristics

Messing with JS & the DOM to analyse theNetwork

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

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

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

Let’s play with the nasty parts

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

1Latency

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

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

1 HTTP

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

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

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

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

2TCP handshake

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

2 ACK-ACK-ACK

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

2 Connection: keep-alive

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

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

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

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

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

3Network Throughput

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

3 Measuring Network Throughput

sizedownload_time

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

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

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

3 TCP Slow Start

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

3 Measuring Network Throughput

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

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

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

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

};

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

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

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

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

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

3 Measuring Network Throughput

Are we done yet?

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

3 Measuring Network Throughput

Are we done yet?sure...

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

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

Statistics to the Rescue

flickr/sophistechate/4264466015/

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

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

4DNS

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

4 Measuring DNS

time_with_dns − time_without_dns

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

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

4 Measuring DNS

What if DNS were already cached?

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

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

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

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

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

5IPv6

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

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

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

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

6Private Network Scanning

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

6 Private Network Scanning

JavaScript in the browser runs with the User’s SecurityPrivileges

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

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

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

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

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

–.done()

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

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

• 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

Thank you

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