@readium/navigator 2.2.8 → 2.3.0

package/src/protection/DevToolsDetector.ts

@@ -0,0 +1,290 @@
+import { sML } from "../helpers/sML";
+import { WorkerConsole } from "./utils/WorkerConsole";
+import { log, table, clear } from "./utils/console";
+import { isBrave } from "./utils/platform";
+import { match } from "./utils/match";
+
+export interface DevToolsDetectorOptions {
+    /** Callback when Developer Tools are detected as open */
+    onDetected?: () => void;
+    /** Callback when Developer Tools are detected as closed */
+    onClosed?: () => void;
+    /** Detection interval in milliseconds (default: 1000) */
+    interval?: number;
+    /** Enable debugger-based detection (fallback, impacts UX) */
+    enableDebuggerDetection?: boolean;
+}
+
+export class DevToolsDetector {
+    private options: Required<DevToolsDetectorOptions>;
+    private isOpen = false;
+    private intervalId?: number;
+    private checkCount = 0;
+    private maxChecks = 10;
+    private maxPrintTime = 0;
+    private largeObjectArray: Record<string, string>[] | null = null;
+    private workerConsole?: WorkerConsole;
+
+    constructor(options: DevToolsDetectorOptions = {}) {
+        this.options = {
+            onDetected: options.onDetected || (() => {}),
+            onClosed: options.onClosed || (() => {}),
+            interval: options.interval || 1000,
+            enableDebuggerDetection: options.enableDebuggerDetection || false
+        };
+
+        // Initialize Web Worker for console operations (skip Firefox for now as it will fail)
+        if (!sML.UA.Firefox) {
+            try {
+                const blob = new Blob([WorkerConsole.workerScript], { type: 'application/javascript' });
+                const blobUrl = URL.createObjectURL(blob);
+                const worker = new Worker(blobUrl);
+                this.workerConsole = new WorkerConsole(worker, blobUrl);
+            } catch (error) {
+                // Fallback to regular console if Worker creation fails
+                console.warn('Failed to create Web Worker for DevTools detection:', error);
+            }
+        }
+
+        this.startDetection();
+    }
+
+    /**
+     * Create large object array for performance testing
+     */
+    private createLargeObjectArray(): Record<string, string>[] {
+        const largeObject: Record<string, string> = {};
+        for (let i = 0; i < 500; i++) {
+            largeObject[`${i}`] = `${i}`;
+        }
+        
+        const largeObjectArray: Record<string, string>[] = [];
+        for (let i = 0; i < 50; i++) {
+            largeObjectArray.push(largeObject);
+        }
+        
+        return largeObjectArray;
+    }
+
+    /**
+     * Get cached large object array
+     */
+    private getLargeObjectArray(): Record<string, string>[] {
+        if (this.largeObjectArray === null) {
+            this.largeObjectArray = this.createLargeObjectArray();
+        }
+        return this.largeObjectArray;
+    }
+
+    /**
+     * Performance-based detection using console.table timing
+     */
+    private async calcTablePrintTime(): Promise<number> {
+        const largeObjectArray = this.getLargeObjectArray();
+        
+        if (this.workerConsole) {
+            try {
+                const result = await this.workerConsole.table(largeObjectArray);
+                return result.time;
+            } catch (e) {
+                // Fallback to regular console
+                const start = performance.now();
+                table(largeObjectArray);
+                return performance.now() - start;
+            }
+        } else {
+            // Fallback to cached console methods
+            const start = performance.now();
+            table(largeObjectArray);
+            return performance.now() - start;
+        }
+    }
+
+    /**
+     * Performance-based detection using console.log timing
+     */
+    private async calcLogPrintTime(): Promise<number> {
+        const largeObjectArray = this.getLargeObjectArray();
+        
+        if (this.workerConsole) {
+            const result = await this.workerConsole.log(largeObjectArray);
+            return result.time;
+        } else {
+            // Fallback to cached console methods
+            const start = performance.now();
+            log(largeObjectArray);
+            return performance.now() - start;
+        }
+    }
+
+    /**
+     * Check if performance-based detection is enabled for current browser
+     */
+    private isPerformanceDetectionEnabled(): boolean {
+        return match({
+            includes: [
+                () => !!sML.UA.Chrome,
+                () => !!sML.UA.Chromium, 
+                () => !!sML.UA.Safari,
+                () => !!sML.UA.Firefox
+            ],
+            excludes: []
+        });
+    }
+
+    /**
+     * Check if debugger detection is enabled for current browser
+     */
+    private isDebuggerDetectionEnabled(): boolean {
+        // Only enable debugger detection if explicitly enabled in options
+        // Note: We can't check for Brave here since isBrave() is async
+        // and this method needs to be synchronous
+        return this.options.enableDebuggerDetection;
+    }
+
+    /**
+     * Performance-based detection using large object timing differences
+     */
+    private async checkPerformanceBased(): Promise<boolean> {
+        if (!this.isPerformanceDetectionEnabled()) {
+            return false;
+        }
+
+        const tablePrintTime = await this.calcTablePrintTime();
+        const logPrintTime = Math.max(await this.calcLogPrintTime(), await this.calcLogPrintTime());
+        this.maxPrintTime = Math.max(this.maxPrintTime, logPrintTime);
+
+        if (this.workerConsole) {
+            await this.workerConsole.clear();
+        } else {
+            clear();
+        }
+
+        if (tablePrintTime === 0) return false;
+        if (this.maxPrintTime === 0) {
+            if (await isBrave()) {
+                return true;
+            }
+            return false;
+        }
+
+        return tablePrintTime > this.maxPrintTime * 10;
+    }
+
+    /**
+     * Debugger-based detection (fallback method)
+     * WARNING: This method impacts user experience
+     */
+    private async checkDebuggerBased(): Promise<boolean> {
+        if (!this.isDebuggerDetectionEnabled()) {
+            return false;
+        }
+
+        // Skip debugger detection in Brave (has anti-fingerprinting measures)
+        if (await isBrave()) {
+            return false;
+        }
+
+        const startTime = performance.now();
+
+        try {
+            (() => {}).constructor('debugger')();
+        } catch {
+            debugger;
+        }
+
+        return performance.now() - startTime > 100;
+    }
+
+    /**
+     * Main detection method combining multiple approaches
+     * Prioritizes performance-based detection
+     */
+    private async detectDevTools(): Promise<boolean> {
+        // Primary method: Performance-based detection (from original library)
+        const performanceResult = await this.checkPerformanceBased();
+        
+        if (performanceResult) {
+            return true;
+        }
+
+        // Fallback method: Debugger-based (only if enabled)
+        if (this.options.enableDebuggerDetection && this.checkCount >= this.maxChecks) {
+            const debuggerResult = await this.checkDebuggerBased();
+            return debuggerResult;
+        }
+
+        return false;
+    }
+
+    /**
+     * Start continuous detection monitoring
+     */
+    private startDetection() {
+        this.intervalId = window.setInterval(async () => {
+            this.checkCount++;
+            const currentlyOpen = await this.detectDevTools();
+
+            if (currentlyOpen !== this.isOpen) {
+                this.isOpen = currentlyOpen;
+                
+                if (currentlyOpen) {
+                    this.options.onDetected();
+                } else {
+                    this.options.onClosed();
+                }
+            }
+
+            // Reset check count periodically to avoid excessive debugger usage
+            if (this.checkCount > this.maxChecks * 2) {
+                this.checkCount = 0;
+            }
+        }, this.options.interval);
+
+        // Cleanup on page unload
+        window.addEventListener('beforeunload', () => this.destroy());
+    }
+
+    /**
+     * Get current DevTools state
+     */
+    public isDevToolsOpen(): boolean {
+        return this.isOpen;
+    }
+
+    /**
+     * Force an immediate check
+     */
+    public async checkNow(): Promise<boolean> {
+        const wasOpen = this.isOpen;
+        this.isOpen = await this.detectDevTools();
+        
+        if (this.isOpen !== wasOpen) {
+            if (this.isOpen) {
+                this.options.onDetected();
+            } else {
+                this.options.onClosed();
+            }
+        }
+        
+        return this.isOpen;
+    }
+
+    /**
+     * Stop detection and cleanup resources
+     */
+    public destroy() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = undefined;
+        }
+        
+        // Cleanup Web Worker
+        if (this.workerConsole) {
+            this.workerConsole.destroy();
+        }
+        
+        this.isOpen = false;
+        this.checkCount = 0;
+    }
+}

