@readium/navigator-html-injectables 2.2.5 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator-html-injectables",
-  "version": "2.2.5",
+  "version": "2.3.0",
   "type": "module",
   "description": "An embeddable solution for connecting frames of HTML publications with a Readium Navigator",
   "author": "readium",

package/src/comms/keys.ts

@@ -16,8 +16,11 @@ export type CommsEventKey =
     "progress" |
     "first_visible_locator" |
     "text_selected" |
+    "context_menu" |
     "media_play" |
-    "media_pause";
+    "media_pause" |
+    "content_protection" |
+    "keyboard_peripherals";
 ;
 
 export type CommsCommandKey =
@@ -42,5 +45,21 @@ export type CommsCommandKey =
     "focus" |
     "activate" |
     "shake" |
-    "force_webkit_recalc";
-;
+    "force_webkit_recalc" |
+    "peripherals_protection" |
+    "keyboard_peripherals" |
+    "scroll_protection" |
+    "print_protection";
+;
+
+export type SuspiciousActivityType = 
+    "developer_tools" |
+    "select_all" |
+    "save" |
+    "suspicious_selection" |
+    "bulk_copy" |
+    "suspicious_scrolling" |
+    "suspicious_snapping" |
+    "drag_detected" |
+    "drop_detected" |
+    "print";

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './comms';
 export * from './modules';
-export * from './Loader';
+export * from './Loader';
+export * from './protection';

package/src/modules/ModuleLibrary.ts

@@ -7,6 +7,7 @@ import { ReflowableSetup } from "./setup/ReflowableSetup";
 import { FixedSetup } from "./setup/FixedSetup";
 import { Decorator } from "./Decorator";
 import { WebPubSetup } from "./setup/WebPubSetup";
+import { PrintProtector } from "../protection/PrintProtector";
 
 // All the module names. TODO: Come up with a better way of collecting these in a way TS will recognize
 export type ModuleName =
@@ -19,13 +20,15 @@ export type ModuleName =
     "decorator" |
     "reflowable_setup" |
     "peripherals" |
-    "webpub_setup";
+    "webpub_setup" |
+    "print_protection";
 
 // Modules that are valid for FXL publications
 export const FXLModules: ModuleName[] = [
     "fixed_setup",
     "decorator",
-    "peripherals"
+    "peripherals",
+    "print_protection"
 ];
 
 // Modules that are valid for reflowable publications
@@ -34,7 +37,8 @@ export const ReflowableModules: ModuleName[] = [
     "decorator",
     "peripherals",
     "column_snapper",
-    "scroll_snapper"
+    "scroll_snapper",
+    "print_protection"
 ];
 
 // Modules that are valid for WebPub publications (simple scroll-based)
