From eab6485edb0ce0bbb4805790a9ee006716b30c2d Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 25 May 2020 12:32:43 +0300 Subject: [PATCH 1/4] Move `escapeHtml` to utils. Signed-off-by: XhmikosR --- auditlog.php | 1 + db_lists.php | 1 + index.php | 1 + scripts/pi-hole/js/auditlog.js | 21 ++++------------- scripts/pi-hole/js/db_lists.js | 35 ++++++++-------------------- scripts/pi-hole/js/index.js | 42 ++++++++++++---------------------- scripts/pi-hole/js/utils.js | 16 +++++++++++++ 7 files changed, 47 insertions(+), 70 deletions(-) diff --git a/auditlog.php b/auditlog.php index 069c3ac5..9e5d4464 100644 --- a/auditlog.php +++ b/auditlog.php @@ -73,6 +73,7 @@ + + + ": ">", - '"': """, - "'": "'" - }; - - return text.replace(/[&<>"']/g, function (m) { - return map[m]; - }); -} - function updateTopLists() { $.getJSON("api.php?topItems=audit", function (data) { if ("FTLnotrunning" in data) { @@ -38,7 +25,7 @@ function updateTopLists() { for (domain in data.top_queries) { if (Object.prototype.hasOwnProperty.call(data.top_queries, domain)) { // Sanitize domain - domain = escapeHtml(domain); + domain = utils.escapeHtml(domain); url = '' + domain + ""; domaintable.append( "" + @@ -57,7 +44,7 @@ function updateTopLists() { if (Object.prototype.hasOwnProperty.call(data.top_ads, domain)) { var input = domain.split(" "); // Sanitize domain - var printdomain = escapeHtml(input[0]); + var printdomain = utils.escapeHtml(input[0]); if (input.length > 1) { url = '": ">", - '"': """, - "'": "'" - }; - - return text.replace(/[&<>"']/g, function (m) { - return map[m]; - }); -} - function updateTopClientsChart() { $("#client-frequency .overlay").show(); $.getJSON("api_db.php?topClients&from=" + from + "&until=" + until, function (data) { @@ -84,10 +69,10 @@ function updateTopClientsChart() { for (client in data.top_sources) { if (Object.prototype.hasOwnProperty.call(data.top_sources, client)) { // Sanitize client - client = escapeHtml(client); - if (escapeHtml(client) !== client) { + client = utils.escapeHtml(client); + if (utils.escapeHtml(client) !== client) { // Make a copy with the escaped index if necessary - data.top_sources[escapeHtml(client)] = data.top_sources[client]; + data.top_sources[utils.escapeHtml(client)] = data.top_sources[client]; } if (client.indexOf("|") !== -1) { @@ -138,10 +123,10 @@ function updateTopDomainsChart() { for (domain in data.top_domains) { if (Object.prototype.hasOwnProperty.call(data.top_domains, domain)) { // Sanitize domain - domain = escapeHtml(domain); - if (escapeHtml(domain) !== domain) { + domain = utils.escapeHtml(domain); + if (utils.escapeHtml(domain) !== domain) { // Make a copy with the escaped index if necessary - data.top_domains[escapeHtml(domain)] = data.top_domains[domain]; + data.top_domains[utils.escapeHtml(domain)] = data.top_domains[domain]; } percentage = (data.top_domains[domain] / sum) * 100; @@ -185,10 +170,10 @@ function updateTopAdsChart() { for (ad in data.top_ads) { if (Object.prototype.hasOwnProperty.call(data.top_ads, ad)) { // Sanitize ad - ad = escapeHtml(ad); - if (escapeHtml(ad) !== ad) { + ad = utils.escapeHtml(ad); + if (utils.escapeHtml(ad) !== ad) { // Make a copy with the escaped index if necessary - data.top_ads[escapeHtml(ad)] = data.top_ads[ad]; + data.top_ads[utils.escapeHtml(ad)] = data.top_ads[ad]; } percentage = (data.top_ads[ad] / sum) * 100; diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index f2a51c83..75d01dc4 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -5,8 +5,9 @@ * This file is copyright under the latest version of the EUPL. * Please see LICENSE file for your rights under this license. */ +/* global utils:false, Chart:false, updateSessionTimer:false */ + // Define global variables -/* global Chart:false, updateSessionTimer:false */ var timeLineChart, clientsChart; var queryTypePieChart, forwardDestinationPieChart; @@ -528,21 +529,6 @@ function updateForwardDestinationsPie() { }); } -// Credit: http://stackoverflow.com/questions/1787322/htmlspecialchars-equivalent-in-javascript/4835406#4835406 -function escapeHtml(text) { - var map = { - "&": "&", - "<": "<", - ">": ">", - '"': """, - "'": "'" - }; - - return text.replace(/[&<>"']/g, function (m) { - return map[m]; - }); -} - function updateTopClientsChart() { $.getJSON("api.php?summaryRaw&getQuerySources&topClientsBlocked", function (data) { if ("FTLnotrunning" in data) { @@ -556,12 +542,12 @@ function updateTopClientsChart() { for (client in data.top_sources) { if (Object.prototype.hasOwnProperty.call(data.top_sources, client)) { // Sanitize client - if (escapeHtml(client) !== client) { + if (utils.escapeHtml(client) !== client) { // Make a copy with the escaped index if necessary - data.top_sources[escapeHtml(client)] = data.top_sources[client]; + data.top_sources[utils.escapeHtml(client)] = data.top_sources[client]; } - client = escapeHtml(client); + client = utils.escapeHtml(client); if (client.indexOf("|") !== -1) { idx = client.indexOf("|"); clientname = client.substr(0, idx); @@ -602,12 +588,12 @@ function updateTopClientsChart() { for (client in data.top_sources_blocked) { if (Object.prototype.hasOwnProperty.call(data.top_sources_blocked, client)) { // Sanitize client - if (escapeHtml(client) !== client) { + if (utils.escapeHtml(client) !== client) { // Make a copy with the escaped index if necessary - data.top_sources_blocked[escapeHtml(client)] = data.top_sources_blocked[client]; + data.top_sources_blocked[utils.escapeHtml(client)] = data.top_sources_blocked[client]; } - client = escapeHtml(client); + client = utils.escapeHtml(client); if (client.indexOf("|") !== -1) { idx = client.indexOf("|"); clientname = client.substr(0, idx); @@ -674,12 +660,12 @@ function updateTopLists() { for (domain in data.top_queries) { if (Object.prototype.hasOwnProperty.call(data.top_queries, domain)) { // Sanitize domain - if (escapeHtml(domain) !== domain) { + if (utils.escapeHtml(domain) !== domain) { // Make a copy with the escaped index if necessary - data.top_queries[escapeHtml(domain)] = data.top_queries[domain]; + data.top_queries[utils.escapeHtml(domain)] = data.top_queries[domain]; } - domain = escapeHtml(domain); + domain = utils.escapeHtml(domain); urlText = domain === "" ? "." : domain; url = '' + urlText + ""; percentage = (data.top_queries[domain] / data.dns_queries_today) * 100; @@ -707,12 +693,12 @@ function updateTopLists() { for (domain in data.top_ads) { if (Object.prototype.hasOwnProperty.call(data.top_ads, domain)) { // Sanitize domain - if (escapeHtml(domain) !== domain) { + if (utils.escapeHtml(domain) !== domain) { // Make a copy with the escaped index if necessary - data.top_ads[escapeHtml(domain)] = data.top_ads[domain]; + data.top_ads[utils.escapeHtml(domain)] = data.top_ads[domain]; } - domain = escapeHtml(domain); + domain = utils.escapeHtml(domain); urlText = domain === "" ? "." : domain; url = '' + urlText + ""; percentage = (data.top_ads[domain] / data.ads_blocked_today) * 100; diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js index 5d09cee5..810ab5df 100644 --- a/scripts/pi-hole/js/utils.js +++ b/scripts/pi-hole/js/utils.js @@ -7,6 +7,21 @@ /* global moment:false */ +// Credit: https://stackoverflow.com/questions/1787322/htmlspecialchars-equivalent-in-javascript/4835406#4835406 +function escapeHtml(text) { + var map = { + "&": "&", + "<": "<", + ">": ">", + '"': """, + "'": "'" + }; + + return text.replace(/[&<>"']/g, function (m) { + return map[m]; + }); +} + var info = null; function showAlert(type, icon, title, message) { var opts = {}; @@ -172,6 +187,7 @@ function stateLoadCallback(itemName) { window.utils = (function () { return { + escapeHtml: escapeHtml, showAlert: showAlert, datetime: datetime, disableAll: disableAll, From 7f71f1d5fe33ae232a51ab2b1a810eaf97b1aac8 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 25 May 2020 12:36:55 +0300 Subject: [PATCH 2/4] Move `objectToArray()` to utils. Signed-off-by: XhmikosR --- db_graph.php | 1 + scripts/pi-hole/js/db_graph.js | 24 +++--------------------- scripts/pi-hole/js/index.js | 24 +++--------------------- scripts/pi-hole/js/utils.js | 23 +++++++++++++++++++++-- 4 files changed, 28 insertions(+), 44 deletions(-) diff --git a/db_graph.php b/db_graph.php index fba0909b..98b66cb3 100644 --- a/db_graph.php +++ b/db_graph.php @@ -77,6 +77,7 @@ $token = $_SESSION['token']; + " + title + "
"; @@ -188,6 +206,7 @@ function stateLoadCallback(itemName) { window.utils = (function () { return { escapeHtml: escapeHtml, + objectToArray: objectToArray, showAlert: showAlert, datetime: datetime, disableAll: disableAll, From 61c29cafc495989632961ec8badf5dc72701e627 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 25 May 2020 12:38:36 +0300 Subject: [PATCH 3/4] Move `padNumber()` to utils. Signed-off-by: XhmikosR --- scripts/pi-hole/js/db_graph.js | 24 ++++++++++-------------- scripts/pi-hole/js/index.js | 12 ++++-------- scripts/pi-hole/js/utils.js | 5 +++++ 3 files changed, 19 insertions(+), 22 deletions(-) diff --git a/scripts/pi-hole/js/db_graph.js b/scripts/pi-hole/js/db_graph.js index 924ad745..124fc6f7 100644 --- a/scripts/pi-hole/js/db_graph.js +++ b/scripts/pi-hole/js/db_graph.js @@ -50,10 +50,6 @@ $(function () { ); }); -function padNumber(num) { - return ("00" + num).substr(-2, 2); -} - var timeLineChart; function compareNumbers(a, b) { @@ -197,28 +193,28 @@ $(document).ready(function () { var fromDate = time.getFullYear() + "-" + - padNumber(time.getMonth() + 1) + + utils.padNumber(time.getMonth() + 1) + "-" + - padNumber(time.getDate()); + utils.padNumber(time.getDate()); var fromTime = - padNumber(time.getHours()) + + utils.padNumber(time.getHours()) + ":" + - padNumber(time.getMinutes()) + + utils.padNumber(time.getMinutes()) + ":" + - padNumber(time.getSeconds()); + utils.padNumber(time.getSeconds()); time = new Date(time.valueOf() + 1000 * interval); var untilDate = time.getFullYear() + "-" + - padNumber(time.getMonth() + 1) + + utils.padNumber(time.getMonth() + 1) + "-" + - padNumber(time.getDate()); + utils.padNumber(time.getDate()); var untilTime = - padNumber(time.getHours()) + + utils.padNumber(time.getHours()) + ":" + - padNumber(time.getMinutes()) + + utils.padNumber(time.getMinutes()) + ":" + - padNumber(time.getSeconds()); + utils.padNumber(time.getSeconds()); if (fromDate === untilDate) { // Abbreviated form for intervals on the same day diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 718e038c..607e9679 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -30,10 +30,6 @@ var colors = [ "#d2d6de" ]; -function padNumber(num) { - return ("00" + num).substr(-2, 2); -} - var customTooltips = function (tooltip) { var tooltipEl = document.getElementById(this._chart.canvas.id + "-customTooltip"); if (!tooltipEl) { @@ -844,8 +840,8 @@ $(document).ready(function () { var time = label.match(/(\d?\d):?(\d?\d?)/); var h = parseInt(time[1], 10); var m = parseInt(time[2], 10) || 0; - var from = padNumber(h) + ":" + padNumber(m - 5) + ":00"; - var to = padNumber(h) + ":" + padNumber(m + 4) + ":59"; + var from = utils.padNumber(h) + ":" + utils.padNumber(m - 5) + ":00"; + var to = utils.padNumber(h) + ":" + utils.padNumber(m + 4) + ":59"; return "Queries from " + from + " to " + to; }, label: function (tooltipItems, data) { @@ -941,8 +937,8 @@ $(document).ready(function () { var time = label.match(/(\d?\d):?(\d?\d?)/); var h = parseInt(time[1], 10); var m = parseInt(time[2], 10) || 0; - var from = padNumber(h) + ":" + padNumber(m - 5) + ":00"; - var to = padNumber(h) + ":" + padNumber(m + 4) + ":59"; + var from = utils.padNumber(h) + ":" + utils.padNumber(m - 5) + ":00"; + var to = utils.padNumber(h) + ":" + utils.padNumber(m + 4) + ":59"; return "Client activity from " + from + " to " + to; }, label: function (tooltipItems, data) { diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js index 3870e616..fd03d70c 100644 --- a/scripts/pi-hole/js/utils.js +++ b/scripts/pi-hole/js/utils.js @@ -40,6 +40,10 @@ function objectToArray(obj) { return [idx, arr]; } +function padNumber(num) { + return ("00" + num).substr(-2, 2); +} + var info = null; // TODO clear this up; there shouldn't be a global var here function showAlert(type, icon, title, message) { var opts = {}; @@ -207,6 +211,7 @@ window.utils = (function () { return { escapeHtml: escapeHtml, objectToArray: objectToArray, + padNumber: padNumber, showAlert: showAlert, datetime: datetime, disableAll: disableAll, From 7caabf7d2ade5d63476488e1e3f4764c0b3f0077 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 29 May 2020 11:01:16 +0300 Subject: [PATCH 4/4] index.js: assorted simplifications Signed-off-by: XhmikosR * rename `colors` variable to avoid shadowing and be more clear * remove function used only once * simplify a couple of for loops --- scripts/pi-hole/js/index.js | 49 ++++++++++++++----------------------- 1 file changed, 19 insertions(+), 30 deletions(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 607e9679..e778c338 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -11,7 +11,7 @@ var timeLineChart, clientsChart; var queryTypePieChart, forwardDestinationPieChart; -var colors = [ +var THEME_COLORS = [ "#3c8dbc", "#f56954", "#00a65a", @@ -62,14 +62,12 @@ var customTooltips = function (tooltip) { tooltipEl.classList.remove("left", "right", "center", "top", "bottom"); tooltipEl.classList.add(tooltip.xAlign, tooltip.yAlign); - function getBody(bodyItem) { - return bodyItem.lines; - } - // Set Text if (tooltip.body) { var titleLines = tooltip.title || []; - var bodyLines = tooltip.body.map(getBody); + var bodyLines = tooltip.body.map(function (bodyItem) { + return bodyItem.lines; + }); var innerHtml = ""; titleLines.forEach(function (title) { @@ -80,9 +78,9 @@ var customTooltips = function (tooltip) { var devicePixel = (1 / window.devicePixelRatio).toFixed(1); bodyLines.forEach(function (body, i) { - var colors = tooltip.labelColors[i]; - var style = "background: " + colors.backgroundColor; - style += "; outline: 1px solid " + colors.backgroundColor; + var labelColors = tooltip.labelColors[i]; + var style = "background-color: " + labelColors.backgroundColor; + style += "; outline: 1px solid " + labelColors.backgroundColor; style += "; border: " + devicePixel + "px solid #fff"; var span = ""; @@ -291,7 +289,7 @@ function updateQueryTypesPie() { Object.keys(iter).forEach(function (key) { v.push(iter[key]); - c.push(colors[i++ % colors.length]); + c.push(THEME_COLORS[i++ % THEME_COLORS.length]); k.push(key); }); @@ -355,19 +353,12 @@ function updateClientsOverTime() { var plotdata = data.over_time[1]; var labels = []; var key, i, j; + for (key in data.clients) { - if (!Object.prototype.hasOwnProperty.call(data.clients, key)) { - continue; + if (Object.prototype.hasOwnProperty.call(data.clients, key)) { + var client = data.clients[key]; + labels.push(client.name.length > 0 ? client.name : client.ip); } - - var clientname; - if (data.clients[key].name.length > 0) { - clientname = data.clients[key].name; - } else { - clientname = data.clients[key].ip; - } - - labels.push(clientname); } // Remove possibly already existing data @@ -378,7 +369,7 @@ function updateClientsOverTime() { } // Collect values and colors, and labels - clientsChart.data.datasets[0].backgroundColor = colors[0]; + clientsChart.data.datasets[0].backgroundColor = THEME_COLORS[0]; clientsChart.data.datasets[0].pointRadius = 0; clientsChart.data.datasets[0].pointHitRadius = 5; clientsChart.data.datasets[0].pointHoverRadius = 5; @@ -389,8 +380,8 @@ function updateClientsOverTime() { data: [], // If we ran out of colors, make a random one backgroundColor: - i < colors.length - ? colors[i] + i < THEME_COLORS.length + ? THEME_COLORS[i] : "#" + (0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6), pointRadius: 0, pointHitRadius: 5, @@ -407,11 +398,9 @@ function updateClientsOverTime() { } for (key in plotdata[j]) { - if (!Object.prototype.hasOwnProperty.call(plotdata[j], key)) { - continue; + if (Object.prototype.hasOwnProperty.call(plotdata[j], key)) { + clientsChart.data.datasets[key].data.push(plotdata[j][key]); } - - clientsChart.data.datasets[key].data.push(plotdata[j][key]); } var d = new Date(1000 * parseInt(timestamps[j])); @@ -456,7 +445,7 @@ function updateForwardDestinationsPie() { key = key.substr(0, key.indexOf("|")); } - values.push([key, value, colors[i++ % colors.length]]); + values.push([key, value, THEME_COLORS[i++ % THEME_COLORS.length]]); }); // Split data into individual arrays for the graphs @@ -770,7 +759,7 @@ function updateSummaryData(runOnce) { ); } - window.setTimeout(function () { + setTimeout(function () { $("span.glow").removeClass("glow"); }, 500); })