From c7d1c0e18f290749f5a080d309d4c97f27f59df6 Mon Sep 17 00:00:00 2001
From: TheDevRyan <175502913+The-Dev-Ryan@users.noreply.github.com>
Date: Fri, 24 Oct 2025 11:53:37 +0100
Subject: [PATCH] Add advanced custom CSS/JS file support per template (#7361)

Introduces a new 'customFiles' array in the config schema for granular domain-level CSS and JavaScript customization. Updates webserver logic to inject custom CSS/JS tags based on template scope, replacing static custom.css/custom.js references in all Handlebars views. Also updates meshctrl.js to support the new config property.
---
 meshcentral-config-schema.json   | 35 ++++++++++++
 meshctrl.js                      |  4 +-
 views/agentinvite.handlebars     |  4 +-
 views/default-mobile.handlebars  |  2 +
 views/default.handlebars         |  4 +-
 views/default3.handlebars        |  4 +-
 views/download.handlebars        |  2 +
 views/download2.handlebars       |  2 +
 views/error404-mobile.handlebars |  2 +
 views/error404.handlebars        |  2 +
 views/error4042.handlebars       |  2 +
 views/invite.handlebars          |  4 +-
 views/login-mobile.handlebars    |  2 +
 views/login.handlebars           |  2 +
 views/login2.handlebars          |  4 +-
 views/message.handlebars         |  2 +
 views/message2.handlebars        |  4 +-
 views/messenger.handlebars       |  4 +-
 views/mstsc.handlebars           |  2 +
 views/player.handlebars          |  4 +-
 views/sharing-mobile.handlebars  |  2 +
 views/sharing.handlebars         |  4 +-
 views/ssh.handlebars             |  2 +
 views/terms-mobile.handlebars    |  2 +
 views/terms.handlebars           |  2 +
 views/xterm.handlebars           |  2 +
 webserver.js                     | 92 +++++++++++++++++++++++++++++++-
 27 files changed, 176 insertions(+), 21 deletions(-)

diff --git a/meshcentral-config-schema.json b/meshcentral-config-schema.json
index 9d71e2f0..77504a7e 100644
--- a/meshcentral-config-schema.json
+++ b/meshcentral-config-schema.json
@@ -1987,6 +1987,41 @@
           "customUI": {
             "type": "object"
           },
+          "customFiles": {
+            "type": "array",
+            "description": "Advanced customization system allowing multiple CSS and JavaScript file configurations per domain. Each configuration can target specific templates using the 'scope' property, enabling granular control over where custom files are loaded. All custom files are loaded after the default custom.css and custom.js files.",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "description": "Unique name for this custom files configuration. Used for identification and debugging purposes."
+                },
+                "css": {
+                  "type": "array",
+                  "items": {
+                    "type": "string"
+                  },
+                  "description": "Ordered list of custom CSS files to load. Files are loaded in the specified order after the default custom.css. Place files in the meshcentral-data/public/styles/ directory. Example: [\"theme.css\", \"overrides.css\", \"mobile.css\"]"
+                },
+                "js": {
+                  "type": "array",
+                  "items": {
+                    "type": "string"
+                  },
+                  "description": "Ordered list of custom JavaScript files to load. Files are loaded in the specified order after the default custom.js. Place files in the meshcentral-data/public/scripts/ directory. Example: [\"analytics.js\", \"custom-functions.js\", \"ui-enhancements.js\"]"
+                },
+                "scope": {
+                  "type": "array",
+                  "items": {
+                    "type": "string"
+                  },
+                  "description": "List of template names where these custom files should be loaded. If not specified or empty, files will NOT be loaded anywhere. Use 'all' to load on all templates. Available template names: all, default, default3, default-mobile, login, login2, login-mobile, messenger, message, message2, invite, agentinvite, player, xterm, mstsc, ssh, sharing, sharing-mobile, download, download2, terms, terms-mobile, error404, error4042, error404-mobile. Example: [\"default3\", \"login2\", \"player\"] or [\"all\"]"
+                }
+              },
+              "required": ["name"]
+            }
+          },
           "consentMessages": {
             "type": "object",
             "description": "This section is used to customize user consent prompts, these show up when asking if a remote session is allowed or not.",
diff --git a/meshctrl.js b/meshctrl.js
index 8a747db8..023fd10e 100644
--- a/meshctrl.js
+++ b/meshctrl.js
@@ -1195,8 +1195,8 @@ function displayConfigHelp() {
 }
 
 function performConfigOperations(args) {
-    var domainValues = ['title', 'title2', 'titlepicture', 'trustedcert', 'welcomepicture', 'welcometext', 'userquota', 'meshquota', 'newaccounts', 'usernameisemail', 'newaccountemaildomains', 'newaccountspass', 'newaccountsrights', 'geolocation', 'lockagentdownload', 'userconsentflags', 'Usersessionidletimeout', 'auth', 'ldapoptions', 'ldapusername', 'ldapuserbinarykey', 'ldapuseremail', 'footer', 'certurl', 'loginKey', 'userallowedip', 'agentallowedip', 'agentnoproxy', 'agentconfig', 'orphanagentuser', 'httpheaders', 'yubikey', 'passwordrequirements', 'limits', 'amtacmactivation', 'redirects', 'sessionrecording', 'hide'];
-    var domainObjectValues = ['ldapoptions', 'httpheaders', 'yubikey', 'passwordrequirements', 'limits', 'amtacmactivation', 'redirects', 'sessionrecording'];
+    var domainValues = ['title', 'title2', 'titlepicture', 'trustedcert', 'welcomepicture', 'welcometext', 'userquota', 'meshquota', 'newaccounts', 'usernameisemail', 'newaccountemaildomains', 'newaccountspass', 'newaccountsrights', 'geolocation', 'lockagentdownload', 'userconsentflags', 'Usersessionidletimeout', 'auth', 'ldapoptions', 'ldapusername', 'ldapuserbinarykey', 'ldapuseremail', 'footer', 'certurl', 'loginKey', 'userallowedip', 'agentallowedip', 'agentnoproxy', 'agentconfig', 'orphanagentuser', 'httpheaders', 'yubikey', 'passwordrequirements', 'limits', 'amtacmactivation', 'redirects', 'sessionrecording', 'hide', 'customFiles'];
+    var domainObjectValues = ['ldapoptions', 'httpheaders', 'yubikey', 'passwordrequirements', 'limits', 'amtacmactivation', 'redirects', 'sessionrecording', 'customFiles'];
     var domainArrayValues = ['newaccountemaildomains', 'newaccountsrights', 'loginkey', 'agentconfig'];
     var configChange = false;
     var fs = require('fs');
diff --git a/views/agentinvite.handlebars b/views/agentinvite.handlebars
index e6d29910..eb81dfaf 100644
--- a/views/agentinvite.handlebars
+++ b/views/agentinvite.handlebars
@@ -8,11 +8,11 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="robots" content="noindex,nofollow" />
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
-    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <script type="text/javascript" src="scripts/qrcode.min.js"></script>
-    <script type="text/javascript" src="scripts/custom.js"></script>
+    {{{customJSTags}}}
     <title>Agent Installation</title>
     <style>
         .tab {
diff --git a/views/default-mobile.handlebars b/views/default-mobile.handlebars
index 6a3612ee..4f19977f 100644
--- a/views/default-mobile.handlebars
+++ b/views/default-mobile.handlebars
@@ -13,6 +13,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="{{{domainurl}}}favicon-32x32.png">
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <link type="text/css" href="styles/xterm.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">
     <meta name="apple-mobile-web-app-title" content="{{{title}}}">
@@ -30,6 +31,7 @@
     <script type="text/javascript" src="scripts/zlib-adler32{{{min}}}.js"></script>
     <script type="text/javascript" src="scripts/zlib-crc32{{{min}}}.js"></script>
     <script keeplink=1 type="text/javascript" src="scripts/filesaver.min.js"></script>
+    {{{customJSTags}}}
     <meta name="msapplication-TileColor" content="#00aba9">
     <meta name="theme-color" content="#ffffff">
     <title>{{{title}}}</title>
diff --git a/views/default.handlebars b/views/default.handlebars
index a5682ad2..e20836cc 100644
--- a/views/default.handlebars
+++ b/views/default.handlebars
@@ -14,7 +14,7 @@
     <link type="text/css" href="styles/ol3-contextmenu.min.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/xterm.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/flatpickr.min.css" media="screen" rel="stylesheet" title="CSS">
-    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{{min}}}.js"></script>
     <script type="text/javascript" src="scripts/meshcentral{{{min}}}.js"></script>
@@ -50,7 +50,7 @@
     <script keeplink=1 type="text/javascript" src="scripts/ol3-contextmenu{{{min}}}.js"></script>
     <script keeplink=1 type="text/javascript" src="scripts/purify{{{min}}}.js"></script>
     <script keeplink=1 type="text/javascript" src="scripts/marked{{{min}}}.js"></script>
-    <script type="text/javascript" src="scripts/custom.js"></script>
+    {{{customJSTags}}}
     <title>{{{title}}}</title>
 </head>
 <body id="body" oncontextmenu="handleContextMenu(event)" style="display:none;min-width:495px" onload="if (typeof(startup) !== 'undefined') startup();">
diff --git a/views/default3.handlebars b/views/default3.handlebars
index 04aa6ea9..266c9166 100644
--- a/views/default3.handlebars
+++ b/views/default3.handlebars
@@ -18,7 +18,7 @@
     <link id="theme-stylesheet" href="styles/bootstrap{{{min}}}.css" rel="stylesheet" title="CSS">
     <link href="styles/select2.min.css" rel="stylesheet" title="CSS">
     <link href="styles/select2-bootstrap-5-theme.min.css" rel="stylesheet" title="CSS">
-    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{{min}}}.js"></script>
     <script type="text/javascript" src="scripts/meshcentral{{{min}}}.js"></script>
@@ -59,7 +59,7 @@
     <script keeplink=1 type="text/javascript" src="scripts/ol3-contextmenu{{{min}}}.js"></script>
     <script keeplink=1 type="text/javascript" src="scripts/purify{{{min}}}.js"></script>
     <script keeplink=1 type="text/javascript" src="scripts/marked{{{min}}}.js"></script>
-    <script type="text/javascript" src="scripts/custom.js"></script>
+    {{{customJSTags}}}
     <title>{{{title}}}</title>
 </head>
 
diff --git a/views/download.handlebars b/views/download.handlebars
index db1ed07b..5ff96bdf 100644
--- a/views/download.handlebars
+++ b/views/download.handlebars
@@ -8,7 +8,9 @@
     <meta name=format-detection content="telephone=no" />
     <meta name="robots" content="noindex,nofollow">
     <link type=text/css href="/styles/style.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
+    {{{customJSTags}}}
     <title>{{{title1}}} - Download</title>
 </head>
 <body>
diff --git a/views/download2.handlebars b/views/download2.handlebars
index 6633f248..b36eb8e3 100644
--- a/views/download2.handlebars
+++ b/views/download2.handlebars
@@ -8,7 +8,9 @@
     <meta name=format-detection content="telephone=no" />
     <meta name="robots" content="noindex,nofollow">
     <link type=text/css href="/styles/style.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
+    {{{customJSTags}}}
     <title>{{{title1}}} - Download</title>
         <style>
         body {
diff --git a/views/error404-mobile.handlebars b/views/error404-mobile.handlebars
index 6745382f..9db0537f 100644
--- a/views/error404-mobile.handlebars
+++ b/views/error404-mobile.handlebars
@@ -7,7 +7,9 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="format-detection" content="telephone=no" />
     <meta name="robots" content="noindex,nofollow" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
+    {{{customJSTags}}}
     <title>{{{title}}}</title>
     <style nonce="{{{cspNonce}}}">
         body {
diff --git a/views/error404.handlebars b/views/error404.handlebars
index a44e724d..804a0ac7 100644
--- a/views/error404.handlebars
+++ b/views/error404.handlebars
@@ -8,7 +8,9 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="robots" content="noindex,nofollow" />
     <link type="text/css" href="/styles/style.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
+    {{{customJSTags}}}
     <title>{{{title}}}</title>
     <style nonce="{{{cspNonce}}}">
         #xbody {
diff --git a/views/error4042.handlebars b/views/error4042.handlebars
index ab9deb92..1baa15c0 100644
--- a/views/error4042.handlebars
+++ b/views/error4042.handlebars
@@ -8,7 +8,9 @@
     <meta name=format-detection content="telephone=no" />
     <meta name="robots" content="noindex,nofollow">
     <link type=text/css href="/styles/style.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
+    {{{customJSTags}}}
     <title>{{{title1}}} - Download</title>
     <style nonce="{{{cspNonce}}}">
         body {
diff --git a/views/invite.handlebars b/views/invite.handlebars
index fe4122b3..533fe679 100644
--- a/views/invite.handlebars
+++ b/views/invite.handlebars
@@ -8,10 +8,10 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="robots" content="noindex,nofollow" />
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
-    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
-    <script type="text/javascript" src="scripts/custom.js"></script>
+    {{{customJSTags}}}
     <title>Agent Installation</title>
     <style>
         .tab {
diff --git a/views/login-mobile.handlebars b/views/login-mobile.handlebars
index fc38a02e..9f29f09b 100644
--- a/views/login-mobile.handlebars
+++ b/views/login-mobile.handlebars
@@ -12,10 +12,12 @@
     <link rel="icon" type="image/png" sizes="16x16" href="{{{domainurl}}}favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="{{{domainurl}}}favicon-32x32.png">
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
+    {{{customCSSTags}}}
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">
     <meta name="apple-mobile-web-app-title" content="{{{title}}}">
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
+    {{{customJSTags}}}
     <script type="text/javascript" src="scripts/u2f-api{{min}}.js"></script>
     <meta name="msapplication-TileColor" content="#00aba9">
     <meta name="theme-color" content="#ffffff">
diff --git a/views/login.handlebars b/views/login.handlebars
index e0b1779b..cdff9909 100644
--- a/views/login.handlebars
+++ b/views/login.handlebars
@@ -10,8 +10,10 @@
     <link rel="manifest" href="{{{domainurl}}}manifest.json">
     <link rel="shortcut icon" type="image/x-icon" href="{{{domainurl}}}favicon.ico" />
     <link keeplink=1 type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
+    {{{customJSTags}}}
     <script keeplink=1 type="text/javascript" src="scripts/u2f-api{{min}}.js"></script>
     <title>{{{title}}} - Login</title>
 </head>
diff --git a/views/login2.handlebars b/views/login2.handlebars
index 785b795e..fab98118 100644
--- a/views/login2.handlebars
+++ b/views/login2.handlebars
@@ -10,11 +10,11 @@
     <link rel="manifest" href="{{{domainurl}}}manifest.json">
     <link rel="shortcut icon" type="image/x-icon" href="{{{domainurl}}}favicon.ico" />
     <link keeplink=1 type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
-    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <script keeplink=1 type="text/javascript" src="scripts/u2f-api{{min}}.js"></script>
-    <script type="text/javascript" src="scripts/custom.js"></script>
+    {{{customJSTags}}}
     <title>{{{title}}} - Login</title>
     <style>
         #body {
diff --git a/views/message.handlebars b/views/message.handlebars
index 82caf372..37995a4b 100644
--- a/views/message.handlebars
+++ b/views/message.handlebars
@@ -8,8 +8,10 @@
     <meta name=format-detection content="telephone=no" />
     <meta name="robots" content="noindex,nofollow">
     <link type=text/css href="/styles/style.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
+    {{{customJSTags}}}
     <title id="topTitle">{{{title}}}</title>
 </head>
 <body>
diff --git a/views/message2.handlebars b/views/message2.handlebars
index 2e7c5e1e..2b6b1f07 100644
--- a/views/message2.handlebars
+++ b/views/message2.handlebars
@@ -8,10 +8,10 @@
     <meta name=format-detection content="telephone=no" />
     <meta name="robots" content="noindex,nofollow">
     <link type=text/css href="/styles/style.css" media="screen" rel="stylesheet" title="CSS" />
-    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
-    <script type="text/javascript" src="scripts/custom.js"></script>
+    {{{customJSTags}}}
     <title id="topTitle">{{{title1}}}</title>
     <style>
         body {
diff --git a/views/messenger.handlebars b/views/messenger.handlebars
index 8d80cc30..50c19cbe 100644
--- a/views/messenger.handlebars
+++ b/views/messenger.handlebars
@@ -9,11 +9,11 @@
     <meta name="robots" content="noindex,nofollow">
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/messenger.css" media="screen" rel="stylesheet" title="CSS" />
-    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <script type="text/javascript" src="scripts/filesaver.min.js"></script>
-    <script type="text/javascript" src="scripts/custom.js"></script>
+    {{{customJSTags}}}
 </head>
 <body style="font-family:Arial,Helvetica,sans-serif">
     <div id="xtop" style="position:absolute;left:0;right:0;top:0;height:38px;background-color:#036;color:#EEE;box-shadow:3px 3px 10px gray">
diff --git a/views/mstsc.handlebars b/views/mstsc.handlebars
index 8c5ef9b5..113623ea 100644
--- a/views/mstsc.handlebars
+++ b/views/mstsc.handlebars
@@ -7,12 +7,14 @@
     <meta name="robots" content="noindex,nofollow">
     <link rel="icon" href="/favicon.ico">
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
+    {{{customCSSTags}}}
     <title>RDP</title>
     <script type="text/javascript" src="mstsc/mstsc.js"></script>
     <script type="text/javascript" src="mstsc/keyboard.js"></script>
     <script type="text/javascript" src="mstsc/rle.js"></script>
     <script type="text/javascript" src="mstsc/client.js"></script>
     <script type="text/javascript" src="mstsc/canvas.js"></script>
+    {{{customJSTags}}}
     <style>
         :focus {
             outline: 0;
diff --git a/views/player.handlebars b/views/player.handlebars
index 5bea1180..e9908373 100644
--- a/views/player.handlebars
+++ b/views/player.handlebars
@@ -9,7 +9,7 @@
     <meta name="robots" content="noindex,nofollow">
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/xterm.css" media="screen" rel="stylesheet" title="CSS" />
-    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <script type="text/javascript" src="scripts/agent-desktop-0.0.2{{min}}.js"></script>
@@ -23,7 +23,7 @@
     <script type="text/javascript" src="scripts/xterm-addon-fit-min.js"></script>
     <script keeplink=1 type="text/javascript" src="scripts/webm-writer.js"></script>
     <script keeplink=1 type="text/javascript" src="scripts/filesaver.min.js"></script>
-    <script type="text/javascript" src="scripts/custom.js"></script>
+    {{{customJSTags}}}
 </head>
 <body style="overflow:hidden;background-color:black">
     <div id=p11 class="noselect" style="overflow:hidden">
diff --git a/views/sharing-mobile.handlebars b/views/sharing-mobile.handlebars
index 36d98752..3698d4fc 100644
--- a/views/sharing-mobile.handlebars
+++ b/views/sharing-mobile.handlebars
@@ -13,6 +13,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="{{{domainurl}}}favicon-32x32.png">
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <link type="text/css" href="styles/xterm.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">
     <meta name="apple-mobile-web-app-title" content="{{{title}}}">
@@ -30,6 +31,7 @@
     <script type="text/javascript" src="scripts/zlib-adler32{{{min}}}.js"></script>
     <script type="text/javascript" src="scripts/zlib-crc32{{{min}}}.js"></script>
     <script keeplink=1 type="text/javascript" src="scripts/filesaver.min.js"></script>
+    {{{customJSTags}}}
     <meta name="msapplication-TileColor" content="#00aba9">
     <meta name="theme-color" content="#ffffff">
     <title>{{{title}}}</title>
diff --git a/views/sharing.handlebars b/views/sharing.handlebars
index 24d1773d..a00aca77 100644
--- a/views/sharing.handlebars
+++ b/views/sharing.handlebars
@@ -10,7 +10,7 @@
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/style-sharing.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/xterm.css" media="screen" rel="stylesheet" title="CSS" />
-    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <script type="text/javascript" src="scripts/amt-redir-ws-0.1.0{{{min}}}.js"></script>
@@ -28,7 +28,7 @@
     <script type="text/javascript" src="scripts/xterm{{{min}}}.js"></script>
     <script type="text/javascript" src="scripts/xterm-addon-fit{{{min}}}.js"></script>
     <script keeplink=1 type="text/javascript" src="scripts/filesaver.min.js"></script>
-    <script type="text/javascript" src="scripts/custom.js"></script>
+    {{{customJSTags}}}
     <title>{{{title}}}</title>
 </head>
 <body style="overflow:hidden;background-color:black">
diff --git a/views/ssh.handlebars b/views/ssh.handlebars
index e3924656..36041f0b 100644
--- a/views/ssh.handlebars
+++ b/views/ssh.handlebars
@@ -9,6 +9,7 @@
     <meta name="robots" content="noindex,nofollow">
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/xterm.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <script type="text/javascript" src="scripts/meshcentral{{min}}.js"></script>
@@ -16,6 +17,7 @@
     <script type="text/javascript" src="scripts/agent-redir-rtc-0.1.0{{min}}.js"></script>
     <script type="text/javascript" src="scripts/xterm-min.js"></script>
     <script type="text/javascript" src="scripts/xterm-addon-fit-min.js"></script>
+    {{{customJSTags}}}
     <title>SSH</title>
 </head>
 <body style="overflow:hidden;background-color:black" onload="start()">
diff --git a/views/terms-mobile.handlebars b/views/terms-mobile.handlebars
index f87eece8..896e36f7 100644
--- a/views/terms-mobile.handlebars
+++ b/views/terms-mobile.handlebars
@@ -8,6 +8,8 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="robots" content="noindex,nofollow" />
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
+    {{{customCSSTags}}}
+    {{{customJSTags}}}
     <title>{{{title}}} - Terms of use</title>
     <style type="text/css">
         :focus {
diff --git a/views/terms.handlebars b/views/terms.handlebars
index 1434c15c..6a95c821 100644
--- a/views/terms.handlebars
+++ b/views/terms.handlebars
@@ -8,8 +8,10 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="robots" content="noindex,nofollow" />
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
+    {{{customJSTags}}}
     <title>{{{title}}} - Terms of use</title>
 </head>
 <body id="body" onload="if (typeof(startup) !== 'undefined') startup();" style="display:none;overflow:hidden">
diff --git a/views/xterm.handlebars b/views/xterm.handlebars
index 380b115e..2df6b4ae 100644
--- a/views/xterm.handlebars
+++ b/views/xterm.handlebars
@@ -9,6 +9,7 @@
     <meta name="robots" content="noindex,nofollow">
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/xterm.css" media="screen" rel="stylesheet" title="CSS" />
+    {{{customCSSTags}}}
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <script type="text/javascript" src="scripts/meshcentral{{min}}.js"></script>
@@ -16,6 +17,7 @@
     <script type="text/javascript" src="scripts/agent-redir-rtc-0.1.0{{min}}.js"></script>
     <script type="text/javascript" src="scripts/xterm-min.js"></script>
     <script type="text/javascript" src="scripts/xterm-addon-fit-min.js"></script>
+    {{{customJSTags}}}
     <title>{{{name}}}</title>
 </head>
 <body style="overflow:hidden;background-color:black" oncontextmenu="handleContextMenu(event)">
diff --git a/webserver.js b/webserver.js
index cbab5614..6e310812 100644
--- a/webserver.js
+++ b/webserver.js
@@ -3188,6 +3188,14 @@ module.exports.CreateWebServer = function (parent, db, args, certificates, doneF
                 var customui = '';
                 if (domain.customui != null) { customui = encodeURIComponent(JSON.stringify(domain.customui)); }
 
+                // Custom files (CSS and JS)
+                var customFiles = '';
+                if (domain.customFiles != null) { 
+                    customFiles = encodeURIComponent(JSON.stringify(domain.customFiles)); 
+                } else if (domain.customfiles != null) {
+                    customFiles = encodeURIComponent(JSON.stringify(domain.customfiles)); 
+                }
+
                 // Server features
                 var serverFeatures = 255;
                 if (domain.myserver === false) { serverFeatures = 0; } // 64 = Show "My Server" tab
@@ -3239,6 +3247,7 @@ module.exports.CreateWebServer = function (parent, db, args, certificates, doneF
                     mpspass: args.mpspass,
                     passRequirements: passRequirements,
                     customui: customui,
+                    customFiles: customFiles,
                     webcerthash: Buffer.from(obj.webCertificateFullHashs[domain.id], 'binary').toString('base64').replace(/\+/g, '@').replace(/\//g, '$'),
                     footer: (domain.footer == null) ? '' : obj.common.replacePlaceholders(domain.footer, { 
                         'serverversion': obj.parent.currentVer,
@@ -3258,7 +3267,7 @@ module.exports.CreateWebServer = function (parent, db, args, certificates, doneF
                     showNotesPanel: (domain.shownotespanel ? 'true' : 'false'),
                     userSessionsSort: (domain.usersessionssort ? domain.usersessionssort : 'SessionId'),
                     webrtcconfig: webRtcConfig
-                }, dbGetFunc.req, domain), user);
+                }, dbGetFunc.req, domain, uiViewMode), user);
             }
             xdbGetFunc.req = req;
             xdbGetFunc.res = res;
@@ -3455,6 +3464,14 @@ module.exports.CreateWebServer = function (parent, db, args, certificates, doneF
         var customui = '';
         if (domain.customui != null) { customui = encodeURIComponent(JSON.stringify(domain.customui)); }
 
+        // Custom files (CSS and JS)
+        var customFiles = '';
+        if (domain.customFiles != null) { 
+            customFiles = encodeURIComponent(JSON.stringify(domain.customFiles)); 
+        } else if (domain.customfiles != null) {
+            customFiles = encodeURIComponent(JSON.stringify(domain.customfiles)); 
+        }
+
         // Get two-factor screen timeout
         var twoFactorTimeout = 300000; // Default is 5 minutes, 0 for no timeout.
         if ((typeof domain.passwordrequirements == 'object') && (typeof domain.passwordrequirements.twofactortimeout == 'number')) {
@@ -3493,6 +3510,7 @@ module.exports.CreateWebServer = function (parent, db, args, certificates, doneF
                 sessiontime: (args.sessiontime) ? args.sessiontime : 60, // Session time in minutes, 60 minutes is the default
                 passRequirements: passRequirements,
                 customui: customui,
+                customFiles: customFiles,
                 footer: (domain.loginfooter == null) ? '' : obj.common.replacePlaceholders(domain.loginfooter, { 
                     'serverversion': obj.parent.currentVer,
                     'servername': obj.getWebServerName(domain, req),
@@ -9396,6 +9414,63 @@ module.exports.CreateWebServer = function (parent, db, args, certificates, doneF
         return null;
     }
 
+    function generateCustomCSSTags(customFilesArray, currentTemplate) {
+        var cssTags = '';
+        
+        cssTags += '<link keeplink=1 type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />\n    ';
+        
+
+        if (customFilesArray) {
+            if (Array.isArray(customFilesArray)) {
+                for (var i = 0; i < customFilesArray.length; i++) {
+                    var customFileConfig = customFilesArray[i];
+                    if (customFileConfig && customFileConfig.css && Array.isArray(customFileConfig.css)) {
+                        if ((customFileConfig.scope && customFileConfig.scope.indexOf('all') !== -1) || 
+                            (currentTemplate && customFileConfig.scope && customFileConfig.scope.indexOf(currentTemplate) !== -1)) {
+                            for (var j = 0; j < customFileConfig.css.length; j++) {
+                                cssTags += '<link keeplink=1 type="text/css" href="styles/' + customFileConfig.css[j] + '" media="screen" rel="stylesheet" title="CSS" />\n    ';
+                            }
+                        }
+                    }
+                }
+            } else if (customFilesArray.css && Array.isArray(customFilesArray.css)) {
+                for (var i = 0; i < customFilesArray.css.length; i++) {
+                    cssTags += '<link keeplink=1 type="text/css" href="styles/' + customFilesArray.css[i] + '" media="screen" rel="stylesheet" title="CSS" />\n    ';
+                }
+            }
+        }
+        
+        return cssTags.trim();
+    }
+
+    function generateCustomJSTags(customFilesArray, currentTemplate) {
+        var jsTags = '';
+        
+        jsTags += '<script keeplink=1 type="text/javascript" src="scripts/custom.js"></script>\n    ';
+        
+        if (customFilesArray) {
+            if (Array.isArray(customFilesArray)) {
+                for (var i = 0; i < customFilesArray.length; i++) {
+                    var customFileConfig = customFilesArray[i];
+                    if (customFileConfig && customFileConfig.js && Array.isArray(customFileConfig.js)) {
+                        if ((customFileConfig.scope && customFileConfig.scope.indexOf('all') !== -1) || 
+                            (currentTemplate && customFileConfig.scope && customFileConfig.scope.indexOf(currentTemplate) !== -1)) {
+                            for (var j = 0; j < customFileConfig.js.length; j++) {
+                                jsTags += '<script keeplink=1 type="text/javascript" src="scripts/' + customFileConfig.js[j] + '"></script>\n    ';
+                            }
+                        }
+                    }
+                }
+            } else if (customFilesArray.js && Array.isArray(customFilesArray.js)) {
+                for (var i = 0; i < customFilesArray.js.length; i++) {
+                    jsTags += '<script keeplink=1 type="text/javascript" src="scripts/' + customFilesArray.js[i] + '"></script>\n    ';
+                }
+            }
+        }
+        
+        return jsTags.trim();
+    }
+    
     // Return the correct render page arguments.
     function getRenderArgs(xargs, req, domain, page) {
         var minify = (domain.minify == true);
@@ -9435,6 +9510,21 @@ module.exports.CreateWebServer = function (parent, db, args, certificates, doneF
         // To mitigate any possible BREACH attack, we generate a random 0 to 255 bytes length string here.
         xargs.randomlength = (args.webpagelengthrandomization !== false) ? parent.crypto.randomBytes(parent.crypto.randomBytes(1)[0]).toString('base64') : '';
 
+        // Generate custom CSS and JS tags
+        if (xargs.customFiles) {
+            try {
+                var customFiles = JSON.parse(decodeURIComponent(xargs.customFiles));
+                xargs.customCSSTags = generateCustomCSSTags(customFiles, page);
+                xargs.customJSTags = generateCustomJSTags(customFiles, page);
+            } catch (ex) {
+                xargs.customCSSTags = generateCustomCSSTags(null, page);
+                xargs.customJSTags = generateCustomJSTags(null, page);
+            }
+        } else {
+            xargs.customCSSTags = generateCustomCSSTags(null, page);
+            xargs.customJSTags = generateCustomJSTags(null, page);
+        }
+
         return xargs;
     }