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

1 LatencyJSConf.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 ﬁbre) 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, and time 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

TCP handshake 2JSConf.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 lookup time 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 ﬁres onerror • which is indistinguishable from network error JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 15

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

3 Measuring Network Throughput size download_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 ﬁt in 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 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

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ﬂickr/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 ﬁt on a slide JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 31

4 DNSJSConf.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

5 IPv6JSConf.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 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

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 Security Privileges 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 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

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 youJSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 49

http://paper.li	44
http://a0.twimg.com	32
http://a0.twimg.com	32
http://us-w1.rockmelt.com	10
http://tweetedtimes.com	6
http://strawberryj.am	2
http://strawberryj.am	2
http://www.scoop.it	1

Messing with JavaScript and the DOM to measure network characteristics

by Philip Tellis

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 129

Statistics

Messing with JavaScript and the DOM to measure network characteristics Presentation Transcript