diff --git a/README.md b/README.md index 76ad03be..2d132964 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ You can view this website on GitHub Pages: https://ipfs.github.io/public-gateway-checker/ -[![screenshot_2020-01-05.png](https://ipfs.io/ipfs/QmPw3s2zijn3zmCDAnWMEaHx9JTSevfG7uZaiCKc5A21U1?filename=screenshot_2020-01-05.png)](https://ipfs.github.io/public-gateway-checker/) +[![screenshot_2020-01-05.png](https://ipfs.io/ipfs/QmRjQyxLwvd6D4fGSDx3uPM1nRmBnX4HwEaK5p8fuZFtpp?filename=screenshot.jpg)](https://ipfs.github.io/public-gateway-checker/) **NOTE:** All of these (except `ipfs.io` and `dweb.link`) are hosted by third-parties and should be treated as such. diff --git a/app.js b/app.js index 37ab4079..c1ce839c 100644 --- a/app.js +++ b/app.js @@ -8,6 +8,13 @@ const HASH_TO_TEST = 'bafybeifx7yeb55armcsxwwitkymga5xf53dxiarykms3ygqic223w5sk3 const SCRIPT_HASH = 'bafybeietzsezxbgeeyrmwicylb5tpvf7yutrm3bxrfaoulaituhbi7q6yi'; const HASH_STRING = 'Hello from IPFS Gateway Checker'; +const ipfs_http_client = window.IpfsHttpClient({ + host: 'ipfs.io', + port: 443, + protocol: 'https' +}); + + let checker = document.getElementById('checker'); checker.nodes = []; @@ -169,6 +176,75 @@ Origin.prototype.onerror = function() { this.tag.textContent = '❌'; }; +let Flag = function(parent, hostname) { + this.parent = parent; + this.tag = document.createElement("div"); + this.tag.className = "Flag"; + this.tag.textContent = ''; + + let ask = true; + + try{ + let savedSTR = localStorage.getItem(hostname); + if (savedSTR) { + let saved = JSON.parse(savedSTR); + let now = Date.now(); + let savedTime = saved.time; + let elapsed = now - savedTime; + let expiration = 7 * 24 * 60 * 60 * 1000; // 7 days + if (elapsed < expiration) { + ask = false; + this.onResponse(saved); + } + } + } catch(e) { + console.error(`error while getting savedSTR for ${hostname}`, e) + } + + if (ask) { + setTimeout(() => { + let request = new XMLHttpRequest(); + request.open('GET', `https://cloudflare-dns.com/dns-query?name=${hostname}&type=A`); + request.setRequestHeader("accept", "application/dns-json"); + request.onreadystatechange = async () => { + if (4 == request.readyState) { + if (200 == request.status) { + try { + let response = JSON.parse(request.responseText); + let ip = null; + for (let i = 0; i < response.Answer.length && !ip; i++) { + let answer = response.Answer[i]; + if (1 == answer.type) { + ip = answer.data; + } + } + if (ip) { + let geoipResponse = await window.IpfsGeoip.lookup(ipfs_http_client, ip); + if (geoipResponse && geoipResponse.country_code) { + this.onResponse(geoipResponse); + geoipResponse.time = Date.now(); + let resposeSTR = JSON.stringify(geoipResponse); + localStorage.setItem(hostname, resposeSTR); + } + } + } catch(e) { + console.error(`error while getting DNS A record for ${hostname}`, e) + } + } + } + }; + request.onerror = (e) => {}; + request.send(); + }, 500 * Flag.requests++); // 2 / second, request limit + } +}; + +Flag.prototype.onResponse = function(response) { + this.tag.style["background-image"] = `url('https://ipfs.io/ipfs/QmaYjj5BHGAWfopTdE8ESzypbuthsZqTeqz9rEuh3EJZi6/${response.country_code.toLowerCase()}.svg')`; + this.tag.title = response.country_name; +}; + +Flag.requests = 0; let Node = function(parent, gateway, index) { this.parent = parent; @@ -185,11 +261,15 @@ let Node = function(parent, gateway, index) { this.origin = new Origin(this); this.tag.append(this.origin.tag); + this.link = document.createElement("div"); let gatewayAndHash = gateway.replace(':hash', HASH_TO_TEST); this.link.url = new URL(gatewayAndHash); this.link.textContent = gatewayHostname(this.link.url); this.link.className = "Link"; + + this.flag = new Flag(this, this.link.textContent); + this.tag.append(this.flag.tag); this.tag.append(this.link); this.took = document.createElement("div"); diff --git a/index.html b/index.html index 2d98de26..86832b8b 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,8 @@ + + @@ -27,5 +29,5 @@ - + diff --git a/styles.css b/styles.css index 1165e98d..28c7a71e 100644 --- a/styles.css +++ b/styles.css @@ -100,6 +100,14 @@ div.Node div.Origin { user-select: none; } +div.Node div.Flag { + width: 2em; + height: 1em; + background-repeat: no-repeat; + background-size: contain; + background-position: center; +} + div.Node div.Took { min-width: 5em; text-align: right;