package/src/protection/IframeEmbeddingDetector.ts

@@ -0,0 +1,73 @@
+export interface IframeEmbeddingDetectorOptions {
+    /** Callback when iframe embedding is detected */
+    onDetected?: (isCrossOrigin: boolean) => void;
+}
+
+export class IframeEmbeddingDetector {
+    private options: IframeEmbeddingDetectorOptions;
+    private observer?: MutationObserver;
+    private detected = false;
+
+    constructor(options: IframeEmbeddingDetectorOptions) {
+        if (!options.onDetected) {
+            throw new Error('onDetected callback is required');
+        }
+        
+        this.options = options;
+        this.setupDetection();
+    }
+
+    private isIframed(): { isEmbedded: boolean; isCrossOrigin: boolean } {
+        try {
+            // If we can access top, check if we're in an iframe
+            const isEmbedded = window.self !== window.top;
+            if (!isEmbedded) {
+                return { isEmbedded: false, isCrossOrigin: false };
+            }
+            
+            // Try to access top's location - will throw if cross-origin
+            // @ts-ignore - We know this might throw
+            const isCrossOrigin = !window.top.location.href;
+            return { isEmbedded: true, isCrossOrigin };
+        } catch (e) {
+            // If we can't access top due to same-origin policy, it's cross-origin
+            return { isEmbedded: true, isCrossOrigin: true };
+        }
+    }
+
+    private setupDetection() {
+        const { isEmbedded, isCrossOrigin } = this.isIframed();
+        if (isEmbedded) {
+            this.handleDetected(isCrossOrigin);
+            return;
+        }
+
+        // Set up a listener for future checks in case the page is embedded later
+        this.observer = new MutationObserver(() => {
+            const { isEmbedded, isCrossOrigin } = this.isIframed();
+            if (isEmbedded && !this.detected) {
+                this.handleDetected(isCrossOrigin);
+                this.observer?.disconnect(); // No need to observe further
+            }
+        });
+
+        this.observer.observe(document.documentElement, {
+            childList: true,
+            subtree: true,
+            attributes: true
+        });
+
+        window.addEventListener("unload", () => this.destroy());
+    }
+
+    private handleDetected(isCrossOrigin: boolean) {
+        this.detected = true;
+        this.options.onDetected?.(isCrossOrigin);
+    }
+
+    public destroy() {
+        this.observer?.disconnect();
+        this.observer = undefined;
+        this.detected = false;
+    }
+}

