secure-ui-components 0.2.2 → 0.2.4

package/dist/components/secure-telemetry-provider/secure-telemetry-provider.js

@@ -35,204 +35,4 @@
  *
  * @module secure-telemetry-provider
  * @license MIT
- */
-// ── Component ─────────────────────────────────────────────────────────────────
-export class SecureTelemetryProvider extends HTMLElement {
-    static get observedAttributes() {
-        return ['signing-key'];
-    }
-    #state = {
-        mouseMovementDetected: false,
-        keyboardActivityDetected: false,
-        injectedScriptCount: 0,
-        domMutationDetected: false,
-        pointerType: 'none',
-        firstKeystrokeAt: -1,
-        threatSignals: [],
-    };
-    /** performance.now() recorded at connectedCallback — baseline for timing signals */
-    #connectedAt = 0;
-    #mutationObserver = null;
-    #knownScripts = new Set();
-    /**
-     * Cached CryptoKey derived from the signing-key attribute.
-     * Imported once on first use; invalidated when the attribute changes.
-     * Avoids re-importing the key on every form submission.
-     */
-    #cryptoKey = null;
-    /** The raw key string that #cryptoKey was derived from. Used to detect stale cache. */
-    #cryptoKeySource = '';
-    // Bound listener references so we can cleanly remove them
-    #onMouseMove = () => { this.#state.mouseMovementDetected = true; };
-    #onKeydown = () => {
-        this.#state.keyboardActivityDetected = true;
-        if (this.#state.firstKeystrokeAt < 0) {
-            this.#state.firstKeystrokeAt = performance.now();
-        }
-    };
-    #onPointerDown = (e) => {
-        this.#state.pointerType = e.pointerType;
-    };
-    #onFormSubmit = (e) => { void this.#handleFormSubmit(e); };
-    #onThreatDetected = (e) => {
-        this.#state.threatSignals.push(e.detail);
-    };
-    connectedCallback() {
-        this.#connectedAt = performance.now();
-        // Snapshot existing scripts so we can detect later injections
-        document.querySelectorAll('script').forEach(s => this.#knownScripts.add(s));
-        this.#startMutationObserver();
-        this.#attachListeners();
-    }
-    disconnectedCallback() {
-        this.#mutationObserver?.disconnect();
-        this.#mutationObserver = null;
-        this.#removeListeners();
-        this.#cryptoKey = null;
-        this.#cryptoKeySource = '';
-    }
-    attributeChangedCallback(name, _oldValue, newValue) {
-        if (name === 'signing-key' && newValue !== this.#cryptoKeySource) {
-            // Invalidate the cached key so it is re-imported on the next sign() call
-            this.#cryptoKey = null;
-            this.#cryptoKeySource = '';
-        }
-    }
-    // ── Mutation observer: detect script injection ──────────────────────────────
-    #startMutationObserver() {
-        this.#mutationObserver = new MutationObserver((mutations) => {
-            for (const mutation of mutations) {
-                if (mutation.type !== 'childList')
-                    continue;
-                for (const node of Array.from(mutation.addedNodes)) {
-                    if (node.tagName === 'SCRIPT' && !this.#knownScripts.has(node)) {
-                        this.#state.injectedScriptCount++;
-                        this.#state.domMutationDetected = true;
-                        this.#knownScripts.add(node);
-                    }
-                }
-            }
-        });
-        this.#mutationObserver.observe(document.documentElement, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    // ── DOM event listeners ─────────────────────────────────────────────────────
-    #attachListeners() {
-        document.addEventListener('mousemove', this.#onMouseMove, { passive: true });
-        document.addEventListener('keydown', this.#onKeydown, { passive: true });
-        document.addEventListener('pointerdown', this.#onPointerDown, { passive: true });
-        this.addEventListener('secure-form-submit', this.#onFormSubmit);
-        this.addEventListener('secure-threat-detected', this.#onThreatDetected);
-    }
-    #removeListeners() {
-        document.removeEventListener('mousemove', this.#onMouseMove);
-        document.removeEventListener('keydown', this.#onKeydown);
-        document.removeEventListener('pointerdown', this.#onPointerDown);
-        this.removeEventListener('secure-form-submit', this.#onFormSubmit);
-        this.removeEventListener('secure-threat-detected', this.#onThreatDetected);
-    }
-    // ── Signal collection ───────────────────────────────────────────────────────
-    /**
-     * Collect a point-in-time snapshot of all environmental signals.
-     */
-    collectSignals() {
-        const nav = navigator;
-        const webdriverDetected = nav['webdriver'] === true ||
-            Object.prototype.hasOwnProperty.call(nav, 'webdriver');
-        // Headless Chrome leaves traces in userAgent and missing APIs
-        const ua = navigator.userAgent;
-        const headlessDetected = ua.includes('HeadlessChrome') ||
-            ua.includes('Headless') ||
-            (typeof window['chrome'] === 'undefined' &&
-                ua.includes('Chrome'));
-        const suspiciousScreenSize = screen.width === 0 ||
-            screen.height === 0 ||
-            (screen.width < 100 && screen.height < 100);
-        const now = performance.now();
-        const pageLoadToFirstKeystroke = this.#state.firstKeystrokeAt >= 0
-            ? Math.round(this.#state.firstKeystrokeAt - this.#connectedAt)
-            : -1;
-        const loadToSubmit = Math.round(now - this.#connectedAt);
-        return {
-            webdriverDetected,
-            headlessDetected,
-            domMutationDetected: this.#state.domMutationDetected,
-            injectedScriptCount: this.#state.injectedScriptCount,
-            suspiciousScreenSize,
-            pointerType: this.#state.pointerType,
-            mouseMovementDetected: this.#state.mouseMovementDetected,
-            keyboardActivityDetected: this.#state.keyboardActivityDetected,
-            pageLoadToFirstKeystroke,
-            loadToSubmit,
-            threatSignals: this.#state.threatSignals.length > 0
-                ? [...this.#state.threatSignals]
-                : undefined,
-        };
-    }
-    // ── Signing ─────────────────────────────────────────────────────────────────
-    /**
-     * Generate a signed envelope using HMAC-SHA-256 via SubtleCrypto.
-     * Falls back to an unsigned envelope if SubtleCrypto is unavailable
-     * (e.g., non-secure context in tests) — the server should treat
-     * unsigned envelopes with reduced trust.
-     */
-    async sign(signals) {
-        const nonce = this.#generateNonce();
-        const issuedAt = new Date().toISOString();
-        const signingKey = this.getAttribute('signing-key') ?? '';
-        const payload = `${nonce}.${issuedAt}.${JSON.stringify(signals)}`;
-        const signature = await this.#hmacSha256(signingKey, payload);
-        return { nonce, issuedAt, environment: signals, signature };
-    }
-    #generateNonce() {
-        const bytes = new Uint8Array(16);
-        crypto.getRandomValues(bytes);
-        return Array.from(bytes, b => b.toString(16).padStart(2, '0')).join('');
-    }
-    async #hmacSha256(key, data) {
-        if (!crypto.subtle) {
-            // Non-secure context (HTTP in dev) — return empty signature
-            return '';
-        }
-        const enc = new TextEncoder();
-        // Import and cache the CryptoKey. Re-import only when the key string changes.
-        if (this.#cryptoKey === null || this.#cryptoKeySource !== key) {
-            this.#cryptoKey = await crypto.subtle.importKey('raw', enc.encode(key), { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']);
-            this.#cryptoKeySource = key;
-        }
-        const signatureBuffer = await crypto.subtle.sign('HMAC', this.#cryptoKey, enc.encode(data));
-        return Array.from(new Uint8Array(signatureBuffer), b => b.toString(16).padStart(2, '0')).join('');
-    }
-    // ── Form submit interception ─────────────────────────────────────────────────
-    async #handleFormSubmit(event) {
-        const detail = event.detail;
-        if (!detail?.telemetry)
-            return;
-        try {
-            const signals = this.collectSignals();
-            const envelope = await this.sign(signals);
-            // Attach the signed envelope directly onto the telemetry object.
-            // Because both this handler and downstream listeners receive the same
-            // detail object reference, waiting listeners that check after an async
-            // tick will see the enriched value.
-            detail.telemetry._env = envelope;
-        }
-        catch {
-            // Signing failure (e.g. non-secure context) must not block form submission.
-            // The server should treat a missing _env as an unsigned, lower-trust submission.
-        }
-    }
-    // ── Public API ────────────────────────────────────────────────────────────────
-    /**
-     * Get the current environmental signals without triggering a form submit.
-     * Useful for pre-flight checks or progressive disclosure flows.
-     */
-    getEnvironmentalSignals() {
-        return this.collectSignals();
-    }
-}
-customElements.define('secure-telemetry-provider', SecureTelemetryProvider);
-export default SecureTelemetryProvider;
-//# sourceMappingURL=secure-telemetry-provider.js.map
+ */class o extends HTMLElement{static get observedAttributes(){return["signing-key"]}#e={mouseMovementDetected:!1,keyboardActivityDetected:!1,injectedScriptCount:0,domMutationDetected:!1,pointerType:"none",firstKeystrokeAt:-1,threatSignals:[]};#i=0;#s=null;#r=new Set;#t=null;#n="";#o=()=>{this.#e.mouseMovementDetected=!0};#c=()=>{this.#e.keyboardActivityDetected=!0,this.#e.firstKeystrokeAt<0&&(this.#e.firstKeystrokeAt=performance.now())};#a=e=>{this.#e.pointerType=e.pointerType};#d=e=>{this.#p(e)};#h=e=>{this.#e.threatSignals.push(e.detail)};connectedCallback(){this.#i=performance.now(),document.querySelectorAll("script").forEach(e=>this.#r.add(e)),this.#u(),this.#l()}disconnectedCallback(){this.#s?.disconnect(),this.#s=null,this.#m(),this.#t=null,this.#n=""}attributeChangedCallback(e,n,t){e==="signing-key"&&t!==this.#n&&(this.#t=null,this.#n="")}#u(){this.#s=new MutationObserver(e=>{for(const n of e)if(n.type==="childList")for(const t of Array.from(n.addedNodes))t.tagName==="SCRIPT"&&!this.#r.has(t)&&(this.#e.injectedScriptCount++,this.#e.domMutationDetected=!0,this.#r.add(t))}),this.#s.observe(document.documentElement,{childList:!0,subtree:!0})}#l(){document.addEventListener("mousemove",this.#o,{passive:!0}),document.addEventListener("keydown",this.#c,{passive:!0}),document.addEventListener("pointerdown",this.#a,{passive:!0}),this.addEventListener("secure-form-submit",this.#d),this.addEventListener("secure-threat-detected",this.#h)}#m(){document.removeEventListener("mousemove",this.#o),document.removeEventListener("keydown",this.#c),document.removeEventListener("pointerdown",this.#a),this.removeEventListener("secure-form-submit",this.#d),this.removeEventListener("secure-threat-detected",this.#h)}collectSignals(){const e=navigator,n=e.webdriver===!0||Object.prototype.hasOwnProperty.call(e,"webdriver"),t=navigator.userAgent,s=t.includes("HeadlessChrome")||t.includes("Headless")||typeof window.chrome>"u"&&t.includes("Chrome"),i=screen.width===0||screen.height===0||screen.width<100&&screen.height<100,r=performance.now(),c=this.#e.firstKeystrokeAt>=0?Math.round(this.#e.firstKeystrokeAt-this.#i):-1,a=Math.round(r-this.#i);return{webdriverDetected:n,headlessDetected:s,domMutationDetected:this.#e.domMutationDetected,injectedScriptCount:this.#e.injectedScriptCount,suspiciousScreenSize:i,pointerType:this.#e.pointerType,mouseMovementDetected:this.#e.mouseMovementDetected,keyboardActivityDetected:this.#e.keyboardActivityDetected,pageLoadToFirstKeystroke:c,loadToSubmit:a,threatSignals:this.#e.threatSignals.length>0?[...this.#e.threatSignals]:void 0}}async sign(e){const n=this.#y(),t=new Date().toISOString(),s=this.getAttribute("signing-key")??"",i=`${n}.${t}.${JSON.stringify(e)}`,r=await this.#v(s,i);return{nonce:n,issuedAt:t,environment:e,signature:r}}#y(){const e=new Uint8Array(16);return crypto.getRandomValues(e),Array.from(e,n=>n.toString(16).padStart(2,"0")).join("")}async#v(e,n){if(!crypto.subtle)return"";const t=new TextEncoder;(this.#t===null||this.#n!==e)&&(this.#t=await crypto.subtle.importKey("raw",t.encode(e),{name:"HMAC",hash:"SHA-256"},!1,["sign"]),this.#n=e);const s=await crypto.subtle.sign("HMAC",this.#t,t.encode(n));return Array.from(new Uint8Array(s),i=>i.toString(16).padStart(2,"0")).join("")}async#p(e){const n=e.detail;if(n?.telemetry)try{const t=this.collectSignals(),s=await this.sign(t);n.telemetry._env=s}catch{}}getEnvironmentalSignals(){return this.collectSignals()}}customElements.define("secure-telemetry-provider",o);var h=o;export{o as SecureTelemetryProvider,h as default};

package/dist/components/secure-textarea/secure-textarea.css

@@ -134,11 +134,76 @@ label {
 
 @media (prefers-reduced-motion: reduce) {
   .textarea-field,
-  .error-container {
+  .error-container,
+  .threat-container {
     transition: none !important;
   }
 }
 
+/* Threat Feedback Container */
+.threat-container {
+  margin-top: var(--secure-ui-form-error-margin-top);
+  font-size: var(--secure-ui-error-font-size);
+  color: var(--secure-ui-color-warning);
+  line-height: var(--secure-ui-line-height-normal);
+  overflow: hidden;
+  max-height: 40px;
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out, max-height 0.2s ease-out, margin-top 0.2s ease-out;
+  display: flex;
+  align-items: center;
+  gap: var(--secure-ui-space-1, 4px);
+  flex-wrap: wrap;
+}
+
+.threat-container.hidden {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-4px);
+  margin-top: 0;
+}
+
+.threat-message {
+  flex: 1;
+  min-width: 0;
+}
+
+.threat-badge {
+  display: inline-block;
+  padding: var(--secure-ui-badge-padding);
+  font-size: var(--secure-ui-badge-font-size);
+  font-weight: var(--secure-ui-font-weight-semibold);
+  border-radius: var(--secure-ui-badge-border-radius);
+  background-color: color-mix(in srgb, var(--secure-ui-color-warning) 12%, transparent);
+  color: var(--secure-ui-color-warning);
+  border: var(--secure-ui-border-width-thin) solid currentColor;
+  font-family: var(--secure-ui-font-family-mono, monospace);
+  white-space: nowrap;
+}
+
+.threat-tier {
+  display: inline-block;
+  padding: var(--secure-ui-badge-padding);
+  font-size: var(--secure-ui-badge-font-size);
+  font-weight: var(--secure-ui-font-weight-semibold);
+  border-radius: var(--secure-ui-badge-border-radius);
+  background-color: var(--secure-ui-color-bg-tertiary);
+  color: var(--secure-ui-color-text-secondary);
+  border: var(--secure-ui-border-width-thin) solid var(--secure-ui-color-border);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+/* Threat state on the textarea field */
+.textarea-field.threat {
+  border-color: var(--secure-ui-color-warning) !important;
+}
+
+.textarea-field.threat:focus {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--secure-ui-color-warning) 25%, transparent);
+}
+
 /* Security Tier Styles */
 :host([security-tier="authenticated"]) .textarea-field {
   border-color: var(--secure-ui-tier-authenticated);

package/dist/components/secure-textarea/secure-textarea.d.ts

@@ -29,6 +29,7 @@
  * @license MIT
  */
 import { SecureBaseComponent } from '../../core/base-component.js';
+import type { SecurityTierValue } from '../../core/types.js';
 /**
  * Secure Textarea Web Component
  *
@@ -105,6 +106,16 @@ export declare class SecureTextarea extends SecureBaseComponent {
     /**
      * Cleanup on disconnect
      */
+    /**
+     * Show inline threat feedback inside the component's shadow DOM.
+     * @protected
+     */
+    protected showThreatFeedback(patternId: string, tier: SecurityTierValue): void;
+    /**
+     * Clear the threat feedback container.
+     * @protected
+     */
+    protected clearThreatFeedback(): void;
     disconnectedCallback(): void;
 }
 export default SecureTextarea;

package/dist/components/secure-textarea/secure-textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"secure-textarea.d.ts","sourceRoot":"","sources":["../../../src/components/secure-textarea/secure-textarea.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE;;;;;;;;GAQG;AACH,qBAAa,cAAe,SAAQ,mBAAmB;;IA+BrD;;;;OAIG;IACH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAcxC;IAED;;OAEG;;IAKH;;;;;;;;OAQG;IACH,SAAS,CAAC,MAAM,IAAI,gBAAgB,GAAG,WAAW,GAAG,IAAI;IAwTzD;;;;OAIG;IACH,SAAS,CAAC,qBAAqB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAmBtG;;;;OAIG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;;;OAIG;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAKtB;IAED;;;;OAIG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;;;OAIG;IACH,IAAI,KAAK,IAAI,OAAO,CAWnB;IAED;;;;OAIG;IACH,KAAK,IAAI,IAAI;IAMb;;;;OAIG;IACH,IAAI,IAAI,IAAI;IAMZ;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAQ7B;AAKD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"secure-textarea.d.ts","sourceRoot":"","sources":["../../../src/components/secure-textarea/secure-textarea.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D;;;;;;;;GAQG;AACH,qBAAa,cAAe,SAAQ,mBAAmB;;IAsCrD;;;;OAIG;IACH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAcxC;IAED;;OAEG;;IAKH;;;;;;;;OAQG;IACH,SAAS,CAAC,MAAM,IAAI,gBAAgB,GAAG,WAAW,GAAG,IAAI;IAiUzD;;;;OAIG;IACH,SAAS,CAAC,qBAAqB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAmBtG;;;;OAIG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;;;OAIG;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAKtB;IAED;;;;OAIG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;;;OAIG;IACH,IAAI,KAAK,IAAI,OAAO,CAWnB;IAED;;;;OAIG;IACH,KAAK,IAAI,IAAI;IAMb;;;;OAIG;IACH,IAAI,IAAI,IAAI;IAMZ;;OAEG;IACH;;;OAGG;cACgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,GAAG,IAAI;IA2BvF;;;OAGG;cACgB,mBAAmB,IAAI,IAAI;IAY9C,oBAAoB,IAAI,IAAI;CAQ7B;AAKD,eAAe,cAAc,CAAC"}