update configuration section and add secrets

.vitepress/config.mts

@@ -72,6 +72,7 @@ export default defineConfig({
         collapsed: true,
         items: [
           { text: "Introduction", link: "/configuration/introduction" },
+          { text: "Secrets", link: "/configuration/secrets" },
           {
             text: "Autostart your MagicMirror²",
             link: "/configuration/autostart",

configuration/introduction.md

@@ -71,11 +71,11 @@ After the above options, you will then add modules. See
 There are two environment variables that override part or all of config.js. They
 are:
 
-| Environment Variable Name | Use                                                                                                                                                                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| MM_CONFIG_FILE            | This specifies an alternate configuration file for the system. This is useful when running multiple mirrors on the same device. This does not work with the template option below. NOTE: this file **_MUST_** be located in a directory within the MagicMirror directory. Ideally, place any config file in the config subdirectory. |
-| MM_PORT                   | This specifies an alternate TCP/IP port, overriding "port" item within the config file. This is useful for testing to see if the product will run using another port.                                                                                                                                                                |
-| mmFetchTimeout            | time in milliseconds for fetch timeout. default (30000) <br><br>this value can be used to adjust the nodejs fetch function timeout value for all node_helper modules that use fetch()                                                                                                                                                |
+| Environment Variable Name | Use                                                                                                                                                                                                                                                                               |
+| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| MM_CONFIG_FILE            | This specifies an alternate configuration file for the system. This is useful when running multiple mirrors on the same device. NOTE: this file **_MUST_** be located in a directory within the MagicMirror directory. Ideally, place any config file in the config subdirectory. |
+| MM_PORT                   | This specifies an alternate TCP/IP port, overriding "port" item within the config file. This is useful for testing to see if the product will run using another port.                                                                                                             |
+| mmFetchTimeout            | time in milliseconds for fetch timeout. default (30000) <br><br>this value can be used to adjust the nodejs fetch function timeout value for all node_helper modules that use fetch()                                                                                             |
 
 #### Examples of use
 
@@ -117,18 +117,17 @@ node --run config:check
 [26.12.2023 18:13.13.062] [INFO]  Your configuration file doesn't contain syntax errors :)
 ```
 
-### Configuration Template system
+### Environment variables inside the configuration file
 
-`config.js.template` can be used instead of `config.js`. This allows you to use
-variables to replace hardcoded options. When starting MagicMirror² a `config.js`
-is created from `config.js.template` and the variables are resolved. This is
-most useful for tech support provided on the
+Since MagicMirror² version `v2.35.0` curly braced bash environment variable are
+allowed inside the `config.js` file. This allows you to use variables to replace
+hardcoded options. When starting MagicMirror² the variables are resolved. This
+is most useful for tech support provided on the
 [forums](http://forum.magicmirror.builders) and sharing your configuration.
-Note: You cannot use this with MM_CONFIG_FILE above at this time.
 
 Variables must be inserted as `${MY_VARIABLE}`, examples:
 
-`config.js.template`:
+`config.js`:
 
 ```js
 let config = {
@@ -140,9 +139,7 @@ let config = {
 if (typeof module !== "undefined") {module.exports = config;}
 ```
 
-would become
-
-`config.js`:
+would be translated to
 
 ```js
 let config = {
@@ -163,8 +160,8 @@ variable is defined in both ways the linux environment variable is used.
 
 #### Using a `config.env` file
 
-This file must be in the same folder as the `config.js.template` and contains
-the variables, using the example from above:
+This file must be in the same folder as the `config.js` and contains the
+variables, using the example from above:
 
 File content of `config.env`:
 
@@ -176,7 +173,7 @@ MY_HTTPS=false
 
 #### Using linux environment variables
 
-define them before you start MagicMirror², in a bash script, for example:
+Define them before you start MagicMirror², in a bash script, for example:
 
 ```bash
 cd ~/MagicMirror
@@ -272,14 +269,14 @@ if (typeof module !== "undefined") {
 }
 ```
 
-#### config.js.template example
+#### config.js with variables
 
 User likes to help German language users in the forums. As such, he wants to be
 able to paste bits of his config.js into the forums to show as an example, but
 don't want to share his private data, and has a hard time remembering to remove
 them from the config.js file.
 
-`config.js.template`:
+`config.js`:
 
 ```js
 let config = {

configuration/secrets.md

@@ -0,0 +1,154 @@
+# Secrets
+
+When MagicMirror² was designed, no one thought about secrets.
+
+However, there are plenty of parameters worth protecting, such as:
+
+- API keys (e.g. weather)
+- Tokens in URLs
+- Private calendar URLs
+- Position information (latitude and longitude)
+- ...
+
+::: warning NOTE
+
+Due to its design, this data is also displayed in the web browser, for example,
+in the `/config` subpath.
+
+Therefore, be careful when sharing your MagicMirror² website with others. Anyone
+with access to the site can also access the secrets.
+
+:::
+
+Beginning with MagicMirror² `v2.35.0` we offer beta support for secrets.
+
+This is based on
+[environment variables inside the configuration file](/configuration/introduction.html#environment-variables-inside-the-configuration-file).
+
+::: warning NOTE
+
+"Beta" means we offer no guarantee that the methods described below for
+protecting sensitive information will actually work. Use at your own risk.
+
+:::
+
+## Different module types
+
+There are two types of modules in MagicMirror²:
+
+- browser-only
+- server-side and browser-side
+
+Why is this mentioned? Because secrets can only be protected server-side.
+
+::: warning NOTE
+
+In any case, you should carefully examine the modules you are using.
+Theoretically, a malicious module could intercept the entire configuration,
+including all secrets, and send it somewhere else.
+
+:::
+
+## Using secrets in server-side modules
+
+You have to add a new parameter in `config.js`:
+
+```js
+let config = {
+  ...
+  hideConfigSecrets: true,
+  ...
+};
+```
+
+After a restart MagicMirror² will not send environment variables beginning with
+`SECRET_` to the clients (browsers).
+
+### Example
+
+The MMM-Strava module displays activities and needs 2 parameters `client_id` and
+`client_secret` to get the data.
+
+In this example the 2 parameters are set with 2 normal environment variables
+`STRAVA_CLIENT_ID` and `STRAVA_API_KEY`:
+
+```js
+let config = {
+  ...
+  hideConfigSecrets: true,
+  ...
+  modules: [
+    {
+      module: "MMM-Strava",
+      header: "Strava",
+      position: "bottom_left",
+      config: {
+        client_id: "${STRAVA_CLIENT_ID}",
+        client_secret: "${STRAVA_API_KEY}",
+        activities: ["ride"],
+        period: "recent",
+        stats: ["count", "distance", "elevation", "achievements"],
+        auto_rotate: true,
+        updateInterval: 20000,
+        reloadInterval: 3600000,
+        showPrivateStats: true,
+        limitPrivateStats: 1200,
+        digits: 0
+      }
+    },
+  ...
+  ]
+};
+```
+
+This setup is unsafe, you can see the contents of the 2 environment variables in
+the browser.
+
+To be safe, you have to use environment variables called
+`SECRET_STRAVA_CLIENT_ID` and `SECRET_STRAVA_API_KEY`. The browser has no access
+to the content of variables prefixed with `SECRET_`, the content of e.g.
+`SECRET_STRAVA_CLIENT_ID` is displayed as `**SECRET_STRAVA_CLIENT_ID**`.
+
+## Using secrets on the browser-side
+
+Yes, we wrote above that this isn't possible. However, for some applications it
+might work with a workaround.
+
+There are modules that use a map (e.g. MMM-RAIN-MAP, MMM-Flights) and the data
+required for this map is of course retrieved in the browser.
+
+Some map services, such as MapBox, offer free maps, but often require an access
+token in the URL.
+
+Example:
+
+```js
+let config = {
+  ...
+  hideConfigSecrets: true,
+  ...
+  modules: [
+    {
+      module: "MMM-Flights",
+      position: "top_left",
+      config: {
+        mapUrl: "https://api.mapbox.com/styles/v1/username/mapId/tiles/{z}/{x}/{y}?access_token=abc"
+      },
+    },
+  ...
+  ]
+};
+```
+
+To protect sensitive information in the above url you can change it to
+
+`mapUrl: "https://api.mapbox.com/styles/v1/${SECRET_MAPBOX_ID}/tiles/{z}/{x}/{y}?access_token=${SECRET_MAPBOX_TOKEN}"`
+
+This will protect the secrets but the modules won't work. The workaround is to
+use the internal cors proxy. This means that the traffic does not go directly
+from the browser to the outside, but first to the MagicMirror² server, which
+acts as a proxy here:
+
+`mapUrl: "/cors?url=https://api.mapbox.com/styles/v1/${SECRET_MAPBOX_ID}/tiles/{z}/{x}/{y}?access_token=${SECRET_MAPBOX_TOKEN}"`
+
+Behind the scenes the server substitutes the variables before fetching the data.

cspell.config.json

@@ -4,6 +4,7 @@
   "words": [
     "anyfileorfolder",
     "apikey",
+    "Autologin",
     "Autorestart",
     "bouncyflip",
     "clientonly",
@@ -12,6 +13,7 @@
     "dateheaders",
     "datetype",
     "Deepwiki",
+    "defaultmodules",
     "endfor",
     "envcanada",
     "exploader",
@@ -22,13 +24,14 @@
     "inclusivity",
     "infobars",
     "intpx",
+    "journalctl",
     "LXDE",
     "lxpanel",
     "lxsession",
     "magicmirror",
     "MAPBOX",
-    "miletorix",
     "meteo",
+    "miletorix",
     "modulename",
     "myclass",
     "mycroft",
@@ -50,6 +53,7 @@
     "pmedian",
     "pmin",
     "prio",
+    "raspi",
     "RGBA",
     "sdetweil",
     "serveronly",
@@ -74,6 +78,7 @@
     "weathergov",
     "weatherutils",
     "windspeed",
+    "XAUTHORITY",
     "xlarge",
     "xscreensaver",
     "xsmall",