package/src/protection/NavigatorProtector.ts

@@ -0,0 +1,95 @@
+import { AutomationDetector } from "./AutomationDetector";
+import { DevToolsDetector } from "./DevToolsDetector";
+import { IframeEmbeddingDetector } from "./IframeEmbeddingDetector";
+import { PrintProtector } from "./PrintProtector";
+import { ContextMenuProtector } from "./ContextMenuProtector";
+import { ContextMenuEvent } from "@readium/navigator-html-injectables";
+import { IContentProtectionConfig } from "../Navigator";
+
+export const NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT = "readium:navigator:suspiciousActivity";
+
+export class NavigatorProtector {
+    private automationDetector?: AutomationDetector;
+    private devToolsDetector?: DevToolsDetector;
+    private iframeEmbeddingDetector?: IframeEmbeddingDetector;
+    private printProtector?: PrintProtector;
+    private contextMenuProtector?: ContextMenuProtector;
+
+    private dispatchSuspiciousActivity(type: string, detail: Record<string, unknown>) {
+        const event = new CustomEvent(NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT, {
+            detail: {
+                type,
+                timestamp: Date.now(),
+                ...detail
+            }
+        });
+        window.dispatchEvent(event);
+    }
+
+    constructor(
+        config: IContentProtectionConfig = {}
+    ) {
+        // Enable DevTools detection if explicitly enabled in config
+        if (config.monitorDevTools) {
+            this.devToolsDetector = new DevToolsDetector({
+                onDetected: () => {
+                    this.dispatchSuspiciousActivity("developer_tools", {
+                        targetFrameSrc: "",
+                        key: "",
+                        code: "",
+                        keyCode: -1,
+                        ctrlKey: false,
+                        altKey: false,
+                        shiftKey: false,
+                        metaKey: false
+                    });
+                }
+            });
+        }
+
+        // Enable automation detection if explicitly enabled in config
+        if (config.checkAutomation) {
+            this.automationDetector = new AutomationDetector({
+                onDetected: (tool: string) => {
+                    this.dispatchSuspiciousActivity("automation_detected", { tool });
+                }
+            });
+        }
+        
+        // Enable iframe embedding detection if explicitly enabled in config
+        if (config.checkIFrameEmbedding) {
+            this.iframeEmbeddingDetector = new IframeEmbeddingDetector({
+                onDetected: (isCrossOrigin: boolean) => {
+                    this.dispatchSuspiciousActivity("iframe_embedding_detected", { isCrossOrigin });
+                }
+            });
+        }
+
+        // Enable print protection if configured
+        if (config.protectPrinting?.disable) {
+            this.printProtector = new PrintProtector({
+                ...config.protectPrinting,
+                onPrintAttempt: () => {
+                    this.dispatchSuspiciousActivity("print", {});
+                }
+            });
+        }
+        
+        // Enable context menu protection if configured
+        if (config.disableContextMenu) {
+            this.contextMenuProtector = new ContextMenuProtector({
+                onContextMenuBlocked: (event: ContextMenuEvent) => {
+                    this.dispatchSuspiciousActivity("context_menu", event as unknown as Record<string, unknown>);
+                }
+            });
+        }
+    }
+
+    public destroy() {
+        this.automationDetector?.destroy();
+        this.devToolsDetector?.destroy();
+        this.iframeEmbeddingDetector?.destroy();
+        this.printProtector?.destroy();
+        this.contextMenuProtector?.destroy();
+    }
+}

