qa360 2.3.0 → 2.3.2

package/dist/core/crawler/stacked-modals-handler.js

@@ -0,0 +1,429 @@
+/**
+ * Stacked Modals Handler
+ *
+ * P1 - Detection and management of stacked/nested modals
+ *
+ * Supports:
+ * - Detection of stacked modals (multiple overlays)
+ * - Z-index analysis
+ * - Modal type detection (dialog, popover, dropdown)
+ * - Modal hierarchy traversal
+ * - Modal dismissal strategies
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
+ */
+/**
+ * Stacked Modals Handler class
+ */
+export class StackedModalsHandler {
+    /**
+     * Detect all modals on the page
+     */
+    async detectModals(page) {
+        const result = await page.evaluate(() => {
+            const modals = [];
+            const issues = [];
+            // Common modal selectors
+            const modalSelectors = [
+                'dialog',
+                '[role="dialog"]',
+                '[role="alertdialog"]',
+                '[role="menu"]',
+                '[role="listbox"]',
+                '[role="tooltip"]',
+                '.modal',
+                '.dialog',
+                '.popover',
+                '.dropdown-menu',
+                '[data-modal]',
+                '[data-dialog]',
+                '[data-popover]',
+            ];
+            // Find all potential modals
+            const elements = [];
+            for (const selector of modalSelectors) {
+                const found = document.querySelectorAll(selector);
+                found.forEach(el => elements.push(el));
+            }
+            // Check for backdrop overlays
+            const backdrops = document.querySelectorAll('.modal-backdrop, .overlay, [data-backdrop]');
+            if (backdrops.length > 1) {
+                issues.push(`Multiple backdrops detected: ${backdrops.length}`);
+            }
+            // Process each modal
+            for (const element of elements) {
+                // Skip duplicates
+                if (modals.some((m) => m.element === element))
+                    continue;
+                const computed = window.getComputedStyle(element);
+                const isVisible = computed.display !== 'none' &&
+                    computed.visibility !== 'hidden' &&
+                    computed.opacity !== '0';
+                const zIndex = parseInt(computed.zIndex, 10) || 0;
+                const position = computed.position;
+                // Detect modal type
+                let type = 'custom';
+                if (element.tagName === 'DIALOG') {
+                    type = 'dialog';
+                }
+                else if (element.getAttribute('role') === 'dialog' ||
+                    element.getAttribute('role') === 'alertdialog') {
+                    type = 'dialog';
+                }
+                else if (element.classList.contains('modal') ||
+                    element.classList.contains('dialog')) {
+                    type = 'dialog';
+                }
+                else if (element.classList.contains('popover')) {
+                    type = 'popover';
+                }
+                else if (element.classList.contains('dropdown-menu') ||
+                    element.getAttribute('role') === 'menu') {
+                    type = 'dropdown';
+                }
+                else if (element.getAttribute('role') === 'tooltip') {
+                    type = 'tooltip';
+                }
+                else if (element.getAttribute('role') === 'alert') {
+                    type = 'alert';
+                }
+                // Check ARIA attributes
+                const ariaModal = element.getAttribute('aria-modal') === 'true';
+                const ariaLabelledby = element.getAttribute('aria-labelledby') || undefined;
+                const ariaDescribedby = element.getAttribute('aria-describedby') || undefined;
+                const ariaLabel = element.getAttribute('aria-label') || undefined;
+                // Find close buttons
+                const closeButtons = [];
+                const closeSelectors = [
+                    'button[aria-label*="close" i]',
+                    'button[aria-label*="Close" i]',
+                    'button.close',
+                    '.close',
+                    '.modal-close',
+                    '[data-dismiss]',
+                    '[data-close]',
+                ];
+                for (const closeSel of closeSelectors) {
+                    const closeBtn = element.querySelector(closeSel);
+                    if (closeBtn) {
+                        closeButtons.push(closeSel);
+                    }
+                }
+                // Generate unique selector
+                let selector = element.tagName.toLowerCase();
+                if (element.id) {
+                    selector = `#${element.id}`;
+                }
+                else if (element.className) {
+                    const classes = element.className.split(' ').filter((c) => c).slice(0, 2);
+                    if (classes.length > 0) {
+                        selector = `${element.tagName.toLowerCase()}.${classes.join('.')}`;
+                    }
+                }
+                // Check for backdrop/overlay that blocks interaction
+                const hasBackdrop = computed.position === 'fixed' &&
+                    computed.inset !== 'auto' &&
+                    computed.backgroundColor !== 'rgba(0, 0, 0, 0)';
+                modals.push({
+                    element,
+                    selector,
+                    type,
+                    zIndex,
+                    position,
+                    isVisible,
+                    hasBackdrop,
+                    ariaModal,
+                    ariaLabelledby,
+                    ariaDescribedby,
+                    ariaLabel,
+                    closeButtons,
+                });
+            }
+            // Sort by z-index and determine stack position
+            modals.sort((a, b) => a.zIndex - b.zIndex);
+            // Assign stack positions and find relationships
+            modals.forEach((modal, index) => {
+                modal.stackPosition = index;
+                // Find parent (modal below that contains this one)
+                for (let i = index - 1; i >= 0; i--) {
+                    const parent = modals[i];
+                    if (parent.element.contains(modal.element)) {
+                        modal.parent = parent.selector;
+                        parent.children = parent.children || [];
+                        parent.children.push(modal.selector);
+                        break;
+                    }
+                }
+            });
+            // Identify issues
+            const visibleModals = modals.filter((m) => m.isVisible);
+            if (visibleModals.length > 3) {
+                issues.push(`Too many visible modals: ${visibleModals.length}`);
+            }
+            // Check for modals without proper ARIA
+            for (const modal of visibleModals) {
+                if (modal.type === 'dialog' && !modal.ariaModal) {
+                    issues.push(`Modal ${modal.selector} missing aria-modal="true"`);
+                }
+                if (modal.type === 'dialog' && !modal.ariaLabel && !modal.ariaLabelledby) {
+                    issues.push(`Modal ${modal.selector} missing aria-label or aria-labelledby`);
+                }
+            }
+            return {
+                modals: modals.map((m) => ({
+                    selector: m.selector,
+                    type: m.type,
+                    zIndex: m.zIndex,
+                    stackPosition: m.stackPosition,
+                    visible: m.isVisible,
+                    blocksInteraction: m.hasBackdrop,
+                    aria: {
+                        modal: m.ariaModal,
+                        labelledby: m.ariaLabelledby,
+                        describedby: m.ariaDescribedby,
+                        label: m.ariaLabel,
+                    },
+                    parent: m.parent,
+                    children: m.children || [],
+                    closeSelectors: m.closeButtons,
+                })),
+                totalModals: modals.length,
+                visibleModals: visibleModals.length,
+                issues,
+            };
+        });
+        return {
+            totalModals: result.totalModals,
+            visibleModals: result.visibleModals,
+            stack: result.modals,
+            topModal: result.modals[result.modals.length - 1],
+            issues: result.issues,
+        };
+    }
+    /**
+     * Get the top-most (active) modal
+     */
+    async getTopModal(page) {
+        const hierarchy = await this.detectModals(page);
+        return hierarchy.topModal || null;
+    }
+    /**
+     * Wait for a modal to appear
+     */
+    async waitForModal(page, options = {}) {
+        const timeout = options.timeout || 30000;
+        const startTime = Date.now();
+        while (Date.now() - startTime < timeout) {
+            const hierarchy = await this.detectModals(page);
+            for (const modal of hierarchy.stack) {
+                if (!modal.visible)
+                    continue;
+                if (options.type && modal.type !== options.type)
+                    continue;
+                if (options.selector && !modal.selector.includes(options.selector))
+                    continue;
+                if (options.minZIndex && modal.zIndex < options.minZIndex)
+                    continue;
+                return modal;
+            }
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        return null;
+    }
+    /**
+     * Close a modal
+     */
+    async closeModal(page, modal, options = {}) {
+        const selector = typeof modal === 'string' ? modal : modal.selector;
+        const timeout = options.timeout || 5000;
+        if (options.waitFor !== false) {
+            await page.waitForSelector(selector, { state: 'visible', timeout });
+        }
+        // Try different close methods
+        const closeMethods = [
+            // Try ESC key
+            async () => {
+                await page.keyboard.press('Escape');
+                await page.waitForTimeout(500);
+            },
+            // Try close button
+            async () => {
+                const closeBtn = await page.locator(`${selector} button[aria-label*="close" i], ${selector} .close, ${selector} [data-dismiss]`).first();
+                if (await closeBtn.count() > 0) {
+                    await closeBtn.click();
+                    await page.waitForTimeout(500);
+                    return true;
+                }
+                return false;
+            },
+            // Try clicking backdrop
+            async () => {
+                const backdrop = await page.locator('.modal-backdrop, .overlay, [data-backdrop]').first();
+                if (await backdrop.count() > 0) {
+                    await backdrop.click({ position: { x: 10, y: 10 } });
+                    await page.waitForTimeout(500);
+                    return true;
+                }
+                return false;
+            },
+        ];
+        for (const method of closeMethods) {
+            try {
+                const result = await method();
+                if (result === true) {
+                    // Check if modal is now hidden
+                    const isVisible = await page.locator(selector).isVisible().catch(() => false);
+                    if (!isVisible) {
+                        return true;
+                    }
+                }
+            }
+            catch {
+                // Try next method
+            }
+        }
+        return false;
+    }
+    /**
+     * Close all modals from top to bottom
+     */
+    async closeAllModals(page, options = {}) {
+        let closed = 0;
+        let hierarchy = await this.detectModals(page);
+        while (hierarchy.visibleModals > 0) {
+            const topModal = hierarchy.topModal;
+            if (!topModal)
+                break;
+            const success = await this.closeModal(page, topModal, options);
+            if (!success)
+                break;
+            closed++;
+            hierarchy = await this.detectModals(page);
+            // Safety check
+            if (closed > 10)
+                break;
+        }
+        return closed;
+    }
+    /**
+     * Get modal hierarchy for debugging
+     */
+    async getModalTree(page) {
+        const hierarchy = await this.detectModals(page);
+        const lines = [
+            `Modal Stack (${hierarchy.visibleModals}/${hierarchy.totalModals} visible)`,
+            '',
+        ];
+        for (const modal of hierarchy.stack) {
+            const indent = '  '.repeat(modal.stackPosition);
+            const status = modal.visible ? '✓' : '✗';
+            const typeIcon = {
+                dialog: '⬚',
+                popover: '◐',
+                dropdown: '▼',
+                tooltip: 'ⓘ',
+                alert: '⚠',
+                custom: '○',
+            }[modal.type];
+            lines.push(`${indent}${status} ${typeIcon} ${modal.selector} (z-index: ${modal.zIndex})`);
+            if (modal.parent) {
+                lines.push(`${indent}  └─ parent: ${modal.parent}`);
+            }
+            if (modal.closeSelectors.length > 0) {
+                lines.push(`${indent}  └─ close: ${modal.closeSelectors[0]}`);
+            }
+        }
+        if (hierarchy.issues.length > 0) {
+            lines.push('');
+            lines.push('Issues:');
+            for (const issue of hierarchy.issues) {
+                lines.push(`  ⚠ ${issue}`);
+            }
+        }
+        return lines.join('\n');
+    }
+    /**
+     * Verify modal accessibility
+     */
+    async verifyAccessibility(page, modal) {
+        const selector = typeof modal === 'string' ? modal : modal.selector;
+        const issues = [];
+        const result = await page.evaluate((sel) => {
+            const element = document.querySelector(sel);
+            if (!element)
+                return { found: false };
+            const computed = window.getComputedStyle(element);
+            return {
+                found: true,
+                hasAriaModal: element.getAttribute('aria-modal') === 'true',
+                hasAriaLabel: !!element.getAttribute('aria-label'),
+                hasAriaLabelledby: !!element.getAttribute('aria-labelledby'),
+                role: element.getAttribute('role'),
+                tagName: element.tagName,
+                display: computed.display,
+                visible: computed.display !== 'none' &&
+                    computed.visibility !== 'hidden' &&
+                    computed.opacity !== '0',
+                // Check for focus trap
+                focusableElements: element.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').length,
+            };
+        }, selector);
+        if (!result.found) {
+            return { valid: false, issues: ['Element not found'] };
+        }
+        // Check ARIA attributes
+        if (result.tagName !== 'DIALOG' && result.role !== 'dialog' && result.role !== 'alertdialog') {
+            issues.push(`Element is not a dialog (role: ${result.role})`);
+        }
+        if (!result.hasAriaModal && result.tagName !== 'DIALOG') {
+            issues.push('Missing aria-modal="true" attribute');
+        }
+        if (!result.hasAriaLabel && !result.hasAriaLabelledby) {
+            issues.push('Missing aria-label or aria-labelledby attribute');
+        }
+        if (result.focusableElements === 0) {
+            issues.push('No focusable elements found in modal');
+        }
+        return {
+            valid: issues.length === 0,
+            issues,
+        };
+    }
+    /**
+     * Get modal statistics
+     */
+    async getStatistics(page) {
+        const hierarchy = await this.detectModals(page);
+        const byType = {};
+        let totalZIndex = 0;
+        let maxStack = 0;
+        for (const modal of hierarchy.stack) {
+            byType[modal.type] = (byType[modal.type] || 0) + 1;
+            totalZIndex += modal.zIndex;
+            maxStack = Math.max(maxStack, modal.stackPosition);
+        }
+        const avgZIndex = hierarchy.stack.length > 0
+            ? totalZIndex / hierarchy.stack.length
+            : 0;
+        // Calculate accessibility score
+        let accessibilityScore = 100;
+        for (const issue of hierarchy.issues) {
+            if (issue.includes('aria') || issue.includes('label')) {
+                accessibilityScore -= 10;
+            }
+        }
+        return {
+            byType,
+            averageZIndex: Math.round(avgZIndex),
+            maxStackDepth: maxStack + 1,
+            accessibilityScore: Math.max(0, accessibilityScore),
+        };
+    }
+}
+/**
+ * Factory function to create Stacked Modals Handler
+ */
+export function createStackedModalsHandler() {
+    return new StackedModalsHandler();
+}
+export default StackedModalsHandler;

package/dist/core/crawler/trusted-types-handler.d.ts

@@ -0,0 +1,149 @@
+/**
+ * Trusted Types Handler
+ *
+ * P1 - Trusted Types API for XSS prevention
+ *
+ * Supports:
+ * - Trusted Types detection
+ * - CSP trusted-types directive parsing
+ * - Trusted type policy creation
+ * - XSS sink monitoring
+ * - Trusted types violation tracking
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
+ */
+export interface TrustedTypesConfig {
+    /** CSP trusted-types directive values */
+    directiveValues: string[];
+    /** Policy names */
+    policyNames: string[];
+    /** 'none' is set (no policies allowed) */
+    allowsNone: boolean;
+    /** '*' is set (any policy allowed) */
+    allowsAll: boolean;
+}
+export interface TrustedTypePolicy {
+    /** Policy name */
+    name: string;
+    /** createHTML function */
+    createHTML?: (input: string) => any;
+    /** createScriptURL function */
+    createScriptURL?: (input: string) => any;
+    /** createScript function */
+    createScript?: (input: string) => any;
+}
+export interface XSSSink {
+    /** Sink type (e.g., 'innerHTML', 'location') */
+    type: string;
+    /** Element or object */
+    element?: string;
+    /** Current value */
+    value?: string;
+    /** Whether it's a known XSS sink */
+    isXSSSink: boolean;
+}
+export interface TrustedTypesReport {
+    /** Trusted Types supported */
+    supported: boolean;
+    /** CSP directive config */
+    config: TrustedTypesConfig;
+    /** Existing policies */
+    policies: string[];
+    /** XSS sinks detected */
+    xssSinks: XSSSink[];
+    /** Violations collected */
+    violations: Array<{
+        message: string;
+        sink: string;
+        value: string;
+    }>;
+    /** Security score (0-100) */
+    securityScore: number;
+    /** Recommendations */
+    recommendations: string[];
+}
+/**
+ * Trusted Types Handler class
+ */
+export declare class TrustedTypesHandler {
+    private page;
+    private violations;
+    constructor(page: any);
+    /**
+     * Check if Trusted Types is supported
+     */
+    isSupported(): Promise<boolean>;
+    /**
+     * Get Trusted Types CSP directive
+     */
+    getTrustedTypesDirective(): Promise<string | null>;
+    /**
+     * Parse Trusted Types CSP directive
+     */
+    parseTrustedTypesDirective(directive: string | null): TrustedTypesConfig;
+    /**
+     * Get existing Trusted Type policies
+     */
+    getExistingPolicies(): Promise<string[]>;
+    /**
+     * Detect XSS sinks in the page
+     */
+    detectXSSSinks(): Promise<XSSSink[]>;
+    /**
+     * Create a test Trusted Type policy
+     */
+    createTestPolicy(policyName: string): Promise<boolean>;
+    /**
+     * Test if a sink requires Trusted Type
+     */
+    testSinkRequiresTrustedType(sinkType: 'innerHTML' | 'outerHTML' | 'src'): Promise<boolean>;
+    /**
+     * Setup violation monitoring
+     */
+    setupViolationMonitoring(): Promise<void>;
+    /**
+     * Get collected violations
+     */
+    getViolations(): Array<{
+        message: string;
+        sink: string;
+        value: string;
+    }>;
+    /**
+     * Clear violations
+     */
+    clearViolations(): void;
+    /**
+     * Generate full Trusted Types report
+     */
+    generateReport(): Promise<TrustedTypesReport>;
+    /**
+     * Validate Trusted Types configuration
+     */
+    validate(): Promise<{
+        valid: boolean;
+        errors: string[];
+        warnings: string[];
+    }>;
+    /**
+     * Generate recommended CSP snippet for Trusted Types
+     */
+    generateRecommendedCSP(policyNames?: string[], requireTrustedTypesFor?: string[]): string;
+    /**
+     * Test if a string passes Trusted Types validation
+     */
+    testTrustedString(policyName: string, input: string, type?: 'createHTML' | 'createScriptURL' | 'createScript'): Promise<{
+        success: boolean;
+        result?: string;
+        error?: string;
+    }>;
+    /**
+     * Get documentation URL
+     */
+    getDocumentation(): string;
+}
+/**
+ * Factory function to create Trusted Types Handler
+ */
+export declare function createTrustedTypesHandler(page: any): TrustedTypesHandler;
+export default TrustedTypesHandler;