@kupola/kupola 1.2.0

package/js/security.js

@@ -0,0 +1,189 @@
+class KupolaSecurity {
+  constructor() {
+    this.csrfToken = null;
+    this.cspEnabled = false;
+  }
+
+  init() {
+    this._initCSRF();
+    this._initCSP();
+  }
+
+  _initCSRF() {
+    const metaTag = document.querySelector('meta[name="csrf-token"]');
+    if (metaTag) {
+      this.csrfToken = metaTag.getAttribute('content');
+    }
+  }
+
+  _initCSP() {
+    const metaTag = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
+    if (metaTag) {
+      this.cspEnabled = true;
+    }
+  }
+
+  getCSRFToken() {
+    return this.csrfToken;
+  }
+
+  setCSRFToken(token) {
+    this.csrfToken = token;
+    const metaTag = document.querySelector('meta[name="csrf-token"]');
+    if (metaTag) {
+      metaTag.setAttribute('content', token);
+    }
+  }
+
+  addCSRFHeader(config) {
+    if (this.csrfToken) {
+      config.headers = config.headers || {};
+      config.headers['X-CSRF-Token'] = this.csrfToken;
+    }
+    return config;
+  }
+
+  escapeHtml(str) {
+    if (!str || typeof str !== 'string') return str;
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  sanitize(html) {
+    if (!html || typeof html !== 'string') return html;
+
+    const allowedTags = [
+      'b', 'strong', 'i', 'em', 'u', 's', 'strike', 'sub', 'sup',
+      'a', 'br', 'p', 'span', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+      'ul', 'ol', 'li', 'table', 'thead', 'tbody', 'tr', 'td', 'th',
+      'img', 'video', 'audio', 'iframe'
+    ];
+
+    const allowedAttributes = [
+      'href', 'src', 'alt', 'title', 'class', 'id', 'data-*',
+      'width', 'height', 'frameborder', 'allowfullscreen'
+    ];
+
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = html;
+
+    const walk = (node) => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const tagName = node.tagName.toLowerCase();
+        if (!allowedTags.includes(tagName)) {
+          node.parentNode.replaceChild(document.createTextNode(node.textContent), node);
+          return;
+        }
+
+        Array.from(node.attributes).forEach(attr => {
+          const attrName = attr.name.toLowerCase();
+          const isAllowed = allowedAttributes.includes(attrName) || 
+                           attrName.startsWith('data-');
+          
+          if (!isAllowed) {
+            node.removeAttribute(attr.name);
+          } else if (attrName === 'href' || attrName === 'src') {
+            if (!this._isSafeUrl(attr.value)) {
+              node.removeAttribute(attr.name);
+            }
+          }
+        });
+      }
+
+      for (let i = node.childNodes.length - 1; i >= 0; i--) {
+        walk(node.childNodes[i]);
+      }
+    };
+
+    walk(tempDiv);
+    return tempDiv.innerHTML;
+  }
+
+  _isSafeUrl(url) {
+    try {
+      const parsed = new URL(url);
+      const safeProtocols = ['http:', 'https:', 'data:', 'mailto:', 'tel:'];
+      return safeProtocols.includes(parsed.protocol);
+    } catch {
+      return false;
+    }
+  }
+
+  validateEmail(email) {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+  }
+
+  validateURL(url) {
+    try {
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  validatePhone(phone) {
+    const re = /^[\d\s\-\+\(\)]{7,20}$/;
+    return re.test(phone.replace(/\s/g, ''));
+  }
+
+  generateSecureHash(str) {
+    if (!str || typeof str !== 'string') return '';
+    
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = ((hash << 5) - hash) + char;
+      hash = hash & hash;
+    }
+    return Math.abs(hash).toString(36);
+  }
+
+  isXSSAttack(str) {
+    if (!str || typeof str !== 'string') return false;
+    
+    const xssPatterns = [
+      /<script[^>]*>.*?<\/script>/gi,
+      /<img[^>]*onerror[^>]*>/gi,
+      /javascript:/gi,
+      /vbscript:/gi,
+      /onload[^>]*=/gi,
+      /onclick[^>]*=/gi,
+      /onmouseover[^>]*=/gi,
+      /<iframe[^>]*>/gi
+    ];
+
+    return xssPatterns.some(pattern => pattern.test(str));
+  }
+
+  protectForm(form) {
+    if (!(form instanceof HTMLFormElement)) return;
+
+    form.addEventListener('submit', (e) => {
+      const inputs = form.querySelectorAll('input, textarea');
+      let hasXSS = false;
+
+      inputs.forEach(input => {
+        if (this.isXSSAttack(input.value)) {
+          hasXSS = true;
+          input.classList.add('ds-input--error');
+        } else {
+          input.classList.remove('ds-input--error');
+        }
+      });
+
+      if (hasXSS) {
+        e.preventDefault();
+        console.error('[KupolaSecurity] XSS attack detected in form');
+      }
+    });
+  }
+}
+
+const kupolaSecurity = new KupolaSecurity();
+window.kupolaSecurity = kupolaSecurity;
+window.KupolaSecurity = KupolaSecurity;
+
+export default KupolaSecurity;

