Created
July 2, 2016 06:15
-
-
Save SafeAF/424f9913e38b4101c48a8438a1ad7a54 to your computer and use it in GitHub Desktop.
js passive geo locator ui in
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { margin: 1em; } | |
| #map { height: 500px; } | |
| #intro { font-size: 14px; font-family: arial; max-width: 500px; margin: 1em auto 1em auto; text-align: justify; } | |
| </style> | |
| <title>Passive TCP/IP Geo-Location</title> | |
| </head> | |
| <body> | |
| <div id="intro"> | |
| <h1>Passive TCP/IP Geo-Location</h1> | |
| <p>Did you know your TCP/IP stack leaks information on your physical location?</p> | |
| <p>This website demonstrates IP address geo-location by passively measuring TCP/IP round-trip times of web requests made | |
| to a few servers spread around the world. The measurements are then used to approximate possible physical distances to | |
| the servers, and finally drawn on a Google Map. The common area of all circles (that is, the most shaded area) shows | |
| your likely location.</p> | |
| <p>Of course, these approximations are rather crude, and hence the usually huge margin of error. Anyway, this site is | |
| <em>just a proof-of-concept</em> demonstrating that it is easy to geo-locate a WWW user using just his/her TCP/IP | |
| stack while fetching some JavaScript files. Note that the IP address alone is sometimes not reliable for geo-location, and | |
| firewalls often block ICMP ping requests.</p> | |
| <p>See also: <a href="http://whereami.pl/">whereami.pl</a></p> | |
| <div> | |
| Contribute your real location: | |
| <input id="loc" type="text" width="20"></input> | |
| <button id="send">Send</button> | |
| </div> | |
| </div> | |
| <pre id="log"> | |
| Loading... | |
| </pre> | |
| <div id="map"></div> | |
| <script> | |
| function mapInit() | |
| { | |
| return new google.maps.Map(document.getElementById('map'), { | |
| zoom: 3, | |
| center: {lat: 51, lng: 18}, | |
| mapTypeId: google.maps.MapTypeId.TERRAIN | |
| }); | |
| } | |
| var minrtt = 10000; | |
| function mapCircle(map, name, lat, lng, db, color) | |
| { | |
| var rtt = db.rtt; | |
| var center = {lat:lat, lng:lng}; | |
| $("#log").append("<font color=\"" + color + "\">" + name + ": rtt = " + rtt + " ms</font>\n"); | |
| /* small enough? */ | |
| if (rtt > 250) | |
| return; | |
| /* minimum rtt? */ | |
| if (rtt < minrtt) { | |
| minrtt = rtt; | |
| map.setCenter(center); | |
| } | |
| var v = 299792458.0 * 5.0/9.0; | |
| var radius = v * (rtt-1)/2000.0; | |
| return new google.maps.Circle({ | |
| strokeColor: color, | |
| strokeOpacity: 0.8, | |
| strokeWeight: 2, | |
| fillColor: color, | |
| fillOpacity: 0.2, | |
| map: map, | |
| center: center, | |
| radius: radius, | |
| }); | |
| } | |
| </script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> | |
| <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDDRuUPRF_5sOJ2w_nLrewrcFpX5oK8A0g"></script> | |
| <script type="application/javascript" src="http://46.101.226.53/DE_Frankfurt.js"></script> | |
| <script type="application/javascript" src="http://107.170.107.227/US_NewYork.js"></script> | |
| <script type="application/javascript" src="http://107.170.218.176/US_SanFrancisco.js"></script> | |
| <script type="application/javascript" src="http://139.59.5.215/IN_Bangalore.js"></script> | |
| <script type="application/javascript" src="http://139.59.243.113/SG_Singapore.js"></script> | |
| <script type="application/javascript"> | |
| $(document).ready(function() { | |
| var map = mapInit(); | |
| $("#log").text(""); | |
| var cs = [ "#ff0000", "#ffdd00", "#40ff00", "#00bfff", "#bf00ff" ]; | |
| mapCircle(map, "Germany, Frankfurt", 50.112, 8.684, DE_Fra, cs[0]); | |
| mapCircle(map, "US, New York", 40.710, -74.001, US_New, cs[1]); | |
| mapCircle(map, "US, San Francisco", 37.757, -122.435, US_San, cs[2]); | |
| mapCircle(map, "India, Bangalore", 12.963, 77.586, IN_Ban, cs[3]); | |
| mapCircle(map, "Singapore", 1.352, 103.858, SG_Sin, cs[4]); | |
| }); | |
| $("#send").click(function() | |
| { | |
| var loc = $("#loc").val(); | |
| if (loc == "") return; | |
| $("#send").text("Sending..."); | |
| $.post("http://geoloc.foremski.pl/loc.php", | |
| {DE_Fra: DE_Fra, US_New: US_New, US_San: US_San, IN_Ban: IN_Ban, SG_Sin: SG_Sin, loc: loc} | |
| ) | |
| .done(function() { $("#send").text("Thanks!"); $("#loc").val(""); }) | |
| .fail(function() { alert("Sorry, failed to save it"); }); | |
| }); | |
| </script> | |
| <script> | |
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | |
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | |
| })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); | |
| ga('create', 'UA-79825894-1', 'auto'); | |
| ga('send', 'pageview'); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment