View
5.582
Download
2
Category
Preview:
DESCRIPTION
My talk from JSConf.eu: http://jsconf.eu/2011/messing_with_javascript_and_th.html
Citation preview
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
Recommended