Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Messing with JS & the DOM to analyse the                Network     Philip Tellis / philip@bluesmoon.info                 ...
HTTP/TCP/IP  Developed by three guys with one beard between them              JSConf.eu / 2011-10-01   Messing with JS & t...
JavaScript: The good parts   Discovered by one guy with one beard on him               JSConf.eu / 2011-10-01   Messing wi...
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 thro...
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...
1   Network latency in JavaScript      var ts, rtt, img = new Image;      img.onload=function() { rtt=(+new Date - ts) }; ...
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 ...
The astute reader will notice that we’ve ignored DNS lookup          time here... how would you measure it?          JSCon...
1 Notes    • 1x1 gif is 35 bytes    • including HTTP headers, is smaller than a TCP packet    • Fires onload on all browse...
Network Throughput                   3JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   16
3 Measuring Network Throughput                                    size                               download_time        ...
3   Network Throughput in JavaScript    // Assume global object    // image={ url: ..., size: ... }    var ts, rtt, bw, im...
3 Measuring Network Throughput   If it were that simple, I wouldn’t be doing a talk at @jsconfeu               JSConf.eu /...
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 fit                         i...
3 There is no single size that will tax all available networks   http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidt...
3   Network Throughput in JavaScript – Take 2    // image object is now an array of multiple images    var i=0;    var ld ...
3 Measuring Network Throughput        Slow network connection, meet really huge image             JSConf.eu / 2011-10-01  ...
3   Network Throughput in JavaScript – Take 3       var img = new Image;       img.onload = ld;       image[i].start = +ne...
3   Network Throughput in JavaScript – Take 3    if(i>0) {       image[i-1].end = +new Date;       clearTimeout(image[i-1]...
3   Network Throughput in JavaScript – Take 3    if(i >= image.length          || (i > 0 && image[i-1].expired)) {       d...
3 Measuring Network Throughput                             Are we done yet?            JSConf.eu / 2011-10-01   Messing wi...
3 Measuring Network Throughput                             Are we done yet?                                 sure...       ...
3 Measuring Network Throughput    Except network throughput is different every time you test it               JSConf.eu / ...
Statistics to the Rescueflickr/sophistechate/4264466015/                                  JSConf.eu / 2011-10-01   Messing ...
3 Measuring Network Throughput          The code for that is NOT gonna fit on a slide             JSConf.eu / 2011-10-01   ...
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...
4   Measuring DNS in JavaScript    var t=[], dns, ip, hosts=[’http://hostname.com/’,                               ’http:/...
4 Measuring DNS              What if DNS were already cached?           JSConf.eu / 2011-10-01   Messing with JS & the DOM...
4 Measuring DNS              What if DNS were already cached?                Use a wildcard DNS entry           JSConf.eu ...
4 Measuring DNS         What if you map DNS based on geo location?            JSConf.eu / 2011-10-01   Messing with JS & t...
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           JSConf.eu / 2011-10-01   Messing with JS & the DOM...
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 ...
5 Measuring IPv6 support and latency             Full code in boomerang’s IPv6 plugin             JSConf.eu / 2011-10-01  ...
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                            Privile...
6 Private Network Scanning         This means you can see the user’s private LAN             JSConf.eu / 2011-10-01   Mess...
6 Private Network Scanning – Gateways    1   Look at common gateway IPs: 192.168.1.1, 10.0.0.1, etc.    2   When found, lo...
6 Private Network Scanning – Services    1   Scan host range on private network for common ports (80,        22, 3306, etc...
–                   .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 ...
• Philip Tellis• LogNormal.com• philip@bluesmoon.info• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.info/       ...
Thank youJSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   49
Upcoming SlideShare
Loading in …5
×

Messing with JavaScript and the DOM to measure network characteristics

10,518 views

Published on

My talk from JSConf.eu: http://jsconf.eu/2011/messing_with_javascript_and_th.html

Published in: Technology
  • Be the first to comment

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 LatencyJSConf.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 2JSConf.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 3JSConf.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 Rescueflickr/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 DNSJSConf.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 IPv6JSConf.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
  44. 6Private Network Scanning JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 41
  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 youJSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 49

×