image: Add additional security layer.

* Although Pollinations already implements server-side
sanitization, this enhancement adds an extra layer of
security to further strengthen input validation and
protection for safe and responsible usage.

Signed-off-by: Hadad <hadad@linuxmail.org>

assets/plugins/webLoader.js

@@ -6,12 +6,43 @@
 (function () {
   'use strict';
 
+  var sanitizeInput = function (raw, encode) {
+    if (!raw) return '';
+    var clean = raw;
+
+    if (typeof DOMPurify !== 'undefined') {
+      clean = DOMPurify.sanitize(clean, {
+        ALLOWED_TAGS: [],
+        ALLOWED_ATTR: []
+      });
+    }
+
+    if (typeof filterXSS !== 'undefined') {
+      clean = filterXSS(clean, {
+        whiteList: {}
+      });
+    }
+
+    if (encode === false) {
+      return clean;
+    }
+
+    if (typeof he !== 'undefined') {
+      clean = he.encode(clean, {
+        useNamedReferences: true,
+        allowUnsafeSymbols: false
+      });
+    }
+
+    return clean;
+  };
+
   var noop = function () {};
   var methods = [
-    'log', 'error', 'warn', 'info', 'debug', 'trace', 
-    'dir', 'table', 'time', 'timeEnd', 'timeLog', 'group', 
-    'groupEnd', 'assert', 'count', 'countReset', 'profile', 
-    'profileEnd', 'clear', 'dirxml', 'exception', 
+    'log', 'error', 'warn', 'info', 'debug', 'trace',
+    'dir', 'table', 'time', 'timeEnd', 'timeLog', 'group',
+    'groupEnd', 'assert', 'count', 'countReset', 'profile',
+    'profileEnd', 'clear', 'dirxml', 'exception',
     'groupCollapsed'
   ];
 
@@ -35,21 +66,15 @@
 
   var InitWelcomeModal = function () {
     try {
-      var hasShown = localStorage.getItem(
-        'welcomeModalShown'
-      );
+      var hasShown = localStorage.getItem('welcomeModalShown');
       if (!hasShown) {
-        var modal = document.getElementById(
-          'welcomeModal'
-        );
+        var modal = document.getElementById('welcomeModal');
         if (modal) {
           modal.style.display = 'flex';
         }
       }
     } catch (e) {
-      var modal = document.getElementById(
-        'welcomeModal'
-      );
+      var modal = document.getElementById('welcomeModal');
       if (modal) {
         modal.style.display = 'flex';
       }
@@ -61,10 +86,7 @@
     if (modal) {
       modal.style.display = 'none';
       try {
-        localStorage.setItem(
-          'welcomeModalShown', 
-          'true'
-        );
+        localStorage.setItem('welcomeModalShown', 'true');
       } catch (e) {}
     }
   };
@@ -89,34 +111,32 @@
 
     var modelValue = model.value;
     var sizeValue = size.value;
-    var promptValue = prompt.value
-      .trim()
-      .replace(/\s+/g, ' ')
-      .replace(/[\t\n\r]/g, '');
+    var promptValue = sanitizeInput(prompt.value);
 
     var isValid = !!modelValue &&
       !!sizeValue &&
       !!promptValue &&
       promptValue.length > 0;
 
+    if (typeof validator !== 'undefined') {
+      isValid = isValid && 
+        validator.isLength(promptValue, { min: 1 });
+    }
+
     submitBtn.disabled = !isValid;
   };
 
   var triggerExample = function (prompt, model, size) {
-    var modelSelect = document.getElementById(
-      'modelSelect'
-    );
-    var sizeSelect = document.getElementById(
-      'sizeSelect'
-    );
-    var promptInput = document.getElementById(
-      'promptInput'
-    );
+    var modelSelect = document.getElementById('modelSelect');
+    var sizeSelect = document.getElementById('sizeSelect');
+    var promptInput = document.getElementById('promptInput');
     var form = document.getElementById('generateForm');
 
     if (modelSelect) modelSelect.value = model;
     if (sizeSelect) sizeSelect.value = size;
-    if (promptInput) promptInput.value = prompt;
+    if (promptInput) {
+      promptInput.value = sanitizeInput(prompt);
+    }
 
     validateInputs();
 
@@ -132,58 +152,54 @@
   var cancelGeneration = function () {
     var form = document.getElementById('generateForm');
     var fa = document.getElementById('formAction');
-    var cancelBtn = event && event.target 
-      ? event.target.closest('button') 
+    var cancelBtn = event && event.target
+      ? event.target.closest('button')
       : null;
-    
+
     if (cancelBtn) {
       cancelBtn.disabled = true;
       cancelBtn.style.opacity = '0.6';
       cancelBtn.style.cursor = 'not-allowed';
+
+      var btnText = cancelBtn.querySelector('span') ||
+        cancelBtn.childNodes[cancelBtn.childNodes.length - 1];
       
-      var btnText = cancelBtn.querySelector('span') || 
-        cancelBtn.childNodes[
-          cancelBtn.childNodes.length - 1
-        ];
       if (btnText && btnText.nodeType === 3) {
         btnText.textContent = 'Cancelling...';
       } else if (!btnText) {
-        var textNode = Array.from(
-          cancelBtn.childNodes
-        ).find(function(node) {
-          return node.nodeType === 3 && 
-            node.textContent.trim();
-        });
+        var textNode = Array.from(cancelBtn.childNodes)
+          .find(function(node) {
+            return node.nodeType === 3 && 
+              node.textContent.trim();
+          });
         if (textNode) {
           textNode.textContent = 'Cancelling...';
         }
       }
     }
-    
+
     if (fa) {
       fa.value = 'cancel';
-      
+
       if (form) {
-        var hiddenCancel = document.createElement(
-          'input'
-        );
+        var hiddenCancel = document.createElement('input');
         hiddenCancel.type = 'hidden';
         hiddenCancel.name = 'forceCancel';
         hiddenCancel.value = 'true';
         form.appendChild(hiddenCancel);
-        
+
         var timestamp = document.createElement('input');
         timestamp.type = 'hidden';
         timestamp.name = 'cancelTime';
         timestamp.value = Date.now();
         form.appendChild(timestamp);
-        
+
         try {
           form.submit();
         } catch (e) {
           form.requestSubmit && form.requestSubmit();
         }
-        
+
         setTimeout(function() {
           if (form && fa) {
             fa.value = 'cancel';
@@ -194,7 +210,7 @@
             }
           }
         }, 500);
-        
+
         setTimeout(function() {
           window.location.reload();
         }, 3000);
@@ -206,7 +222,7 @@
       newFA.name = 'action';
       newFA.value = 'cancel';
       form.appendChild(newFA);
-      
+
       try {
         form.submit();
       } catch (e) {
@@ -215,8 +231,10 @@
     } else {
       var xhr = new XMLHttpRequest();
       xhr.open('POST', window.location.href, true);
-      xhr.setRequestHeader('Content-Type', 
-        'application/x-www-form-urlencoded');
+      xhr.setRequestHeader(
+        'Content-Type',
+        'application/x-www-form-urlencoded'
+      );
       xhr.onload = function() {
         window.location.reload();
       };
@@ -225,9 +243,9 @@
       };
       xhr.send('action=cancel&forceCancel=true');
     }
-    
+
     window.cancelRequested = true;
-    
+
     if (window.EventSource) {
       try {
         var sources = window.eventSources || [];
@@ -238,14 +256,13 @@
         });
       } catch (e) {}
     }
-    
-    if (window.AbortController && 
-        window.abortController) {
+
+    if (window.AbortController && window.abortController) {
       try {
         window.abortController.abort();
       } catch (e) {}
     }
-    
+
     setTimeout(function() {
       if (window.cancelRequested) {
         window.stop && window.stop();
@@ -255,54 +272,41 @@
     }, 100);
   };
 
-  var modelSelect = document.getElementById(
-    'modelSelect'
-  );
-  var sizeSelect = document.getElementById(
-    'sizeSelect'
-  );
-  var promptInput = document.getElementById(
-    'promptInput'
-  );
+  var modelSelect = document.getElementById('modelSelect');
+  var sizeSelect = document.getElementById('sizeSelect');
+  var promptInput = document.getElementById('promptInput');
 
   if (modelSelect) {
-    modelSelect.addEventListener(
-      'change', 
-      validateInputs
-    );
+    modelSelect.addEventListener('change', validateInputs);
   }
+  
   if (sizeSelect) {
-    sizeSelect.addEventListener(
-      'change', 
-      validateInputs
-    );
+    sizeSelect.addEventListener('change', validateInputs);
   }
 
   if (promptInput) {
-    promptInput.addEventListener(
-      'input', 
-      validateInputs
-    );
+    promptInput.addEventListener('input', function () {
+      promptInput.value = sanitizeInput(promptInput.value);
+      validateInputs();
+    });
+    
     promptInput.addEventListener('paste', function () {
-      setTimeout(validateInputs, 10);
+      setTimeout(function () {
+        promptInput.value = sanitizeInput(promptInput.value);
+        validateInputs();
+      }, 10);
     });
-    promptInput.addEventListener(
-      'keydown', 
-      function (e) {
-        if (e.key === 'Enter' && e.ctrlKey) {
-          e.preventDefault();
-          var submitBtn = document.getElementById(
-            'submitBtn'
-          );
-          if (submitBtn && !submitBtn.disabled) {
-            var form = document.getElementById(
-              'generateForm'
-            );
-            if (form) form.submit();
-          }
+    
+    promptInput.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' && e.ctrlKey) {
+        e.preventDefault();
+        var submitBtn = document.getElementById('submitBtn');
+        if (submitBtn && !submitBtn.disabled) {
+          var form = document.getElementById('generateForm');
+          if (form) form.submit();
         }
       }
-    );
+    });
   }
 
   window.closeWelcomeModal = closeWelcomeModal;
@@ -323,11 +327,9 @@
     });
   });
 
