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

6,619
-1

Published on

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

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,619
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
40
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×