package/src/protection/PrintProtector.ts

@@ -0,0 +1,58 @@
+export interface NavigatorPrintProtectionConfig {
+    disable?: boolean;
+    watermark?: string;
+    onPrintAttempt?: () => void;
+}
+
+export class PrintProtector {
+    private styleElement: HTMLStyleElement | null = null;
+    private beforePrintHandler: ((e: Event) => void) | null = null;
+    private onPrintAttempt?: () => void;
+
+    constructor(config: NavigatorPrintProtectionConfig = {}) {
+        this.onPrintAttempt = config.onPrintAttempt;
+        if (config.disable) {
+            this.setupPrintProtection(config.watermark);
+        }
+    }
+
+    private setupPrintProtection(watermark?: string) {
+        const style = document.createElement("style");
+        style.textContent = `
+            @media print {
+                body * {
+                    display: none !important;
+                }
+                body::after {
+                    content: "${watermark || 'Printing has been disabled'}";
+                    font-size: 200%;
+                    display: block;
+                    text-align: center;
+                    margin-top: 50vh;
+                    transform: translateY(-50%);
+                }
+            }
+        `;
+        document.head.appendChild(style);
+        this.styleElement = style;
+
+        this.beforePrintHandler = (e: Event) => {
+            e.preventDefault();
+            this.onPrintAttempt?.();
+            return false;
+        };
+        window.addEventListener("beforeprint", this.beforePrintHandler);
+    }
+
+    public destroy() {
+        if (this.beforePrintHandler) {
+            window.removeEventListener("beforeprint", this.beforePrintHandler);
+            this.beforePrintHandler = null;
+        }
+        
+        if (this.styleElement?.parentNode) {
+            this.styleElement.parentNode.removeChild(this.styleElement);
+            this.styleElement = null;
+        }
+    }
+}

package/src/protection/utils/WorkerConsole.ts

