Show X-Forwarded-For information also in the top menu

Signed-off-by: DL6ER <dl6er@dl6er.de>

scripts/pi-hole/js/footer.js

@@ -714,6 +714,7 @@ function addAdvancedInfo() {
   const advancedInfoTarget = $("#advanced-info");
   const isTLS = advancedInfoSource.data("tls");
   const clientIP = advancedInfoSource.data("client-ip");
+  const XForwardedFor = atob(advancedInfoSource.data("xff"));
   const starttime = parseFloat(advancedInfoSource.data("starttime"));
   const endtime = parseFloat(advancedInfoSource.data("endtime"));
   const totaltime = 1e3 * (endtime - starttime);
@@ -727,11 +728,18 @@ function addAdvancedInfo() {
       (isTLS ? "" : "-open") +
       '" title="Your connection is ' +
       (isTLS ? "" : "NOT ") +
-      'end-to-end encrypted (TLS/SSL)"></i>&nbsp;' +
-      clientIP +
-      "<br>"
+      'end-to-end encrypted (TLS/SSL)"></i>&nbsp;<span id="client-id"></span><br>'
   );
 
+  // Add client IP info
+  $("#client-id").text(XForwardedFor ? XForwardedFor : clientIP);
+  if (XForwardedFor) {
+    // If X-Forwarded-For is set, show the X-Forwarded-For in italics and add
+    // the real client IP as tooltip
+    $("#client-id").css("font-style", "italic");
+    $("#client-id").prop("title", "Original remote address: " + clientIP);
+  }
+
   // Add render time info
   advancedInfoTarget.append(
     "Render time: " + (totaltime > 0.5 ? totaltime.toFixed(1) : totaltime.toFixed(3)) + " ms"

scripts/pi-hole/lua/footer.lp

@@ -6,6 +6,16 @@
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license.
 * ]]--
+
+-- Iterate over the array mg.request_info.http_headers and check if there is an 'X-Forwarded-For' header
+x_forwarded_for = ""
+local headers = mg.request_info.http_headers
+for k,v in pairs(headers) do
+    if k:lower() == "x-forwarded-for" then
+        x_forwarded_for = v
+        break
+    end
+end
 ?>
 
         </section>
@@ -59,6 +69,6 @@
 <!-- ./wrapper -->
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/footer.js')?>"></script>
 
-<div id="advanced-info-data" style="display: none;" data-starttime="<?=starttime?>" data-endtime="<?=mg.time(true)?>" data-client-ip="<?=mg.request_info.remote_addr?>" data-tls="<?=tostring(is_secure)?>"></div>
+<div id="advanced-info-data" style="display: none;" data-starttime="<?=starttime?>" data-endtime="<?=mg.time(true)?>" data-client-ip="<?=mg.request_info.remote_addr?>" data-tls="<?=tostring(is_secure)?>" data-xff="<?=mg.base64_encode(x_forwarded_for)?>"></div>
 </body>
 </html>