-  document.addEventListener('DOMContentLoaded', 
-    function() {
-      InitWelcomeModal();
-    }
-  );
+  document.addEventListener('DOMContentLoaded', function() {
+    InitWelcomeModal();
+  });
 
   if (document.readyState === 'complete' || 
       document.readyState === 'interactive') {

config.js

@@ -19,12 +19,12 @@ export default {
   },
   limits: {
     bodySize: '2mb',
-    maxContentLength: Infinity
+    maxContentLength: 2097152
   },
   generation: {
     progressInterval: 800,
     startDelay: 100,
-    maxProgress: 90
+    maxProgress: 99
   },
   paths: {
     views: 'public',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Image Generation Playground",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Part of the UltimaX Intelligence ecosystem",
   "type": "module",
   "main": "server.js",

public/webViewer.ejs

@@ -77,6 +77,11 @@
 
     <link rel="stylesheet" href="/__public__/assets/css/styles.css" />
     <link rel="stylesheet" href="/__public__/assets/css/webLoader.css" />
+    
+    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.7/dist/purify.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/validator/13.15.15/validator.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/he/1.2.0/he.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xss@1.0.15/dist/xss.js"></script>
 </head>
 <body data-is-generating="<%= !!isGenerating %>"
       data-request-id="<%= requestId || '' %>">
@@ -283,6 +288,7 @@
                     <textarea name="prompt" id="promptInput" required
                               placeholder="Describe the image you want to generate..." 
                               class="input-field textarea-field" 
+                              maxlength="300" 
                               <%= isGenerating ? 'disabled' : '' %>></textarea>
                 </div>