@@ -0,0 +1,84 @@
+let idCounter = 0;
+
+function getId(): number {
+  return ++idCounter;
+}
+
+const workerScript = `
+onmessage = function(event) {
+  var action = event.data;
+  var startTime = performance.now()
+
+  console[action.type](...action.payload);
+  postMessage({
+    id: action.id,
+    time: performance.now() - startTime
+  })
+}
+`;
+
+export type WorkerConsoleMethod<Args extends any[]> = (
+  ...args: Args
+) => Promise<{ time: number }>;
+
+export class WorkerConsole {
+  static workerScript = workerScript;
+
+  private readonly worker: Worker;
+  private readonly blobUrl: string;
+  private callbacks: Map<number, (data: { time: number }) => void> = new Map();
+
+  readonly log: WorkerConsoleMethod<Parameters<Console['log']>>;
+  readonly table: WorkerConsoleMethod<Parameters<Console['table']>>;
+  readonly clear: WorkerConsoleMethod<Parameters<Console['clear']>>;
+
+  constructor(worker: Worker, blobUrl: string) {
+    this.worker = worker;
+    this.blobUrl = blobUrl;
+
+    this.worker.onmessage = (event) => {
+      const action = event.data;
+      const id = action.id;
+      const callback = this.callbacks.get(action.id);
+      if (callback) {
+        callback({
+          time: action.time,
+        });
+        this.callbacks.delete(id);
+      }
+    };
+
+    this.log = (...args) => {
+      return this.send('log', ...args);
+    };
+    this.table = (...args) => {
+      return this.send('table', ...args);
+    };
+    this.clear = (...args) => {
+      return this.send('clear', ...args);
+    };
+  }
+
+  private async send(type: string, ...messages: any[]) {
+    const id = getId();
+    return new Promise<{ time: number }>((resolve, reject) => {
+      this.callbacks.set(id, resolve);
+
+      this.worker.postMessage({
+        id,
+        type,
+        payload: messages,
+      });
+
+      setTimeout(() => {
+        reject(new Error('timeout'));
+        this.callbacks.delete(id);
+      }, 2000);
+    });
+  }
+
+  public destroy() {
+    this.worker.terminate();
+    URL.revokeObjectURL(this.blobUrl);
+  }
+}

package/src/protection/utils/console.ts

@@ -0,0 +1,16 @@
+/**
+ * Cache console methods to prevent third-party code from hooking them
+ */
+
+function cacheConsoleMethod<K extends keyof Console>(name: K): Console[K] {
+    if (typeof window !== 'undefined' && console) {
+        return console[name];
+    }
+
+    // Fallback for non-browser environments
+    return (..._args: any[]) => {};
+}
+
+export const log = cacheConsoleMethod('log');
+export const table = cacheConsoleMethod('table');
+export const clear = cacheConsoleMethod('clear');

package/src/protection/utils/match.ts

@@ -0,0 +1,18 @@
+/**
+ * Match utilities for browser compatibility checking
+ */
+
+export interface MatchOptions {
+    includes: (() => boolean)[];
+    excludes: (() => boolean)[];
+}
+
+export function match(options: MatchOptions): boolean {
+    // Check if any exclude condition is true
+    if (options.excludes.some(condition => condition())) {
+        return false;
+    }
+    
+    // Check if any include condition is true
+    return options.includes.some(condition => condition());
+}

package/src/protection/utils/platform.ts

@@ -0,0 +1,22 @@
+/**
+ * Platform detection utilities
+ */
+
+export async function isBrave(): Promise<boolean> {
+    // Use native Brave API if available (most reliable)
+    if (typeof navigator !== 'undefined' && (navigator as any).brave && (navigator as any).brave.isBrave) {
+        try {
+            return await Promise.race([
+                (navigator as any).brave.isBrave(),
+                new Promise(resolve => setTimeout(() => resolve(false), 1000))
+            ]);
+        } catch (e) {
+            // API call failed, but we know Brave is available
+            return true;
+        }
+    }
+
+    // Fallback: only when native API doesn't exist at all
+    // If we're not sure, return false to avoid false positives
+    return false;
+}