From 19da2ec82937b754f3863d957553cd001c38892a Mon Sep 17 00:00:00 2001
From: zigotica <zigotica@gmail.com>
Date: Mon, 15 Jan 2024 18:45:40 +0100
Subject: [PATCH] :sparkles: Add env vars parser to avoid leaking secrets

---
 .env                                   | 84 ++++++++++++++------------
 docs/widgets.md                        | 13 ++++
 src/components/Widgets/PiHoleStats.vue |  7 ++-
 src/mixins/WidgetMixin.js              |  5 ++
 4 files changed, 66 insertions(+), 43 deletions(-)

diff --git a/.env b/.env
index c7953212..6f0b5fd3 100644
--- a/.env
+++ b/.env
@@ -1,40 +1,44 @@
-# Store environmental variables here. All variables are optional.
-# Lines beginning in '#' are ignored.
-
-# Can be either development, production or test
-# NODE_ENV=production
-
-# The port to expose the running application on
-# PORT=4000
-
-# If you've proved SSL certs, then can set HTTPS port
-# SSL_PORT=4001
-
-# The host that Dashy is running on, domain or IP
-# HOST=localhost
-
-# The default base path for serving up static assets
-# BASE_URL=./
-
-# Optionally, specify the path of SSL private + public keys
-# SSL_PRIV_KEY_PATH=/etc/ssl/certs/dashy-priv.key
-# SSL_PUB_KEY_PATH=/etc/ssl/certs/dashy-pub.pem
-
-# If SSL enabled, choose whether or not to redirect http to https
-# Defaults to true
-# REDIRECT_HTTPS=true
-
-# Usually the same as BASE_URL, but accessible in frontend
-# VUE_APP_DOMAIN=https://dashy.to
-
-# Should enable SRI for build script and link resources
-# INTEGRITY=true
-
-# Computed automatically on build. Indicates if running in container
-# IS_DOCKER=true
-
-# Again, set automatically using package.json during build time
-# VUE_APP_VERSION=2.0.0
-
-# Directory for conf.yml backups
-# BACKUP_DIR=./public/
\ No newline at end of file
+# Store environmental variables here. All variables are optional.
+# Lines beginning in '#' are ignored.
+
+# Can be either development, production or test
+# NODE_ENV=production
+
+# The port to expose the running application on
+# PORT=4000
+
+# If you've proved SSL certs, then can set HTTPS port
+# SSL_PORT=4001
+
+# The host that Dashy is running on, domain or IP
+# HOST=localhost
+
+# The default base path for serving up static assets
+# BASE_URL=./
+
+# Optionally, specify the path of SSL private + public keys
+# SSL_PRIV_KEY_PATH=/etc/ssl/certs/dashy-priv.key
+# SSL_PUB_KEY_PATH=/etc/ssl/certs/dashy-pub.pem
+
+# If SSL enabled, choose whether or not to redirect http to https
+# Defaults to true
+# REDIRECT_HTTPS=true
+
+# Usually the same as BASE_URL, but accessible in frontend
+# VUE_APP_DOMAIN=https://dashy.to
+
+# Should enable SRI for build script and link resources
+# INTEGRITY=true
+
+# Computed automatically on build. Indicates if running in container
+# IS_DOCKER=true
+
+# Again, set automatically using package.json during build time
+# VUE_APP_VERSION=2.0.0
+
+# Directory for conf.yml backups
+# BACKUP_DIR=./public/
+
+# Setup any other user defined vars by prepending VUE_APP_ to the var name
+# VUE_APP_pihole_ip=http://your.pihole.ip
+# VUE_APP_pihole_key=your_pihole_secret_key
diff --git a/docs/widgets.md b/docs/widgets.md
index eed33307..0474a441 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -1551,6 +1551,19 @@ Displays the number of queries blocked by [Pi-Hole](https://pi-hole.net/).
     apiKey: xxxxxxxxxxxxxxxxxxxxxxx
 ```
 
+> [!TIP]
+> In order to avoid leaking secret data, both `hostname` and `apiKey` can leverage environment variables. Simply pass the name of the variable, which MUST start with `VUE_APP_`.
+
+```yaml
+- type: pi-hole-stats
+  options:
+    hostname: VUE_APP_pihole_ip
+    apiKey: VUE_APP_pihole_key
+```
+
+> [!IMPORTANT]
+> You will need to restart the server (or the docker image) if adding/editing an env var for this to be refreshed.
+
 #### Info
 
 - **CORS**: 🟢 Enabled
diff --git a/src/components/Widgets/PiHoleStats.vue b/src/components/Widgets/PiHoleStats.vue
index ff909b7d..fb5aa56d 100644
--- a/src/components/Widgets/PiHoleStats.vue
+++ b/src/components/Widgets/PiHoleStats.vue
@@ -36,13 +36,14 @@ export default {
   computed: {
     /* Let user select which comic to display: random, latest or a specific number */
     hostname() {
-      const usersChoice = this.options.hostname;
+      const usersChoice = this.parseAsEnvVar(this.options.hostname);
       if (!usersChoice) this.error('You must specify the hostname for your Pi-Hole server');
       return usersChoice || 'http://pi.hole';
     },
     apiKey() {
-      if (!this.options.apiKey) this.error('API Key is required, please see the docs');
-      return this.options.apiKey;
+      const usersChoice = this.parseAsEnvVar(this.options.apiKey);
+      if (!usersChoice) this.error('API Key is required, please see the docs');
+      return usersChoice;
     },
     endpoint() {
       return `${this.hostname}/admin/api.php?summary&auth=${this.apiKey}`;
diff --git a/src/mixins/WidgetMixin.js b/src/mixins/WidgetMixin.js
index 2d3a1e87..cf85300f 100644
--- a/src/mixins/WidgetMixin.js
+++ b/src/mixins/WidgetMixin.js
@@ -131,6 +131,11 @@ const WidgetMixin = {
           });
       });
     },
+    /* Check if a value is an environment variable, return its value if so. */
+    parseAsEnvVar(str) {
+      if (str.includes('VUE_APP_')) return process.env[str];
+      return str;
+    },
   },
 };