content-security-toolkit 1.0.1 → 1.0.2

package/dist/utils/securityOverlayManager-simple.js

@@ -0,0 +1,552 @@
+import { DomObserver } from "./DOMObserver";
+import { isBrowser } from "./environment";
+import { ProtectionEventType } from "../core/mediator/protection-event";
+/**
+ * Utility class to manage security overlays
+ */
+export class SecurityOverlayManager {
+    /**
+     * Create a new SecurityOverlayManager
+     * @param debugMode Enable debug mode for troubleshooting
+     */
+    constructor(debugMode = false) {
+        this.COMPONENT_NAME = "SecurityOverlayManager";
+        this.mediator = null;
+        this.overlayElement = null;
+        this.eventBlocker = null;
+        this.overlayTimeout = null;
+        this.domObserver = null;
+        this.currentOptions = null;
+        this.autoRestoreEnabled = false;
+        this.isActive = false;
+        // Store references to global event handlers so they can be removed
+        this.documentWheelHandler = null;
+        this.windowWheelHandler = null;
+        this.documentTouchMoveHandler = null;
+        this.windowTouchMoveHandler = null;
+        // Callbacks
+        this.onElementsRemovedCallbacks = [];
+        this.debugMode = debugMode;
+    }
+    /**
+     * Set the mediator
+     * to communicate with the other components
+     */
+    setMediator(mediator) {
+        this.mediator = mediator;
+        // Subscribe only to general overlay events
+        this.mediator.subscribe(ProtectionEventType.OVERLAY_SHOWN, this.handleOverlayShown.bind(this), {
+            context: this.COMPONENT_NAME,
+        });
+        this.mediator.subscribe(ProtectionEventType.OVERLAY_REMOVED, this.handleOverlayRemoved.bind(this), {
+            context: this.COMPONENT_NAME,
+        });
+        this.mediator.subscribe(ProtectionEventType.OVERLAY_RESTORED, this.handleOverlayRestored.bind(this), {
+            context: this.COMPONENT_NAME,
+        });
+        if (this.debugMode) {
+            console.log("SecurityOverlayManager: Mediator set and subscriptions established");
+        }
+    }
+    /**
+     * Handle overlay shown event
+     */
+    handleOverlayShown(event) {
+        console.log("event received", event);
+        try {
+            if (this.debugMode) {
+                console.log(`SecurityOverlayManager: Received overlay shown event from ${event.source}`, event.data);
+            }
+            const data = event.data;
+            if (!data)
+                return;
+            // If options are provided directly, use them
+            if (data.options) {
+                this.showOverlay(data.options);
+            }
+        }
+        catch (error) {
+            console.error("SecurityOverlayManager: Error handling overlay shown event", error);
+        }
+    }
+    /**
+     * Handle overlay removed event
+     */
+    handleOverlayRemoved(event) {
+        try {
+            if (this.debugMode) {
+                console.log(`SecurityOverlayManager: Received overlay removed event from ${event.source}`, event.data);
+            }
+            this.removeOverlay();
+        }
+        catch (error) {
+            console.error("SecurityOverlayManager: Error handling overlay removed event", error);
+        }
+    }
+    /**
+   * Handle overlay restored event
+   */
+    handleOverlayRestored(event) {
+        try {
+            if (this.debugMode) {
+                console.log(`SecurityOverlayManager: Received overlay restored event from ${event.source}`, event.data);
+            }
+            this.checkAndRestoreOverlay();
+        }
+        catch (error) {
+            console.error("SecurityOverlayManager: Error handling overlay restored event", error);
+        }
+    }
+    /**
+     * Show a security overlay
+     * @param options Options for the overlay
+     * @returns Object containing the created overlay and event blocker elements
+     */
+    showOverlay(options) {
+        if (!isBrowser()) {
+            return { overlay: null, blocker: null };
+        }
+        // Store current options for potential restoration
+        this.currentOptions = { ...options };
+        // Set auto-restore flag
+        this.autoRestoreEnabled = options.autoRestore !== false; // Default to true if not specified
+        this.isActive = true;
+        // Remove any existing overlay first
+        this.removeOverlay(false); // Pass false to prevent disabling autoRestore
+        // Create event blocker if requested
+        if (options.blockEvents) {
+            this.eventBlocker = this.createEventBlocker();
+            document.body.appendChild(this.eventBlocker);
+            if (this.debugMode) {
+                console.log("SecurityOverlayManager: Event blocker created and added to DOM");
+            }
+        }
+        // Create the overlay
+        this.overlayElement = this.createOverlay(options);
+        document.body.appendChild(this.overlayElement);
+        if (this.debugMode) {
+            console.log("SecurityOverlayManager: Overlay created and added to DOM");
+        }
+        // Set up timeout if duration is specified
+        if (options.duration && options.duration > 0) {
+            this.overlayTimeout = window.setTimeout(() => {
+                this.removeOverlay();
+                this.overlayTimeout = null;
+            }, options.duration);
+            if (this.debugMode) {
+                console.log(`SecurityOverlayManager: Overlay will auto-remove after ${options.duration}ms`);
+            }
+        }
+        // Set up observer for auto-restoration if enabled
+        if (this.autoRestoreEnabled) {
+            this.setupObserver();
+        }
+        return {
+            overlay: this.overlayElement,
+            blocker: this.eventBlocker,
+        };
+    }
+    /**
+     * Remove the security overlay and clean up all event listeners
+     * @param disableAutoRestore Whether to disable auto-restoration when removing
+     */
+    removeOverlay(disableAutoRestore = true) {
+        if (!isBrowser())
+            return;
+        // Clear any existing timeout
+        if (this.overlayTimeout !== null) {
+            window.clearTimeout(this.overlayTimeout);
+            this.overlayTimeout = null;
+        }
+        // Stop observer if it exists and if disableAutoRestore is true
+        if (disableAutoRestore && this.domObserver) {
+            this.domObserver.stopObserving();
+            this.domObserver = null;
+        }
+        // Remove overlay
+        if (this.overlayElement && this.overlayElement.parentNode) {
+            this.overlayElement.parentNode.removeChild(this.overlayElement);
+            this.overlayElement = null;
+            if (this.debugMode) {
+                console.log("SecurityOverlayManager: Overlay removed from DOM");
+            }
+        }
+        // Remove event blocker
+        if (this.eventBlocker && this.eventBlocker.parentNode) {
+            this.eventBlocker.parentNode.removeChild(this.eventBlocker);
+            this.eventBlocker = null;
+            if (this.debugMode) {
+                console.log("SecurityOverlayManager: Event blocker removed from DOM");
+            }
+        }
+        // Also try to remove by ID in case references were lost
+        const overlayById = document.getElementById("security-overlay");
+        if (overlayById && overlayById.parentNode) {
+            overlayById.parentNode.removeChild(overlayById);
+        }
+        const blockerById = document.getElementById("security-event-blocker");
+        if (blockerById && blockerById.parentNode) {
+            blockerById.parentNode.removeChild(blockerById);
+        }
+        // Remove global event listeners
+        this.removeGlobalEventListeners();
+        // Clear current options and set isActive to false when intentionally removing the overlay
+        if (disableAutoRestore) {
+            this.currentOptions = null;
+            this.autoRestoreEnabled = false;
+            this.isActive = false;
+        }
+    }
+    /**
+     * Disable auto-restoration of the overlay
+     * This should be called when the condition that triggered the overlay is no longer true
+     */
+    disableAutoRestore() {
+        this.autoRestoreEnabled = false;
+        if (this.domObserver) {
+            this.domObserver.stopObserving();
+            this.domObserver = null;
+        }
+        if (this.debugMode) {
+            console.log("SecurityOverlayManager: Auto-restore disabled");
+        }
+    }
+    /**
+     * Check if the manager is active
+     * This returns true if the overlay is supposed to be shown, regardless of whether it's currently
+     * in the DOM or has been removed by external forces
+     */
+    isOverlayActive() {
+        return this.isActive;
+    }
+    /**
+     * Ensure the overlay is restored if it should be active but isn't displayed
+     * This is useful for external components to check if the overlay should be restored
+     */
+    checkAndRestoreOverlay() {
+        if (this.isActive && this.autoRestoreEnabled && this.currentOptions && !this.doesOverlayExistInDOM()) {
+            if (this.debugMode) {
+                console.log("SecurityOverlayManager: Overlay missing from DOM but should be active, restoring...");
+            }
+            this.showOverlay(this.currentOptions);
+        }
+    }
+    /**
+     * Remove global event listeners that were added to document and window
+     */
+    removeGlobalEventListeners() {
+        if (!isBrowser())
+            return;
+        // Remove document wheel handler
+        if (this.documentWheelHandler) {
+            document.removeEventListener("wheel", this.documentWheelHandler, { capture: true });
+            this.documentWheelHandler = null;
+            if (this.debugMode) {
+                console.log("SecurityOverlayManager: Removed document wheel event listener");
+            }
+        }
+        // Remove window wheel handler
+        if (this.windowWheelHandler) {
+            window.removeEventListener("wheel", this.windowWheelHandler, { capture: true });
+            this.windowWheelHandler = null;
+            if (this.debugMode) {
+                console.log("SecurityOverlayManager: Removed window wheel event listener");
+            }
+        }
+        // Remove document touchmove handler
+        if (this.documentTouchMoveHandler) {
+            document.removeEventListener("touchmove", this.documentTouchMoveHandler, { capture: true });
+            this.documentTouchMoveHandler = null;
+            if (this.debugMode) {
+                console.log("SecurityOverlayManager: Removed document touchmove event listener");
+            }
+        }
+        // Remove window touchmove handler
+        if (this.windowTouchMoveHandler) {
+            window.removeEventListener("touchmove", this.windowTouchMoveHandler, { capture: true });
+            this.windowTouchMoveHandler = null;
+            if (this.debugMode) {
+                console.log("SecurityOverlayManager: Removed window touchmove event listener");
+            }
+        }
+        // Re-enable scrolling on body
+        if (document.body) {
+            document.body.style.overflow = "";
+            document.body.style.position = "";
+            document.body.style.height = "";
+            document.body.style.width = "";
+            document.body.style.top = "";
+            document.body.style.left = "";
+            if (this.debugMode) {
+                console.log("SecurityOverlayManager: Re-enabled scrolling on body");
+            }
+        }
+        // Re-enable scrolling on html
+        const htmlElement = document.documentElement;
+        if (htmlElement) {
+            htmlElement.style.overflow = "";
+            if (this.debugMode) {
+                console.log("SecurityOverlayManager: Re-enabled scrolling on html");
+            }
+        }
+    }
+    /**
+     * Create an overlay element
+     * @param options Options for the overlay
+     * @returns The created overlay element
+     */
+    createOverlay(options) {
+        if (!isBrowser()) {
+            throw new Error("Document is not available");
+        }
+        // Create overlay element
+        const overlay = document.createElement("div");
+        overlay.id = "security-overlay";
+        // Apply styles
+        const styles = {
+            position: "fixed",
+            top: "0",
+            left: "0",
+            width: "100%",
+            height: "100%",
+            backgroundColor: options.backgroundColor || "rgba(220, 38, 38, 0.9)",
+            zIndex: options.zIndex || "2147483647",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            fontFamily: "sans-serif",
+            color: options.textColor || "white",
+            padding: "20px",
+            textAlign: "center",
+            pointerEvents: "auto", // Always allow interaction with the overlay itself
+            ...options.customStyles,
+        };
+        // Apply styles to the overlay
+        Object.entries(styles).forEach(([key, value]) => {
+            if (value !== undefined) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                ;
+                overlay.style[key] = value;
+            }
+        });
+        // Create HTML content
+        let content = "";
+        if (options.title) {
+            content += `<h2 style="font-size: 24px; margin-bottom: 20px;">${options.title}</h2>`;
+        }
+        if (options.message) {
+            content += `<p style="font-size: 16px; margin-bottom: 10px;">${options.message}</p>`;
+        }
+        if (options.secondaryMessage) {
+            content += `<p style="font-size: 16px; margin-top: 10px;">${options.secondaryMessage}</p>`;
+        }
+        if (options.additionalContent) {
+            content += options.additionalContent;
+        }
+        if (options.showCloseButton) {
+            content += `
+        <button id="security-overlay-close" style="margin-top: 20px; padding: 10px 20px; background-color: white; color: black; border: none; border-radius: 4px; cursor: pointer; pointer-events: auto;">
+          ${options.closeButtonText || "Close"}
+        </button>
+      `;
+        }
+        overlay.innerHTML = content;
+        // Add event listener to close button if present
+        if (options.showCloseButton) {
+            setTimeout(() => {
+                const closeButton = document.getElementById("security-overlay-close");
+                if (closeButton) {
+                    closeButton.addEventListener("click", () => {
+                        if (options.onCloseButtonClick) {
+                            options.onCloseButtonClick();
+                        }
+                        else {
+                            this.removeOverlay();
+                        }
+                    });
+                }
+            }, 0);
+        }
+        return overlay;
+    }
+    /**
+     * Create an event blocker that prevents interaction with the page
+     * @returns The created event blocker element
+     */
+    createEventBlocker() {
+        const blocker = document.createElement("div");
+        blocker.id = "security-event-blocker";
+        // Apply styles to make it cover the entire page and block all events
+        blocker.style.position = "fixed";
+        blocker.style.top = "0";
+        blocker.style.left = "0";
+        blocker.style.width = "100%";
+        blocker.style.height = "100%";
+        blocker.style.backgroundColor = "transparent"; // Transparent but will block events
+        blocker.style.zIndex = "2147483646"; // Just below the overlay
+        blocker.style.cursor = "not-allowed"; // Show not-allowed cursor
+        // Add event listeners to block all interactions
+        const blockEvent = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        };
+        // Block all common events
+        const events = [
+            "click",
+            "dblclick",
+            "mousedown",
+            "mouseup",
+            "mousemove",
+            "touchstart",
+            "touchend",
+            "touchmove",
+            "touchcancel",
+            "keydown",
+            "keyup",
+            "keypress",
+            "contextmenu",
+            "selectstart",
+            "dragstart",
+            "wheel", // Add wheel event to block scrolling
+            "scroll", // Add scroll event as well
+        ];
+        events.forEach((eventType) => {
+            blocker.addEventListener(eventType, blockEvent, { capture: true, passive: false });
+        });
+        // Additional handling for wheel events on document and window
+        if (isBrowser()) {
+            // Store references to handlers so they can be removed later
+            this.documentWheelHandler = blockEvent;
+            this.windowWheelHandler = blockEvent;
+            this.documentTouchMoveHandler = blockEvent;
+            this.windowTouchMoveHandler = blockEvent;
+            // Prevent scrolling on the document and window level
+            document.addEventListener("wheel", this.documentWheelHandler, { capture: true, passive: false });
+            window.addEventListener("wheel", this.windowWheelHandler, { capture: true, passive: false });
+            // Also prevent scrolling via touch on mobile
+            document.addEventListener("touchmove", this.documentTouchMoveHandler, { capture: true, passive: false });
+            window.addEventListener("touchmove", this.windowTouchMoveHandler, { capture: true, passive: false });
+            if (this.debugMode) {
+                console.log("SecurityOverlayManager: Added global event listeners to prevent scrolling");
+            }
+        }
+        return blocker;
+    }
+    /**
+     * Set up DOM observer to detect when overlay elements are removed
+     */
+    setupObserver() {
+        if (!isBrowser())
+            return;
+        const elementsToWatch = [];
+        if (this.overlayElement) {
+            elementsToWatch.push(this.overlayElement);
+        }
+        if (this.eventBlocker) {
+            elementsToWatch.push(this.eventBlocker);
+        }
+        if (elementsToWatch.length === 0)
+            return;
+        // Create a handler for element removal
+        const handleElementsRemoved = (removedElements) => {
+            if (this.debugMode) {
+                console.log("SecurityOverlayManager: Overlay elements removed from DOM", removedElements);
+            }
+            // Only restore if auto-restore is enabled
+            if (this.autoRestoreEnabled && this.currentOptions && this.isActive) {
+                if (this.debugMode) {
+                    console.log("SecurityOverlayManager: Auto-restoring overlay");
+                }
+                // Restore the overlay with the same options
+                this.showOverlay(this.currentOptions);
+                // Notify callbacks
+                this.notifyElementsRemovedCallbacks(removedElements);
+            }
+        };
+        // Stop any existing observer
+        if (this.domObserver) {
+            this.domObserver.stopObserving();
+        }
+        this.domObserver = new DomObserver({
+            targetElement: document.body,
+            elementsToWatch,
+            onElementsRemoved: handleElementsRemoved,
+            observeSubtree: true,
+            debugMode: this.debugMode,
+            name: "SecurityOverlayManager",
+        });
+        this.domObserver.startObserving();
+        if (this.debugMode) {
+            console.log("SecurityOverlayManager: DOM observer set up");
+        }
+    }
+    /**
+     * Notify all callbacks when elements are removed
+     */
+    notifyElementsRemovedCallbacks(removedElements) {
+        for (const callback of this.onElementsRemovedCallbacks) {
+            try {
+                callback(removedElements);
+            }
+            catch (error) {
+                console.error("SecurityOverlayManager: Error in elements removed callback:", error);
+            }
+        }
+    }
+    /**
+     * Add a callback to be called when overlay elements are removed
+     * @param callback Callback function
+     */
+    addElementsRemovedCallback(callback) {
+        this.onElementsRemovedCallbacks.push(callback);
+    }
+    /**
+     * Remove a callback
+     * @param callback Callback function to remove
+     */
+    removeElementsRemovedCallback(callback) {
+        this.onElementsRemovedCallbacks = this.onElementsRemovedCallbacks.filter((cb) => cb !== callback);
+    }
+    /**
+     * Check if an overlay is currently displayed
+     * @returns True if an overlay is displayed, false otherwise
+     */
+    isOverlayDisplayed() {
+        return this.overlayElement !== null;
+    }
+    /**
+     * Get the current overlay element
+     * @returns The current overlay element or null if none exists
+     */
+    getOverlayElement() {
+        return this.overlayElement;
+    }
+    /**
+     * Get the current event blocker element
+     * @returns The current event blocker element or null if none exists
+     */
+    getEventBlocker() {
+        return this.eventBlocker;
+    }
+    /**
+     * Check if the overlay exists in the DOM
+     * This is different from isOverlayDisplayed() which checks if the manager has a reference
+     * @returns True if the overlay exists in the DOM, false otherwise
+     */
+    doesOverlayExistInDOM() {
+        if (!isBrowser())
+            return false;
+        const overlayInDOM = document.getElementById("security-overlay") !== null;
+        const blockerInDOM = document.getElementById("security-event-blocker") !== null;
+        // If we have a reference but the element isn't in the DOM, update our reference
+        if (this.overlayElement && !overlayInDOM) {
+            this.overlayElement = null;
+        }
+        if (this.eventBlocker && !blockerInDOM) {
+            this.eventBlocker = null;
+        }
+        return overlayInDOM || blockerInDOM;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "content-security-toolkit",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "dist/index.js",
   "type": "module",
   "types": "dist/index.d.ts",