@@ -42,7 +46,8 @@ export const WebPubModules: ModuleName[] = [
     "webpub_setup",
     "webpub_snapper",
     "decorator",
-    "peripherals"
+    "peripherals",
+    "print_protection"
 ];
 
 export const ModuleLibrary = new Map<string, ModuleDerived>([
@@ -55,4 +60,5 @@ export const ModuleLibrary = new Map<string, ModuleDerived>([
     Decorator,
     ColumnSnapper,
     ScrollSnapper,
+    PrintProtector
 ].map(m => [m.moduleName, m])); // Turn module list into K/V list for quick access by name

package/src/modules/Peripherals.ts

@@ -1,6 +1,20 @@
 import { Comms } from "../comms/comms";
 import { Module } from "./Module";
 import { ReadiumWindow, nearestInteractiveElement } from "../helpers/dom";
+import { BulkCopyProtector, BulkCopyProtectionOptions } from "../protection/BulkCopyProtector";
+import { SelectionAnalyzer, SelectionAnalyzerOptions } from "../protection/SelectionAnalyzer";
+import { 
+    KeyboardPeripheral 
+} from "../protection";
+import { SuspiciousActivityType } from "../comms";
+import { BULK_COPY_CONFIG, SELECTION_ANALYZER_CONFIG } from "../protection/config";
+import { 
+    KeyCombinationManager, 
+    ActivityEventDispatcher,
+    KeyboardPeripheralEvent
+} from "../protection/KeyCombinationManager";
+import { SuspiciousScrollingEvent } from "./snapper/ScrollSnapper";
+import { SuspiciousSnappingEvent } from "./snapper/ColumnSnapper";
 
 export interface FrameClickEvent {
     defaultPrevented: boolean;
@@ -22,12 +36,363 @@ export interface BasicTextSelection {
     targetFrameSrc: string;
 }
 
+export interface BaseSuspiciousActivityEvent {
+    type: SuspiciousActivityType;
+    timestamp: number;
+    targetFrameSrc: string;
+}
+
+// Common interface for all keyboard-related events
+export interface KeyboardEventData {
+    key: string;
+    code: string;
+    keyCode: number;
+    ctrlKey: boolean;
+    altKey: boolean;
+    shiftKey: boolean;
+    metaKey: boolean;
+}
+
+// Base interface for keyboard peripheral events
+export interface BaseKeyboardPeripheralEvent {
+    type: string;
+    timestamp: number;
+    targetFrameSrc: string;
+    selectedText?: Omit<BasicTextSelection, "targetFrameSrc">;
+}
+
+export interface DeveloperToolsEvent extends BaseSuspiciousActivityEvent, KeyboardEventData {
+    type: "developer_tools";
+}
+
+export interface SelectAllEvent extends BaseSuspiciousActivityEvent, KeyboardEventData {
+    type: "select_all";
+}
+
+export interface PrintEvent extends BaseSuspiciousActivityEvent, KeyboardEventData {
+    type: "print";
+}
+
+export interface SaveEvent extends BaseSuspiciousActivityEvent, KeyboardEventData {
+    type: "save";
+}
+
+export interface BulkCopyEvent extends BaseSuspiciousActivityEvent {
+    type: "bulk_copy";
+    clipboardTypes: readonly string[];
+    selectedText?: Omit<BasicTextSelection, "targetFrameSrc">;
+    selectionLength?: number;
+}
+
+export interface SuspiciousSelectionEvent extends BaseSuspiciousActivityEvent {
+    type: "suspicious_selection";
+    selectionLength: number;
+    selectedText: Omit<BasicTextSelection, "targetFrameSrc">;
+    eventType: string;
+}
+
+export interface DragDetectedEvent extends BaseSuspiciousActivityEvent {
+    type: "drag_detected";
+    dataTransferTypes: readonly string[];
+}
+
+export interface DropDetectedEvent extends BaseSuspiciousActivityEvent {
+    type: "drop_detected";
+    dataTransferTypes: readonly string[];
+    fileCount: number;
+}
+
+export interface ContextMenuEvent extends Omit<BaseSuspiciousActivityEvent, "type"> {
+    clientX: number;
+    clientY: number;
+    selectedText?: Omit<BasicTextSelection, "targetFrameSrc">;
+}
+
+export type SuspiciousActivityEvent = 
+    | DeveloperToolsEvent
+    | SelectAllEvent
+    | BulkCopyEvent
+    | SuspiciousSelectionEvent
+    | DragDetectedEvent
+    | DropDetectedEvent
+    | PrintEvent
+    | SaveEvent
+    | SuspiciousScrollingEvent
+    | SuspiciousSnappingEvent
+    | KeyboardPeripheralEvent;
+
+export interface ContentProtectionConfig {
+    monitorSelection?: boolean | SelectionAnalyzerOptions;
+    protectCopy?: boolean | Omit<BulkCopyProtectionOptions, "enabled">;
+    disableContextMenu?: boolean;
+    disableDragAndDrop?: boolean;
+    disableSelectAll?: boolean;
+    disableSave?: boolean;
+    monitorDevTools?: boolean;
+    monitorScrollingExperimental?: boolean;
+}
+
 export class Peripherals extends Module {
     static readonly moduleName = "peripherals";
     private wnd!: ReadiumWindow;
     private comms!: Comms;
+    private configApplied = false; // Track if config has been applied
 
+    // State management
+    private cleanupCallbacks: (() => void)[] = [];
     private pointerMoved = false;
+    
+    // Feature flags
+    private isContextMenuEnabled = false;
+    private isDragAndDropEnabled = false;
+    private isSelectionMonitoringEnabled = false;
+    private isBulkCopyProtectionEnabled = false;
+    
+    // Selection analysis
+    private selectionAnalyzer: SelectionAnalyzer | null = null;
+    private currentSelection: string | null = null;
+    
+    // Bulk copy protection
+    private bulkCopyProtector: BulkCopyProtector | null = null;
+    
+    // Key combination manager
+    private keyManager = new KeyCombinationManager();
+
+    private addContextMenuPrevention(): void {
+        if (this.isContextMenuEnabled || !this.wnd) return;
+        this.wnd.document.addEventListener("contextmenu", this.onContext);
+        this.isContextMenuEnabled = true;
+    }
+
+    private removeContextMenuPrevention(): void {
+        if (!this.isContextMenuEnabled || !this.wnd) return;
+        this.wnd.document.removeEventListener("contextmenu", this.onContext);
+        this.isContextMenuEnabled = false;
+    }
+
+    private addDragAndDropPrevention(): void {
+        if (this.isDragAndDropEnabled || !this.wnd) return;
+        this.wnd.document.addEventListener("dragstart", this.onDragStart);
+        this.wnd.document.addEventListener("drop", this.onDrop);
+        this.isDragAndDropEnabled = true;
+    }
+
+    private removeDragAndDropPrevention(): void {
+        if (!this.isDragAndDropEnabled || !this.wnd) return;
+        this.wnd.document.removeEventListener("dragstart", this.onDragStart);
+        this.wnd.document.removeEventListener("drop", this.onDrop);
+        this.isDragAndDropEnabled = false;
+    }
+
+    private keyDownHandler: ((event: KeyboardEvent) => void) | null = null;
+
+    private enableKeyboardPeripherals(shortcuts: KeyboardPeripheral[] = []): void {
+        // Clear any existing state
+        this.disableKeyboardPeripherals();
+        
+        // Create activity event dispatcher
+        const dispatcher: ActivityEventDispatcher = (activityEvent) => {
+            this.comms?.send("keyboard_peripherals", activityEvent);
+        };
+        
+        // Create unified handler using centralized KeyCombinationManager
+        this.keyDownHandler = this.keyManager.createUnifiedHandler(this.wnd.location.href, shortcuts, dispatcher, this.wnd);
+        
+        // Add the event listener
+        if (this.wnd) {
+            this.wnd.document.addEventListener("keydown", this.keyDownHandler, {
+                capture: true
+            });
+        }
+    }
+    
+    private disableKeyboardPeripherals(): void {
+        if (this.wnd && this.keyDownHandler) {
+            this.wnd.document.removeEventListener("keydown", this.keyDownHandler, {
+                capture: true
+            });
+            this.keyDownHandler = null;
+        }
+    }
+
+    private addBulkCopyProtection(options: Partial<BulkCopyProtectionOptions> = {}): void {
+        if (this.isBulkCopyProtectionEnabled || !this.wnd) return;
+        
+        const defaultOptions = BULK_COPY_CONFIG;
+        
+        const finalOptions = options ? { ...defaultOptions, ...options } : defaultOptions;
+        
+        this.bulkCopyProtector = new BulkCopyProtector(this.wnd, finalOptions);
+        this.wnd.document.addEventListener("copy", this.preventBulkCopy, true);
+        this.wnd.document.addEventListener("cut", this.preventBulkCopy, true);
+        this.isBulkCopyProtectionEnabled = true;
+    }
+
+    private removeBulkCopyProtection(): void {
+        if (!this.isBulkCopyProtectionEnabled || !this.wnd) return;
+        
+        this.wnd.document.removeEventListener("copy", this.preventBulkCopy, true);
+        this.wnd.document.removeEventListener("cut", this.preventBulkCopy, true);
+        this.bulkCopyProtector?.destroy();
+        this.bulkCopyProtector = null;
+        this.isBulkCopyProtectionEnabled = false;
+    }
+
+    private preventBulkCopy = (event: ClipboardEvent) => {
+        if (!this.isBulkCopyProtectionEnabled || !this.bulkCopyProtector) {
+            return true;
+        }
+        
+        if (!this.bulkCopyProtector.shouldAllowCopy(event)) {
+            event.preventDefault();
+            
+            const selection = this.wnd.getSelection();
+            const selectedText = selection?.toString() || '';
+            const domRectList = selectedText ? selection?.getRangeAt(0)?.getClientRects() : null;
+            const rect = domRectList?.[0];
+            
+            const activityEvent: BulkCopyEvent = {
+                type: "bulk_copy",
+                timestamp: Date.now(),
+                clipboardTypes: event.clipboardData?.types ? [...event.clipboardData.types] : [],
+                selectedText: rect ? {
+                    text: selectedText,
+                    x: rect.x,
+                    y: rect.y,
+                    width: rect.width,
+                    height: rect.height
+                } : undefined,
+                selectionLength: selectedText.length,
+                targetFrameSrc: this.wnd.location.href
+
+            };
+            this.comms?.send("content_protection", activityEvent);
+            return false;
+        }
+        return true;
+    };
+
+    private handleSelection = (event?: Event) => {
+        if (!this.isSelectionMonitoringEnabled || !this.wnd || !this.selectionAnalyzer) {
+            return;
+        }
+        
+        const selection = this.wnd.getSelection();
+        if (selection) {
+            this.currentSelection = selection.toString();
+            const isSuspicious = this.selectionAnalyzer.analyze(selection);
+            
+            if (isSuspicious && this.currentSelection) {
+                const selection = this.wnd.getSelection();
+                const selectedText = selection?.toString() || '';
+                const domRectList = (selectedText && selection?.rangeCount) ? selection.getRangeAt(0)?.getClientRects() : null;
+                const rect = domRectList?.[0];
+                
+                const activityEvent: SuspiciousSelectionEvent = {
+                    type: "suspicious_selection",
+                    timestamp: Date.now(),
+                    selectionLength: selectedText.length,
+                        selectedText: {
+                        text: selectedText,
+                        x: rect?.x ?? 0,
+                        y: rect?.y ?? 0,
+                        width: rect?.width ?? 0,
+                        height: rect?.height ?? 0
+                    },
+                    eventType: event?.type || "selectionchange",
+                    targetFrameSrc: this.wnd.location.href
+                };
+                this.comms?.send("content_protection", activityEvent);
+            }
+        } else {
+            this.currentSelection = null;
+        }
+    };
+
+    private addSelectionMonitoring(options?: SelectionAnalyzerOptions): void {
+        if (this.isSelectionMonitoringEnabled || !this.wnd) return;
+        
+        // Use provided options or fall back to default config
+        const analyzerOptions = options || SELECTION_ANALYZER_CONFIG;
+        this.selectionAnalyzer = new SelectionAnalyzer(analyzerOptions);
+        this.wnd.document.addEventListener("selectionchange", this.handleSelection);
+        this.isSelectionMonitoringEnabled = true;
+    }
+    
+    private removeSelectionMonitoring(): void {
+        if (!this.isSelectionMonitoringEnabled || !this.wnd) {
+            return;
+        }
+        
+        this.wnd.document.removeEventListener("selectionchange", this.handleSelection);
+        this.selectionAnalyzer?.clear();
+        this.selectionAnalyzer = null;
+        this.isSelectionMonitoringEnabled = false;
+    }
+
+    private onDragStart = (event: DragEvent) => {
+        if (this.isDragAndDropEnabled) {
+            // Drag and drop protection is enabled - prevent it
+            event.preventDefault();
+            const activityEvent: DragDetectedEvent = {
+                type: "drag_detected",
+                timestamp: Date.now(),
+                dataTransferTypes: event.dataTransfer?.types ? [...event.dataTransfer.types] : [],
+                targetFrameSrc: this.wnd.location.href
+            };
+            this.comms?.send("content_protection", activityEvent);
+            return false;
+        } else {
+            return true;
+        }
+    };
+
+    private onDrop = (event: DragEvent) => {
+        if (this.isDragAndDropEnabled) {
+            // Drag and drop protection is enabled - prevent it
+            event.preventDefault();
+            const dataTransfer = event.dataTransfer;
+            const activityEvent: DropDetectedEvent = {
+                type: "drop_detected",
+                timestamp: Date.now(),
+                dataTransferTypes: dataTransfer?.types ? [...dataTransfer.types] : [],
+                fileCount: dataTransfer?.files?.length || 0,
+                targetFrameSrc: this.wnd.location.href
+            };
+            this.comms?.send("content_protection", activityEvent);
+            return false;
+        } else {
+            return true;
+        }
+    };
+
+    private onContext = (event: MouseEvent) => {
+        if (this.isContextMenuEnabled) {
+            // Context menu protection is enabled - prevent it
+            event.preventDefault();
+            const selection = this.wnd.getSelection();
+            const selectedText = selection?.toString() || '';
+            const domRectList = (selectedText && selection?.rangeCount) ? selection.getRangeAt(0)?.getClientRects() : null;
+            const rect = domRectList?.[0];
+            
+            const activityEvent: ContextMenuEvent = {
+                timestamp: Date.now(),
+                clientX: event.clientX,
+                clientY: event.clientY,
+                ...(rect && {
+                    selectedText: {
+                        text: selectedText,
+                        x: rect.x,
+                        y: rect.y,
+                        width: rect.width,
+                        height: rect.height
+                    }
+                }),
+                targetFrameSrc: this.wnd.location.href
+            };
+            this.comms?.send("context_menu", activityEvent);
+        }
+    };
 
     onPointUp(event: PointerEvent) {
         const selection = this.wnd.getSelection();
@@ -44,7 +409,7 @@ export class Peripherals extends Module {
                 y: rect.y,
                 width: rect.width,
                 height: rect.height,
-                targetFrameSrc: this.wnd?.location?.href,
+                targetFrameSrc: this.wnd?.location?.href
             }
             this.comms.send("text_selected", textSelection as BasicTextSelection);
         }
@@ -95,13 +460,6 @@ export class Peripherals extends Module {
     }
     private readonly onPointerDown = this.onPointDown.bind(this);
 
-    onContext(event: MouseEvent) {
-        // If the context menu is triggered by a long press, we manage the event using the pointup event
-        this.onPointUp(event as PointerEvent);
-        this.pointerMoved = false;
-    }
-    private readonly onContextMenu = this.onContext.bind(this);
-
     onClick(event: MouseEvent) {
         event.preventDefault(); // To prevent certain browser actions. May have side-effects
         if(!event.isTrusted) {
@@ -114,20 +472,90 @@ export class Peripherals extends Module {
                 clientY: event.clientY,
             });
             // Override properties we cannot set in the constructor
-            Object.defineProperty(synthEvent, 'target', {writable: false, value: event.target});
-            Object.defineProperty(synthEvent, 'defaultPrevented', {writable: false, value: event.defaultPrevented });
+            Object.defineProperty(synthEvent, "target", {writable: false, value: event.target});
+            Object.defineProperty(synthEvent, "defaultPrevented", {writable: false, value: event.defaultPrevented });
             // Trigger `pointerup` event
             this.onPointUp(synthEvent);
         }
     }
     private readonly onClicker = this.onClick.bind(this);
 
+    private registerProtectionHandlers() {
+        // Single handler for all content protection features
+        this.comms?.register("peripherals_protection", Peripherals.moduleName, (data: unknown, ack) => {
+            const config = data as ContentProtectionConfig;
+            
+            // Apply config only on first call, then ignore subsequent calls (immutable)
+            if (!this.configApplied) {
+                this.configApplied = true;
+                
+                // Selection monitoring with optional configuration
+                if (config.monitorSelection) {
+                    const options = typeof config.monitorSelection === "boolean" 
+                        ? undefined 
+                        : config.monitorSelection;
+                    this.addSelectionMonitoring(options);
+                    this.comms?.log("Selection monitoring enabled");
+                }
+                
+                // Copy
+                if (typeof config.protectCopy === "object") {
+                    // Limited copying with custom thresholds
+                    this.addBulkCopyProtection({
+                        enabled: true,
+                        ...config.protectCopy
+                    });
+                    this.comms?.log("Copy protection enabled (limited)");
+                } else if (config.protectCopy === true) {
+                    // Block all copying
+                    this.addBulkCopyProtection({ 
+                        enabled: true, 
+                        maxSelectionPercent: 0, 
+                        minThreshold: 0, 
+                        absoluteMaxChars: 0 
+                    });
+                    this.comms?.log("Copy protection enabled");
+                }
+                
+                // Context menu
+                if (config.disableContextMenu) {
+                    this.addContextMenuPrevention();
+                    this.comms?.log("Context menu protection enabled");
+                }
+                
+                // Drag and drop
+                if (config.disableDragAndDrop) {
+                    this.addDragAndDropPrevention();
+                    this.comms?.log("Drag and drop protection enabled");
+                }
+            }
+            
+            ack(true);
+        });
+
+        // Separate handler for keyboard peripherals
+        this.comms?.register("keyboard_peripherals", Peripherals.moduleName, (data: unknown, ack) => {
+            const keyboardPeripherals = data as KeyboardPeripheral[];
+            
+            if (keyboardPeripherals && keyboardPeripherals.length > 0) {
+                this.enableKeyboardPeripherals(keyboardPeripherals);
+                this.comms?.log(`Keyboard peripherals enabled: ${keyboardPeripherals.map(p => p.type).join(", ")}`);
+            }
+            
+            ack(true);
+        });
+    }
+
     mount(wnd: ReadiumWindow, comms: Comms): boolean {
         this.wnd = wnd;
         this.comms = comms;
+        
+        // Register protection handlers
+        this.registerProtectionHandlers();
+        
+        // Core event listeners (always active)
         wnd.document.addEventListener("pointerdown", this.onPointerDown);
         wnd.document.addEventListener("pointerup", this.onPointerUp);
-        wnd.document.addEventListener("contextmenu", this.onContextMenu);
         wnd.document.addEventListener("pointermove", this.onPointerMove);
         wnd.document.addEventListener("click", this.onClicker);
 
@@ -136,12 +564,29 @@ export class Peripherals extends Module {
     }
 
     unmount(wnd: ReadiumWindow, comms: Comms): boolean {
+        // Clean up optional features
+        this.removeBulkCopyProtection();
+        this.removeSelectionMonitoring();
+        this.removeContextMenuPrevention();
+        this.removeDragAndDropPrevention();
+        this.disableKeyboardPeripherals();
+        
+        // Clean up event listeners
+        this.cleanupCallbacks.forEach(cleanup => cleanup());
+        this.cleanupCallbacks = [];
+        
+        // Remove core event listeners
         wnd.document.removeEventListener("pointerdown", this.onPointerDown);
         wnd.document.removeEventListener("pointerup", this.onPointerUp);
-        wnd.document.removeEventListener("contextmenu", this.onContextMenu);
         wnd.document.removeEventListener("pointermove", this.onPointerMove);
         wnd.document.removeEventListener("click", this.onClicker);
-
+        
+        // Unregister all handlers
+        comms.unregisterAll(Peripherals.moduleName);
+        
+        // Reset config applied flag for fresh instances
+        this.configApplied = false;
+        
         comms.log("Peripherals Unmounted");
         return true;
     }