secure-ui-components 0.2.3 → 0.2.4

package/dist/core/base-component.js

@@ -15,503 +15,4 @@
  *
  * @module base-component
  * @license MIT
- */
-var _a;
-import { SecurityTier, getTierConfig, isValidTier, } from './security-config.js';
-/**
- * Base class for all Secure-UI components
- *
- * All components in the Secure-UI library should extend this class to inherit
- * core security functionality and standardized behavior.
- *
- * Security Architecture:
- * - Closed Shadow DOM prevents external tampering
- * - All attributes are sanitized on read
- * - Security tier is immutable after initial set
- * - Default tier is CRITICAL (fail secure)
- */
-export class SecureBaseComponent extends HTMLElement {
-    /** Maximum number of entries retained in the in-memory audit log */
-    static #MAX_AUDIT_LOG_SIZE = 1000;
-    /**
-     * Injection detection patterns applied to raw input values on every input event.
-     * Ordered by descending severity. Only the first match is reported per event.
-     * Raw values are never included in the resulting threat event.
-     */
-    /**
-     * Human-readable labels for each injection pattern ID.
-     * Used by components that render threat feedback UI (threat-feedback attribute).
-     */
-    static #THREAT_LABELS = {
-        'script-tag': 'Script injection blocked',
-        'js-protocol': 'JavaScript protocol blocked',
-        'event-handler': 'Event handler injection blocked',
-        'html-injection': 'HTML element injection blocked',
-        'css-expression': 'CSS expression injection blocked',
-        'vbscript': 'VBScript injection blocked',
-        'data-uri-html': 'Data URI injection blocked',
-        'template-syntax': 'Template injection blocked',
-    };
-    static #INJECTION_PATTERNS = [
-        { id: 'script-tag', pattern: /<script[\s>/]/i },
-        { id: 'js-protocol', pattern: /javascript\s*:/i },
-        { id: 'event-handler', pattern: /\bon\w+\s*=/i },
-        { id: 'html-injection', pattern: /<\s*(img|svg|iframe|object|embed|link|meta|base)[^>]*/i },
-        { id: 'css-expression', pattern: /expression\s*\(/i },
-        { id: 'vbscript', pattern: /vbscript\s*:/i },
-        { id: 'data-uri-html', pattern: /data:\s*text\/html/i },
-        { id: 'template-syntax', pattern: /\{\{[\s\S]*?\}\}/ },
-    ];
-    #securityTier = SecurityTier.CRITICAL;
-    #config;
-    #shadow;
-    #auditLog = [];
-    #rateLimitState = {
-        attempts: 0,
-        windowStart: Date.now()
-    };
-    #initialized = false;
-    #telemetryState = {
-        focusAt: null,
-        firstKeystrokeAt: null,
-        blurAt: null,
-        keyCount: 0,
-        correctionCount: 0,
-        pasteDetected: false,
-        autofillDetected: false,
-        focusCount: 0,
-        blurWithoutChange: 0,
-        lastInputLength: 0,
-    };
-    /**
-     * Constructor
-     *
-     * Security Note: Creates a CLOSED shadow DOM to prevent external JavaScript
-     * from accessing or modifying the component's internal DOM.
-     */
-    constructor() {
-        super();
-        this.#shadow = this.attachShadow({ mode: 'closed' });
-        this.#config = getTierConfig(this.#securityTier);
-    }
-    /**
-     * Observed attributes - must be overridden by child classes
-     */
-    static get observedAttributes() {
-        return ['security-tier', 'disabled', 'readonly', 'threat-feedback'];
-    }
-    /**
-     * Called when element is added to DOM
-     */
-    connectedCallback() {
-        if (!this.#initialized) {
-            this.#initialize();
-            this.#initialized = true;
-        }
-    }
-    #initialize() {
-        this.initializeSecurity();
-        this.#render();
-    }
-    /**
-     * Initialize security tier, config, and audit logging without triggering render.
-     *
-     * Components that manage their own rendering (e.g. secure-table) can call this
-     * from their connectedCallback instead of super.connectedCallback() to get
-     * security initialization without the base render lifecycle.
-     * @protected
-     */
-    initializeSecurity() {
-        const tierAttr = this.getAttribute('security-tier');
-        if (tierAttr && isValidTier(tierAttr)) {
-            this.#securityTier = tierAttr;
-        }
-        this.#config = getTierConfig(this.#securityTier);
-        this.#audit('component_initialized', {
-            tier: this.#securityTier,
-            timestamp: new Date().toISOString()
-        });
-    }
-    /**
-     * Called when an observed attribute changes
-     *
-     * Security Note: security-tier attribute is immutable after initialization
-     * to prevent privilege escalation.
-     */
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'security-tier' && this.#initialized) {
-            console.warn(`Security tier cannot be changed after initialization. ` +
-                `Attempted change from "${oldValue}" to "${newValue}" blocked.`);
-            if (oldValue !== null) {
-                this.setAttribute('security-tier', oldValue);
-            }
-            return;
-        }
-        if (this.#initialized) {
-            this.handleAttributeChange(name, oldValue, newValue);
-        }
-    }
-    /**
-     * Handle attribute changes - to be overridden by child classes
-     */
-    handleAttributeChange(_name, _oldValue, _newValue) {
-        // Child classes should override this method
-    }
-    #render() {
-        this.#shadow.innerHTML = '';
-        // Base styles via <link> — loads from 'self', fully CSP-safe.
-        // Using adoptedStyleSheets + replaceSync(inlineString) triggers CSP violations
-        // when style-src lacks 'unsafe-inline'. A <link> element loading from 'self'
-        // is always permitted.
-        const baseLink = document.createElement('link');
-        baseLink.rel = 'stylesheet';
-        baseLink.href = new URL('./base.css', import.meta.url).href;
-        this.#shadow.appendChild(baseLink);
-        const content = this.render();
-        if (content) {
-            this.#shadow.appendChild(content);
-        }
-    }
-    /**
-     * Returns the URL of the shared base stylesheet.
-     * Components that manage their own rendering (e.g. secure-table) can use
-     * this to inject the base <link> themselves.
-     * @protected
-     */
-    getBaseStylesheetUrl() {
-        return new URL('./base.css', import.meta.url).href;
-    }
-    /**
-     * Inject a component stylesheet into the shadow root via <link>.
-     * Accepts a URL (use import.meta.url to derive it, e.g.
-     *   new URL('./my-component.css', import.meta.url).href
-     * ). Loading from 'self' satisfies strict CSP without unsafe-inline.
-     * @protected
-     */
-    addComponentStyles(cssUrl) {
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = cssUrl;
-        this.#shadow.appendChild(link);
-    }
-    /**
-     * Sanitize a string value to prevent XSS
-     */
-    sanitizeValue(value) {
-        if (typeof value !== 'string') {
-            return '';
-        }
-        const div = document.createElement('div');
-        div.textContent = value;
-        return div.innerHTML;
-    }
-    /**
-     * Validate input against tier-specific rules
-     */
-    validateInput(value, options = {}) {
-        const errors = [];
-        const config = this.#config;
-        const isRequired = options.required !== undefined ? options.required : config.validation.required;
-        if (isRequired && (!value || value.trim().length === 0)) {
-            errors.push('This field is required');
-        }
-        const maxLength = options.maxLength || config.validation.maxLength;
-        if (value && value.length > maxLength) {
-            errors.push(`Value exceeds maximum length of ${maxLength}`);
-        }
-        const minLength = options.minLength || 0;
-        if (value && value.length < minLength) {
-            errors.push(`Value must be at least ${minLength} characters`);
-        }
-        const pattern = options.pattern || config.validation.pattern;
-        if (pattern && value && !pattern.test(value)) {
-            errors.push('Value does not match required format');
-        }
-        if (config.validation.strict && errors.length > 0) {
-            this.#audit('validation_failed', {
-                errors,
-                valueLength: value ? value.length : 0
-            });
-        }
-        return {
-            valid: errors.length === 0,
-            errors
-        };
-    }
-    /**
-     * Check rate limit for this component
-     */
-    checkRateLimit() {
-        if (!this.#config.rateLimit.enabled) {
-            return { allowed: true, retryAfter: 0 };
-        }
-        const now = Date.now();
-        const windowMs = this.#config.rateLimit.windowMs;
-        if (now - this.#rateLimitState.windowStart > windowMs) {
-            this.#rateLimitState.attempts = 0;
-            this.#rateLimitState.windowStart = now;
-        }
-        if (this.#rateLimitState.attempts >= this.#config.rateLimit.maxAttempts) {
-            const retryAfter = windowMs - (now - this.#rateLimitState.windowStart);
-            this.#audit('rate_limit_exceeded', {
-                attempts: this.#rateLimitState.attempts,
-                retryAfter
-            });
-            return { allowed: false, retryAfter };
-        }
-        this.#rateLimitState.attempts++;
-        return { allowed: true, retryAfter: 0 };
-    }
-    #audit(event, data = {}) {
-        const config = this.#config.audit;
-        const shouldLog = (event.includes('access') && config.logAccess) ||
-            (event.includes('change') && config.logChanges) ||
-            (event.includes('submit') && config.logSubmission) ||
-            event.includes('initialized') ||
-            event.includes('rate_limit') ||
-            event.includes('validation') ||
-            event.includes('threat');
-        if (!shouldLog) {
-            return;
-        }
-        const logEntry = {
-            event,
-            tier: this.#securityTier,
-            timestamp: new Date().toISOString(),
-            ...data
-        };
-        if (config.includeMetadata) {
-            logEntry.userAgent = navigator.userAgent;
-            logEntry.language = navigator.language;
-        }
-        // Cap log size to prevent unbounded memory growth (DoS mitigation)
-        if (this.#auditLog.length >= _a.#MAX_AUDIT_LOG_SIZE) {
-            this.#auditLog.shift();
-        }
-        this.#auditLog.push(logEntry);
-        this.dispatchEvent(new CustomEvent('secure-audit', {
-            detail: logEntry,
-            bubbles: true,
-            composed: true
-        }));
-    }
-    /**
-     * Get the shadow root (protected access for child classes)
-     */
-    get shadowRoot() {
-        return this.#shadow;
-    }
-    /**
-     * Get the current security tier
-     */
-    get securityTier() {
-        return this.#securityTier;
-    }
-    /**
-     * Get the tier configuration
-     */
-    get config() {
-        return this.#config;
-    }
-    /**
-     * Get all audit log entries
-     */
-    getAuditLog() {
-        return [...this.#auditLog];
-    }
-    /**
-     * Clear the local audit log
-     */
-    clearAuditLog() {
-        this.#auditLog = [];
-    }
-    /**
-     * Trigger an audit event from child classes
-     */
-    audit(event, data) {
-        this.#audit(event, data);
-    }
-    /**
-     * Check a raw input value for injection patterns and signal if one is found.
-     *
-     * Called by input components on every input event, after the raw value is captured.
-     * Only the first matching pattern is reported to avoid event flooding.
-     * The raw value is never included in the dispatched event detail.
-     *
-     * @param value   - Raw field value (unmodified user input)
-     * @param fieldName - The field's name attribute
-     */
-    detectInjection(value, fieldName) {
-        for (const { id, pattern } of _a.#INJECTION_PATTERNS) {
-            if (pattern.test(value)) {
-                this.audit('threat_detected', {
-                    fieldName,
-                    patternId: id,
-                    threatType: 'injection',
-                });
-                this.dispatchEvent(new CustomEvent('secure-threat-detected', {
-                    detail: {
-                        fieldName,
-                        threatType: 'injection',
-                        patternId: id,
-                        tier: this.securityTier,
-                        timestamp: Date.now(),
-                    },
-                    bubbles: true,
-                    composed: true,
-                }));
-                if (this.hasAttribute('threat-feedback')) {
-                    this.showThreatFeedback(id, this.securityTier);
-                }
-                return; // first match only
-            }
-        }
-        // No threat found — clear any lingering feedback
-        if (this.hasAttribute('threat-feedback')) {
-            this.clearThreatFeedback();
-        }
-    }
-    /**
-     * Show an inline threat feedback message inside the component.
-     * Called by detectInjection() when threat-feedback attribute is present.
-     * Override in child classes that render a threat UI container.
-     * @protected
-     */
-    showThreatFeedback(_patternId, _tier) {
-        // No-op — child classes override when they support inline threat UI
-    }
-    /**
-     * Clear any visible threat feedback.
-     * Called by detectInjection() when input is clean and threat-feedback is set.
-     * @protected
-     */
-    clearThreatFeedback() {
-        // No-op — child classes override when they support inline threat UI
-    }
-    /**
-     * Returns a human-readable label for the given injection pattern ID.
-     * @protected
-     */
-    getThreatLabel(patternId) {
-        return _a.#THREAT_LABELS[patternId] ?? `Injection blocked: ${patternId}`;
-    }
-    /**
-     * Force re-render of the component
-     */
-    rerender() {
-        this.#render();
-    }
-    // ── Telemetry collection ────────────────────────────────────────────────────
-    /**
-     * Call from the field's `focus` event handler to start a telemetry session.
-     * @protected
-     */
-    recordTelemetryFocus() {
-        const t = this.#telemetryState;
-        t.focusAt = Date.now();
-        t.blurAt = null;
-        t.focusCount++;
-        // snapshot input length at focus so we can detect blur-without-change
-        const el = this.shadowRoot.querySelector('input:not([type="hidden"]), textarea, select');
-        t.lastInputLength = el ? el.value.length : 0;
-    }
-    /**
-     * Call from the field's `input` event handler.
-     * Pass the native `InputEvent` so inputType can be inspected.
-     * @protected
-     */
-    recordTelemetryInput(event) {
-        const t = this.#telemetryState;
-        const now = Date.now();
-        if (t.firstKeystrokeAt === null) {
-            t.firstKeystrokeAt = now;
-        }
-        const inputEvent = event;
-        const inputType = inputEvent.inputType ?? '';
-        if (inputType === 'insertFromPaste' || inputType === 'insertFromPasteAsQuotation') {
-            t.pasteDetected = true;
-        }
-        else if (inputType === 'insertReplacementText') {
-            // Browser autofill triggers this type
-            t.autofillDetected = true;
-        }
-        else if (inputType.startsWith('delete') ||
-            inputType === 'historyUndo' ||
-            inputType === 'historyRedo') {
-            t.correctionCount++;
-        }
-        else {
-            t.keyCount++;
-        }
-        const el = event.target;
-        if (el)
-            t.lastInputLength = el.value.length;
-    }
-    /**
-     * Call from the field's `blur` event handler to finalise the telemetry session.
-     * @protected
-     */
-    recordTelemetryBlur() {
-        const t = this.#telemetryState;
-        t.blurAt = Date.now();
-        const el = this.shadowRoot.querySelector('input:not([type="hidden"]), textarea, select');
-        const currentLength = el ? el.value.length : 0;
-        if (currentLength === t.lastInputLength && t.keyCount === 0 && !t.pasteDetected) {
-            t.blurWithoutChange++;
-        }
-    }
-    /**
-     * Returns computed behavioral signals for the current (or last completed)
-     * interaction session. Safe to include in server payloads — contains no
-     * raw field values or PII.
-     */
-    getFieldTelemetry() {
-        const t = this.#telemetryState;
-        const focusAt = t.focusAt ?? Date.now();
-        const firstKeystrokeAt = t.firstKeystrokeAt;
-        const blurAt = t.blurAt ?? Date.now();
-        const dwell = firstKeystrokeAt !== null ? firstKeystrokeAt - focusAt : 0;
-        const completionTime = firstKeystrokeAt !== null ? blurAt - firstKeystrokeAt : 0;
-        const durationSec = completionTime / 1000;
-        const velocity = durationSec > 0 ? t.keyCount / durationSec : 0;
-        return {
-            dwell,
-            completionTime,
-            velocity: Math.round(velocity * 100) / 100,
-            corrections: t.correctionCount,
-            pasteDetected: t.pasteDetected,
-            autofillDetected: t.autofillDetected,
-            focusCount: t.focusCount,
-            blurWithoutChange: t.blurWithoutChange,
-        };
-    }
-    #resetTelemetryState() {
-        this.#telemetryState = {
-            focusAt: null,
-            firstKeystrokeAt: null,
-            blurAt: null,
-            keyCount: 0,
-            correctionCount: 0,
-            pasteDetected: false,
-            autofillDetected: false,
-            focusCount: 0,
-            blurWithoutChange: 0,
-            lastInputLength: 0,
-        };
-    }
-    /**
-     * Clean up when component is removed from DOM
-     */
-    disconnectedCallback() {
-        this.#rateLimitState = { attempts: 0, windowStart: Date.now() };
-        this.#resetTelemetryState();
-        if (this.#config.audit.logAccess) {
-            this.#audit('component_disconnected', {
-                timestamp: new Date().toISOString()
-            });
-        }
-    }
-}
-_a = SecureBaseComponent;
-export default SecureBaseComponent;
-//# sourceMappingURL=base-component.js.map
+ */var c;import{SecurityTier as h,getTierConfig as l,isValidTier as d}from"./security-config.js";class u extends HTMLElement{static#l=1e3;static#u={"script-tag":"Script injection blocked","js-protocol":"JavaScript protocol blocked","event-handler":"Event handler injection blocked","html-injection":"HTML element injection blocked","css-expression":"CSS expression injection blocked",vbscript:"VBScript injection blocked","data-uri-html":"Data URI injection blocked","template-syntax":"Template injection blocked"};static#h=[{id:"script-tag",pattern:/<script[\s>/]/i},{id:"js-protocol",pattern:/javascript\s*:/i},{id:"event-handler",pattern:/\bon\w+\s*=/i},{id:"html-injection",pattern:/<\s*(img|svg|iframe|object|embed|link|meta|base)[^>]*/i},{id:"css-expression",pattern:/expression\s*\(/i},{id:"vbscript",pattern:/vbscript\s*:/i},{id:"data-uri-html",pattern:/data:\s*text\/html/i},{id:"template-syntax",pattern:/\{\{[\s\S]*?\}\}/}];#i=h.CRITICAL;#t;#n;#s=[];#e={attempts:0,windowStart:Date.now()};#o=!1;#r={focusAt:null,firstKeystrokeAt:null,blurAt:null,keyCount:0,correctionCount:0,pasteDetected:!1,autofillDetected:!1,focusCount:0,blurWithoutChange:0,lastInputLength:0};constructor(){super(),this.#n=this.attachShadow({mode:"closed"}),this.#t=l(this.#i)}static get observedAttributes(){return["security-tier","disabled","readonly","threat-feedback"]}connectedCallback(){this.#o||(this.#d(),this.#o=!0)}#d(){this.initializeSecurity(),this.#c()}initializeSecurity(){const t=this.getAttribute("security-tier");t&&d(t)&&(this.#i=t),this.#t=l(this.#i),this.#a("component_initialized",{tier:this.#i,timestamp:new Date().toISOString()})}attributeChangedCallback(t,e,i){if(t==="security-tier"&&this.#o){console.warn(`Security tier cannot be changed after initialization. Attempted change from "${e}" to "${i}" blocked.`),e!==null&&this.setAttribute("security-tier",e);return}this.#o&&this.handleAttributeChange(t,e,i)}handleAttributeChange(t,e,i){}#c(){this.#n.innerHTML="";const t=document.createElement("link");t.rel="stylesheet",t.href=new URL("./base.css",import.meta.url).href,this.#n.appendChild(t);const e=this.render();e&&this.#n.appendChild(e)}getBaseStylesheetUrl(){return new URL("./base.css",import.meta.url).href}addComponentStyles(t){const e=document.createElement("link");e.rel="stylesheet",e.href=t,this.#n.appendChild(e)}sanitizeValue(t){if(typeof t!="string")return"";const e=document.createElement("div");return e.textContent=t,e.innerHTML}validateInput(t,e={}){const i=[],s=this.#t;(e.required!==void 0?e.required:s.validation.required)&&(!t||t.trim().length===0)&&i.push("This field is required");const r=e.maxLength||s.validation.maxLength;t&&t.length>r&&i.push(`Value exceeds maximum length of ${r}`);const a=e.minLength||0;t&&t.length<a&&i.push(`Value must be at least ${a} characters`);const o=e.pattern||s.validation.pattern;return o&&t&&!o.test(t)&&i.push("Value does not match required format"),s.validation.strict&&i.length>0&&this.#a("validation_failed",{errors:i,valueLength:t?t.length:0}),{valid:i.length===0,errors:i}}checkRateLimit(){if(!this.#t.rateLimit.enabled)return{allowed:!0,retryAfter:0};const t=Date.now(),e=this.#t.rateLimit.windowMs;if(t-this.#e.windowStart>e&&(this.#e.attempts=0,this.#e.windowStart=t),this.#e.attempts>=this.#t.rateLimit.maxAttempts){const i=e-(t-this.#e.windowStart);return this.#a("rate_limit_exceeded",{attempts:this.#e.attempts,retryAfter:i}),{allowed:!1,retryAfter:i}}return this.#e.attempts++,{allowed:!0,retryAfter:0}}#a(t,e={}){const i=this.#t.audit;if(!(t.includes("access")&&i.logAccess||t.includes("change")&&i.logChanges||t.includes("submit")&&i.logSubmission||t.includes("initialized")||t.includes("rate_limit")||t.includes("validation")||t.includes("threat")))return;const n={event:t,tier:this.#i,timestamp:new Date().toISOString(),...e};i.includeMetadata&&(n.userAgent=navigator.userAgent,n.language=navigator.language),this.#s.length>=c.#l&&this.#s.shift(),this.#s.push(n),this.dispatchEvent(new CustomEvent("secure-audit",{detail:n,bubbles:!0,composed:!0}))}get shadowRoot(){return this.#n}get securityTier(){return this.#i}get config(){return this.#t}getAuditLog(){return[...this.#s]}clearAuditLog(){this.#s=[]}audit(t,e){this.#a(t,e)}detectInjection(t,e){for(const{id:i,pattern:s}of c.#h)if(s.test(t)){this.audit("threat_detected",{fieldName:e,patternId:i,threatType:"injection"}),this.dispatchEvent(new CustomEvent("secure-threat-detected",{detail:{fieldName:e,threatType:"injection",patternId:i,tier:this.securityTier,timestamp:Date.now()},bubbles:!0,composed:!0})),this.hasAttribute("threat-feedback")&&this.showThreatFeedback(i,this.securityTier);return}this.hasAttribute("threat-feedback")&&this.clearThreatFeedback()}showThreatFeedback(t,e){}clearThreatFeedback(){}getThreatLabel(t){return c.#u[t]??`Injection blocked: ${t}`}rerender(){this.#c()}recordTelemetryFocus(){const t=this.#r;t.focusAt=Date.now(),t.blurAt=null,t.focusCount++;const e=this.shadowRoot.querySelector('input:not([type="hidden"]), textarea, select');t.lastInputLength=e?e.value.length:0}recordTelemetryInput(t){const e=this.#r,i=Date.now();e.firstKeystrokeAt===null&&(e.firstKeystrokeAt=i);const n=t.inputType??"";n==="insertFromPaste"||n==="insertFromPasteAsQuotation"?e.pasteDetected=!0:n==="insertReplacementText"?e.autofillDetected=!0:n.startsWith("delete")||n==="historyUndo"||n==="historyRedo"?e.correctionCount++:e.keyCount++;const r=t.target;r&&(e.lastInputLength=r.value.length)}recordTelemetryBlur(){const t=this.#r;t.blurAt=Date.now();const e=this.shadowRoot.querySelector('input:not([type="hidden"]), textarea, select');(e?e.value.length:0)===t.lastInputLength&&t.keyCount===0&&!t.pasteDetected&&t.blurWithoutChange++}getFieldTelemetry(){const t=this.#r,e=t.focusAt??Date.now(),i=t.firstKeystrokeAt,s=t.blurAt??Date.now(),n=i!==null?i-e:0,r=i!==null?s-i:0,a=r/1e3,o=a>0?t.keyCount/a:0;return{dwell:n,completionTime:r,velocity:Math.round(o*100)/100,corrections:t.correctionCount,pasteDetected:t.pasteDetected,autofillDetected:t.autofillDetected,focusCount:t.focusCount,blurWithoutChange:t.blurWithoutChange}}#p(){this.#r={focusAt:null,firstKeystrokeAt:null,blurAt:null,keyCount:0,correctionCount:0,pasteDetected:!1,autofillDetected:!1,focusCount:0,blurWithoutChange:0,lastInputLength:0}}disconnectedCallback(){this.#e={attempts:0,windowStart:Date.now()},this.#p(),this.#t.audit.logAccess&&this.#a("component_disconnected",{timestamp:new Date().toISOString()})}}c=u;var f=u;export{u as SecureBaseComponent,f as default};