package/js/select.js

@@ -0,0 +1,143 @@
+class Select {
+  constructor(element) {
+    this.element = element;
+    this.trigger = element.querySelector('.ds-select__trigger');
+    this.valueEl = element.querySelector('.ds-select__value') || element.querySelector('.ds-select__trigger span');
+    this.optionsEl = element.querySelector('.ds-select__options') || element.querySelector('.ds-select__menu');
+    this.nativeSelect = element.querySelector('select');
+    this.icon = element.querySelector('.ds-select__icon');
+    this.scope = `select-${Math.random().toString(36).substr(2, 9)}`;
+    
+    this._triggerClickHandler = null;
+    this._documentClickHandler = null;
+    this._documentClickListener = null;
+    this._optionClickHandler = null;
+  }
+
+  init() {
+    if (!this.trigger || !this.optionsEl) return;
+    if (this.element.__kupolaInitialized) return;
+
+    this._optionClickHandler = (e) => {
+      const option = e.currentTarget;
+      const value = option.getAttribute('data-value');
+      if (this.nativeSelect) {
+        this.nativeSelect.value = value;
+      }
+      this.optionsEl.querySelectorAll('.ds-select__option, .ds-select__item').forEach(o => o.classList.remove('is-selected'));
+      option.classList.add('is-selected');
+      this.updateValue(option.textContent.trim());
+      this.hideOptions();
+      if (this.nativeSelect) {
+        this.nativeSelect.dispatchEvent(new Event('change'));
+      }
+    };
+
+    this.optionsEl.querySelectorAll('.ds-select__option, .ds-select__item').forEach(option => {
+      option.addEventListener('click', this._optionClickHandler);
+      option._selectOptionClickHandler = this._optionClickHandler;
+    });
+
+    this._triggerClickHandler = (e) => {
+      e.stopPropagation();
+      this.showOptions();
+    };
+
+    this.trigger.addEventListener('click', this._triggerClickHandler);
+
+    this._documentClickHandler = (e) => {
+      if (!this.element.contains(e.target)) {
+        this.hideOptions();
+      }
+    };
+
+    if (window.globalEvents) {
+      this._documentClickListener = window.globalEvents.on(document, 'click', this._documentClickHandler, { scope: this.scope });
+    } else {
+      document.addEventListener('click', this._documentClickHandler);
+    }
+
+    this.optionsEl.style.display = 'none';
+    this.element.__kupolaInitialized = true;
+  }
+
+  updateValue(text) {
+    if (this.valueEl) {
+      this.valueEl.textContent = text || this.valueEl.textContent;
+    }
+  }
+
+  showOptions() {
+    const isOpen = this.optionsEl.style.display === 'block';
+    this.optionsEl.style.display = isOpen ? 'none' : 'block';
+    if (this.icon) {
+      this.icon.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';
+    }
+    this.element.classList.toggle('is-open', !isOpen);
+  }
+
+  hideOptions() {
+    this.optionsEl.style.display = 'none';
+    if (this.icon) {
+      this.icon.style.transform = 'rotate(0deg)';
+    }
+    this.element.classList.remove('is-open');
+  }
+
+  destroy() {
+    if (!this.element.__kupolaInitialized) return;
+
+    if (this.trigger && this._triggerClickHandler) {
+      this.trigger.removeEventListener('click', this._triggerClickHandler);
+    }
+
+    if (this.optionsEl) {
+      this.optionsEl.querySelectorAll('.ds-select__option, .ds-select__item').forEach(option => {
+        if (option._selectOptionClickHandler) {
+          option.removeEventListener('click', option._selectOptionClickHandler);
+        }
+      });
+    }
+
+    if (this._documentClickListener && this._documentClickListener.unsubscribe) {
+      this._documentClickListener.unsubscribe();
+    } else if (this._documentClickHandler) {
+      document.removeEventListener('click', this._documentClickHandler);
+    }
+
+    this._documentClickHandler = null;
+    this._documentClickListener = null;
+    this._triggerClickHandler = null;
+    this._optionClickHandler = null;
+    this.element.__kupolaInitialized = false;
+  }
+}
+
+function initSelect(element) {
+  const select = new Select(element);
+  select.init();
+  element._kupolaSelect = select;
+}
+
+function initSelects(root = document) {
+  root.querySelectorAll('.ds-select').forEach(select => {
+    initSelect(select);
+  });
+}
+
+function cleanupSelect(select) {
+  if (select._kupolaSelect) {
+    select._kupolaSelect.destroy();
+    select._kupolaSelect = null;
+  }
+}
+
+function cleanupAllSelects() {
+  document.querySelectorAll('.ds-select').forEach(select => {
+    cleanupSelect(select);
+  });
+}
+
+if (window.kupolaInitializer) {
+  window.kupolaInitializer.register('select', initSelect, cleanupSelect);
+}