@kupola/kupola 1.5.1 → 1.5.2

package/js/depends.js

@@ -299,11 +299,16 @@ class FetchedSource extends DependsSource {
             url += (url.includes('?') ? '&' : '?') + queryParts.join('&');
         }
 
+        const globalHeaders = httpConfig?.headers || {};
         const fetchOptions = {
             method: this.method.toUpperCase(),
-            headers: { 'Content-Type': 'application/json', ...this.headers }
+            headers: { 'Content-Type': 'application/json', ...globalHeaders, ...this.headers }
         };
 
+        if (httpConfig?.withCredentials) {
+            fetchOptions.credentials = 'include';
+        }
+
         if (['POST', 'PUT', 'PATCH'].includes(fetchOptions.method)) {
             fetchOptions.body = JSON.stringify(params);
         }

package/js/kupola-config.js

@@ -13,7 +13,39 @@ const config = {
   },
   http: {
     baseURL: '',
-    timeout: 10000
+    timeout: 10000,
+    headers: {},
+    withCredentials: false
+  },
+  ui: {
+    defaultSize: 'md',
+    defaultVariant: 'default'
+  },
+  performance: {
+    lazyLoad: true,
+    debounceDelay: 300,
+    throttleDelay: 100,
+    animationEnabled: true
+  },
+  security: {
+    xssProtection: true,
+    sanitizeHtml: {
+      enabled: true,
+      allowedTags: ['b', 'i', 'u', 'em', 'strong', 'a', 'br', 'p', 'span', 'div', 'img'],
+      allowedAttributes: {
+        'a': ['href', 'target', 'rel'],
+        'img': ['src', 'alt', 'width', 'height'],
+        'span': ['class', 'style'],
+        'div': ['class', 'style']
+      }
+    }
+  },
+  dev: {
+    debug: false,
+    logLevel: 'warn'
+  },
+  extend: {
+    themeVariables: {}
   },
   components: {
     autoInit: true,
@@ -53,6 +85,30 @@ export function getDefaultBrand() {
   return config.theme.brand;
 }
 
+export function getHttpConfig() {
+  return config.http;
+}
+
+export function getUiConfig() {
+  return config.ui;
+}
+
+export function getSecurityConfig() {
+  return config.security;
+}
+
+export function getDevConfig() {
+  return config.dev;
+}
+
+export function getPerformanceConfig() {
+  return config.performance;
+}
+
+export function getExtendConfig() {
+  return config.extend;
+}
+
 function mergeDeep(target, source) {
   for (const key in source) {
     if (source[key] instanceof Object && key in target && target[key] instanceof Object) {

package/js/kupola-core.js

@@ -9,7 +9,7 @@ import { KupolaLifecycle } from './kupola-lifecycle.js';
 import { kupolaInitializer } from './initializer.js';
 import { kupolaData } from './data-bind.js';
 import { initTheme } from './theme.js';
-import { getConfig } from './kupola-config.js';
+import { getConfig, getSecurityConfig } from './kupola-config.js';
 
 let kupolaRegistry = null;
 
@@ -17,9 +17,41 @@ if (typeof window !== 'undefined') {
   kupolaRegistry = new KupolaComponentRegistry();
 }
 
+function _applySecurityHeaders() {
+  const securityConfig = getSecurityConfig();
+  
+  if (securityConfig.xssProtection && typeof document !== 'undefined') {
+    let metaTag = document.querySelector('meta[http-equiv="X-XSS-Protection"]');
+    if (!metaTag) {
+      metaTag = document.createElement('meta');
+      metaTag.setAttribute('http-equiv', 'X-XSS-Protection');
+      metaTag.setAttribute('content', '1; mode=block');
+      document.head.insertBefore(metaTag, document.head.firstChild);
+    }
+    
+    metaTag = document.querySelector('meta[http-equiv="X-Content-Type-Options"]');
+    if (!metaTag) {
+      metaTag = document.createElement('meta');
+      metaTag.setAttribute('http-equiv', 'X-Content-Type-Options');
+      metaTag.setAttribute('content', 'nosniff');
+      document.head.insertBefore(metaTag, document.head.firstChild);
+    }
+    
+    metaTag = document.querySelector('meta[http-equiv="X-Frame-Options"]');
+    if (!metaTag) {
+      metaTag = document.createElement('meta');
+      metaTag.setAttribute('http-equiv', 'X-Frame-Options');
+      metaTag.setAttribute('content', 'SAMEORIGIN');
+      document.head.insertBefore(metaTag, document.head.firstChild);
+    }
+  }
+}
+
 /** Bootstrap the Kupola component system (data binding, theme, component discovery). */
 async function kupolaBootstrap() {
   if (typeof window !== 'undefined') {
+    _applySecurityHeaders();
+    
     const config = getConfig();
     // Load persisted data and bind data-bind elements
     kupolaData.loadPersisted();

package/js/modal.js

@@ -1,4 +1,5 @@
 import { kupolaInitializer } from './initializer.js';
+import { getUiConfig } from './kupola-config.js';
 
 class Modal {
   constructor(element, options = {}) {
@@ -182,9 +183,12 @@ function createModal(options = {}) {
     onCancel,
     onOpen,
     onClose,
-    footer = null
+    footer = null,
+    size = getUiConfig().defaultSize
   } = options;
   
+  const sizeClass = size === 'sm' ? 'ds-btn--sm' : size === 'lg' ? 'ds-btn--lg' : '';
+  
   const container = document.createElement('div');
   container.className = 'ds-modal-container';
   
@@ -194,8 +198,8 @@ function createModal(options = {}) {
       footerHTML = `<div class="ds-modal__footer">${footer}</div>`;
     } else if (showConfirm || showCancel) {
       footerHTML = `<div class="ds-modal__footer">
-        ${showCancel ? `<button class="ds-btn ${cancelClass}" data-modal-cancel>${cancelText}</button>` : ''}
-        ${showConfirm ? `<button class="ds-btn ${confirmClass}" data-modal-confirm>${confirmText}</button>` : ''}
+        ${showCancel ? `<button class="ds-btn ${sizeClass} ${cancelClass}" data-modal-cancel>${cancelText}</button>` : ''}
+        ${showConfirm ? `<button class="ds-btn ${sizeClass} ${confirmClass}" data-modal-confirm>${confirmText}</button>` : ''}
       </div>`;
     }
   }

package/js/security.js

@@ -0,0 +1,61 @@
+import { getSecurityConfig } from './kupola-config.js';
+
+export function sanitizeHtml(html, options = {}) {
+  const securityConfig = getSecurityConfig();
+  const sanitizeConfig = securityConfig?.sanitizeHtml || {};
+  
+  if (!sanitizeConfig.enabled && !options.force) {
+    return html;
+  }
+  
+  const allowedTags = options.allowedTags || sanitizeConfig.allowedTags || [];
+  const allowedAttributes = options.allowedAttributes || sanitizeConfig.allowedAttributes || {};
+  
+  if (typeof html !== 'string') {
+    return html;
+  }
+  
+  const domParser = new DOMParser();
+  const doc = domParser.parseFromString(html, 'text/html');
+  const elements = doc.body.querySelectorAll('*');
+  
+  elements.forEach(element => {
+    const tagName = element.tagName.toLowerCase();
+    
+    if (!allowedTags.includes(tagName)) {
+      element.remove();
+      return;
+    }
+    
+    Array.from(element.attributes).forEach(attr => {
+      const attrName = attr.name.toLowerCase();
+      const tagAllowedAttrs = allowedAttributes[tagName] || [];
+      
+      if (!tagAllowedAttrs.includes(attrName)) {
+        element.removeAttribute(attr.name);
+      }
+    });
+  });
+  
+  return doc.body.innerHTML;
+}
+
+export function escapeHtml(text) {
+  if (typeof text !== 'string') {
+    return text;
+  }
+  
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+export function stripHtml(html) {
+  if (typeof html !== 'string') {
+    return html;
+  }
+  
+  const domParser = new DOMParser();
+  const doc = domParser.parseFromString(html, 'text/html');
+  return doc.body.textContent || '';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupola/kupola",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "A lightweight UI toolkit for any web project. No heavy frontend frameworks required.",
   "main": "dist/kupola.cjs.js",
   "module": "dist/kupola.esm.js",