[BridgeLink] Add better support for composite plugins (#120)

* Initial version with the drop down menu

* Make the menu update after each state change

* Reload the page after activating or deactivating bridge link

* Formatting changes

* Make sure that any callsign for the composite plugin will work, as well as any number of pararell composite plugins running with many Thunders

* Intercept each API call and add a prefix to calls from composite Thunder instances

* Clean everything up, make sure one nesting layer is allowed and you need to use another UI to chain more Thunders

* Clean the formatting and comments

* Make sure that active UI of the plugin survives the page reload

* Thunder instances as buttons on the top of the page instead of a drop-down menu

* Fix a bug with inproper caching between Thunder instances

* Slight formatting changes

* Update some comments

* Fix the Cross-site scripting vulnerability found by the scanning tools

* Try once again to fix the code scanning issues

* Build header using DOM methods to avoid innerHTML XSS concerns

* Take care of one other innerHTML

* Replace all innerHTML in Controller.js with DOM methods

* Sanitaze the data and fix one more innerHTML in application.js

Author: VeithMetro

dist/bundle.js

@@ -58,6 +58,8 @@ html {
     user-select: none;
     z-index: 1000;
     background-color: rgba(0,0,0,0.1);
+    display: flex;
+    align-items: center;
 }
 
 .touch .header img {
@@ -633,10 +635,8 @@ div#hide-notifications:hover {
 
 .desktop .header img {
     height: 30px;
-    width: 30px;
-    margin-top: 15px;
-    margin-left: 35px;
-    margin-bottom: 10px;
+    width: auto;
+    margin-left: 15px;
 }
 
 @media screen and (min-width: 960px) {
@@ -882,3 +882,43 @@ input[type=checkbox] {
     -moz-transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
     -webkit-transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
+
+.instance-buttons {
+    display: flex;
+    gap: 8px;
+    margin-left: 20px;
+    overflow-x: auto;
+    max-width: calc(100vw - 250px);
+    scrollbar-width: thin;
+}
+
+.instance-buttons::-webkit-scrollbar {
+    height: 4px;
+}
+
+.instance-buttons::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 2px;
+}
+
+.instance-button {
+    background-color: #444;
+    border: 1px solid #555;
+    border-radius: 4px;
+    color: #ccc;
+    padding: 6px 14px;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.instance-button:hover {
+    background-color: #555;
+    color: #fff;
+}
+
+.instance-button.active {
+    background-color: #0078d4;
+    border-color: #0078d4;
+    color: #fff;
+}

src/css/style.css

@@ -45,7 +45,9 @@ var plugin              = undefined;
 // private
 var fetchedPlugins  = [];
 var mainDiv         = document.getElementById('main');
-var activePlugin    = window.localStorage.getItem('lastActivePlugin') || undefined;
+// Sanitize localStorage input to prevent stored XSS
+var storedPlugin    = window.localStorage.getItem('lastActivePlugin');
+var activePlugin    = storedPlugin ? sanitizeForId(storedPlugin) : undefined;
 
 /**
 * Main initialization function
@@ -85,24 +87,47 @@ function init(host){
 
 /** (global) renders a plugin in the main div */
 function showPlugin(callsign) {
-    if (plugins[ callsign ] === undefined)
+    // Extract base callsign for plugin lookup (e.g., "DeviceInfo" from "BridgeLink1/DeviceInfo")
+    const delimiter = '/';
+    const lastDelimiterIndex = callsign.lastIndexOf(delimiter);
+    const baseCallsign = lastDelimiterIndex !== -1 ? callsign.substring(lastDelimiterIndex + 1) : callsign;
+    const prefix = lastDelimiterIndex !== -1 ? callsign.substring(0, lastDelimiterIndex) : null;
+
+    if (plugins[ baseCallsign ] === undefined)
         return;
 
-    if (activePlugin !== undefined && plugins[ activePlugin ] !== undefined)
-        plugins[ activePlugin ].close();
+    if (activePlugin !== undefined) {
+        // Get base callsign for the currently active plugin
+        const activeLastDelimiter = activePlugin.lastIndexOf(delimiter);
+        const activeBaseCallsign = activeLastDelimiter !== -1 ? activePlugin.substring(activeLastDelimiter + 1) : activePlugin;
+        if (plugins[ activeBaseCallsign ] !== undefined)
+            plugins[ activeBaseCallsign ].close();
+    }
 
-    document.getElementById('main').innerHTML = '';
-    plugins[ callsign ].render();
     activePlugin = callsign;
-    window.localStorage.setItem('lastActivePlugin', callsign);
-};
+    
+    // Set the active prefix on the API so all subsequent calls use it
+    api.setActivePrefix(prefix);
+    
+    plugins[ baseCallsign ].render();
+}
+
+// Sanitize a string for safe use as object key/DOM id
+function sanitizeForId(str) {
+    if (typeof str !== 'string') return '';
+    return str.replace(/[^a-zA-Z0-9_\/-]/g, '_');
+}
 
 /** (global) refresh current active plugin */
 function renderCurrentPlugin() {
     // lets re-render menu too, just to be sure
     plugins.menu.render(activePlugin);
 
-    document.getElementById('main').innerHTML = '';
+    // Use DOM methods instead of innerHTML
+    var main = document.getElementById('main');
+    while (main.firstChild) {
+        main.removeChild(main.firstChild);
+    }
     plugins[ activePlugin ].render();
 };
 

src/js/core/application.js

@@ -35,6 +35,9 @@ export default class WpeApi {
         this.t = ThunderJS({ 'host' : this.host[0], 'port': this.host[1] });
 
         this.socketListeners = {};
+        
+        // Active prefix for composite plugin support (e.g., "BridgeLink1")
+        this.activePrefix = null;
 
         // might use this later if the requests are getting to slow with the jsonrpc -> rest fallback.
         this.servicesAvailableInJsonRPC = [
@@ -61,6 +64,34 @@ export default class WpeApi {
         ];
     };
 
+    /**
+     * Set the active prefix for API calls.
+     * When set, all plugin calls will be prefixed (e.g., "MessageControl" becomes "BridgeLink1/MessageControl").
+     * @param {string|null} prefix - The prefix to apply, or null for local Thunder
+     */
+    setActivePrefix(prefix) {
+        this.activePrefix = prefix;
+    }
+    
+    /**
+     * Get the prefixed plugin name for API calls.
+     * @param {string} pluginName - The base plugin name
+     * @returns {string} The prefixed plugin name (or original if no prefix set)
+     */
+    getPrefixedPlugin(pluginName) {
+        // Don't prefix if no active prefix
+        if (!this.activePrefix) {
+            return pluginName;
+        }
+        
+        // Don't double-prefix if the plugin already has a prefix
+        if (pluginName.includes('/')) {
+            return pluginName;
+        }
+        
+        return this.activePrefix + '/' + pluginName;
+    }
+
     handleRequest(method, URL, body, callback) {
         var self = this;
 
@@ -109,11 +140,14 @@ export default class WpeApi {
 
     // Compatibility method to deal with transitioning APIs and older version of Thunder
     // note: This assumes the WebSocket to jsonrpc will fail.
-    req(rest, jsonrpc) {
+    req(rest, jsonrpc, options = {}) {
         return new Promise( (resolve, reject) => {
             if (jsonrpc) {
-                console.debug(`<JSON> ${jsonrpc.plugin }.1.${jsonrpc.method}`, jsonrpc.params ? jsonrpc.params : '');
-                this.t.call(jsonrpc.plugin, jsonrpc.method, jsonrpc.params)
+                // Apply active prefix to plugin name unless skipPrefix is set
+                // skipPrefix is used for infrastructure calls with absolute paths
+                const prefixedPlugin = options.skipPrefix ? jsonrpc.plugin : this.getPrefixedPlugin(jsonrpc.plugin);
+                console.debug(`<JSON> ${prefixedPlugin}.1.${jsonrpc.method}`, jsonrpc.params ? jsonrpc.params : '');
+                this.t.call(prefixedPlugin, jsonrpc.method, jsonrpc.params)
                 .then( result => {
                     resolve(result);
                 }).catch( error => {