@readium/navigator 2.2.9 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.2.9",
+  "version": "2.3.1",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",
@@ -50,8 +50,7 @@
     "generate:css-selector": "node scripts/generate-css-selector.js"
   },
   "devDependencies": {
-    "@laynezh/vite-plugin-lib-assets": "^2.1.3",
-    "@readium/css": "2.0.0-beta.24",
+    "@readium/css": "^2.0.0",
     "@readium/navigator-html-injectables": "workspace:*",
     "@readium/shared": "workspace:*",
     "@types/path-browserify": "^1.0.3",

package/src/Navigator.ts

@@ -1,7 +1,21 @@
 import { Link, Locator, Publication, ReadingProgression } from "@readium/shared";
+import { 
+    ContentProtectionConfig, 
+    PrintProtectionConfig, 
+    KeyboardPeripheral,
+    KeyCombo,
+    DEV_TOOLS, 
+    SELECT_ALL, 
+    PRINT, 
+    SAVE 
+} from "@readium/navigator-html-injectables";
 
 type cbb = (ok: boolean) => void;
 
+export type IKeyboardPeripheralsConfig = Array<Omit<KeyboardPeripheral, 'type'> & {
+    type: Exclude<string, 'developer_tools' | 'select_all' | 'print' | 'save'>;
+}>;
+
 export interface ProgressionRange {
     start: number;
     end: number;
@@ -13,6 +27,12 @@ export interface VisualNavigatorViewport {
     positions: number[] | null;  // Range of visible positions
 }
 
+export interface IContentProtectionConfig extends ContentProtectionConfig { 
+    protectPrinting?: PrintProtectionConfig;
+    checkAutomation?: boolean;
+    checkIFrameEmbedding?: boolean;
+}
+
 export abstract class Navigator {
     abstract get publication(): Publication; // Publication rendered by this navigator.
     abstract get currentLocator(): Locator; // Current position (detailed) in the publication. Can be used to save a bookmark to the current position.
@@ -43,6 +63,62 @@ export abstract class Navigator {
      * Destroy all resources associated with this navigator. Synonymous with "unmount"
      */
     abstract destroy(): void;
+
+    /**
+     * Merges keyboard peripherals from content protection config with user-provided peripherals
+     * Content protection peripherals are added first for priority, then user peripherals are added only if they don't conflict
+     */
+    protected mergeKeyboardPeripherals(
+        config: IContentProtectionConfig,
+        keyboardPeripherals: IKeyboardPeripheralsConfig = []
+    ): IKeyboardPeripheralsConfig {
+        const peripherals: IKeyboardPeripheralsConfig = [];
+        
+        // Filter out any peripherals with reserved content protection types
+        const filteredUserPeripherals = keyboardPeripherals.filter(
+            peripheral => !['developer_tools', 'select_all', 'print', 'save'].includes(peripheral.type)
+        );
+        
+        // Add content protection peripherals first for priority
+        if (config.disableSelectAll) {
+            peripherals.push(SELECT_ALL);
+        }
+        if (config.disableSave) {
+            peripherals.push(SAVE);
+        }
+        if (config.monitorDevTools) {
+            peripherals.push(DEV_TOOLS);
+        }
+        if (config.protectPrinting?.disable) {
+            peripherals.push(PRINT);
+        }
+        
+        // Add user peripherals with conflicting combos removed
+        for (const userPeripheral of filteredUserPeripherals) {
+            // Filter out combos that conflict with existing peripherals
+            const filteredCombos = userPeripheral.keyCombos.filter((userCombo: KeyCombo) =>
+                !peripherals.some(existingPeripheral =>
+                    existingPeripheral.keyCombos.some((existingCombo: KeyCombo) =>
+                        userCombo.keyCode === existingCombo.keyCode &&
+                        userCombo.ctrl === existingCombo.ctrl &&
+                        userCombo.shift === existingCombo.shift &&
+                        userCombo.alt === existingCombo.alt &&
+                        userCombo.meta === existingCombo.meta
+                    )
+                )
+            );
+            
+            // Add the peripheral with filtered combos if any remain
+            if (filteredCombos.length > 0) {
+                peripherals.push({
+                    ...userPeripheral,
+                    keyCombos: filteredCombos
+                });
+            }
+        }
+        
+        return peripherals;
+    }
 }
 
 export abstract class VisualNavigator extends Navigator {

package/src/epub/EpubNavigator.ts

@@ -2,8 +2,8 @@ import { Layout, Link, Locator, Profile, Publication, ReadingProgression } from
 import { Configurable, ConfigurablePreferences, ConfigurableSettings, LineLengths, ProgressionRange, VisualNavigator, VisualNavigatorViewport } from "../";
 import { FramePoolManager } from "./frame/FramePoolManager";
 import { FXLFramePoolManager } from "./fxl/FXLFramePoolManager";
-import { CommsEventKey, FXLModules, ModuleLibrary, ModuleName, ReflowableModules } from "@readium/navigator-html-injectables";
-import { BasicTextSelection, FrameClickEvent } from "@readium/navigator-html-injectables";
+import { CommsEventKey, ContextMenuEvent, FXLModules, KeyboardEventData, ModuleLibrary, ModuleName, ReflowableModules } from "@readium/navigator-html-injectables";
+import { BasicTextSelection, FrameClickEvent, SuspiciousActivityEvent } from "@readium/navigator-html-injectables";
 import * as path from "path-browserify";
 import { FXLFrameManager } from "./fxl/FXLFrameManager";
 import { FrameManager } from "./frame/FrameManager";
@@ -17,6 +17,9 @@ import { getContentWidth } from "../helpers/dimensions";
 import { Injector } from "../injection/Injector";
 import { createReadiumEpubRules } from "../injection/epubInjectables";
 import { IInjectablesConfig } from "../injection/Injectable";
+import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../Navigator";
+import { NavigatorProtector, NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT } from "../protection/NavigatorProtector";
+import { KeyboardPeripherals, NAVIGATOR_KEYBOARD_PERIPHERAL_EVENT } from "../peripherals/KeyboardPeripherals";
 
 export type ManagerEventKey = "zoom";
 
@@ -24,6 +27,8 @@ export interface EpubNavigatorConfiguration {
     preferences: IEpubPreferences;
     defaults: IEpubDefaults;
     injectables?: IInjectablesConfig;
+    contentProtection?: IContentProtectionConfig;
+    keyboardPeripherals?: IKeyboardPeripheralsConfig;
 }
 
 export interface EpubNavigatorListeners {
@@ -35,8 +40,11 @@ export interface EpubNavigatorListeners {
     miscPointer: (amount: number) => void;
     scroll: (delta: number) => void;
     customEvent: (key: string, data: unknown) => void;
-    handleLocator: (locator: Locator) => boolean; // Retrun true to prevent handling here
+    handleLocator: (locator: Locator) => boolean; // Return true to prevent handling here
     textSelected: (selection: BasicTextSelection) => void;
+    contentProtection: (type: string, data: SuspiciousActivityEvent) => void;
+    contextMenu: (data: ContextMenuEvent) => void;
+    peripheral: (data: KeyboardEventData) => void;
     // showToc: () => void;
 }
 
@@ -50,7 +58,10 @@ const defaultListeners = (listeners: EpubNavigatorListeners): EpubNavigatorListe
     scroll: listeners.scroll || (() => {}),
     customEvent: listeners.customEvent || (() => {}),
     handleLocator: listeners.handleLocator || (() => false),
-    textSelected: listeners.textSelected || (() => {})
+    textSelected: listeners.textSelected || (() => {}),
+    contentProtection: listeners.contentProtection || (() => {}),
+    contextMenu: listeners.contextMenu || (() => {}),
+    peripheral: listeners.peripheral || (() => {}),
 })
 
 export class EpubNavigator extends VisualNavigator implements Configurable<ConfigurableSettings, ConfigurablePreferences> {
@@ -70,6 +81,12 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     private _css: ReadiumCSS;
     private _preferencesEditor: EpubPreferencesEditor | null = null;
     private readonly _injector: Injector | null = null;
+    private readonly _contentProtection: IContentProtectionConfig;
+    private readonly _keyboardPeripherals: IKeyboardPeripheralsConfig;
+    private readonly _navigatorProtector: NavigatorProtector | null = null;
+    private readonly _keyboardPeripheralsManager: KeyboardPeripherals | null = null;
+    private readonly _suspiciousActivityListener: ((event: Event) => void) | null = null;
+    private readonly _keyboardPeripheralListener: ((event: Event) => void) | null = null;
 
     private resizeObserver: ResizeObserver;
 
@@ -98,7 +115,9 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                 optimalChars: this._settings.optimalLineLength,
                 minChars: this._settings.minimalLineLength,
                 maxChars: this._settings.maximalLineLength,
-                pageGutter: this._settings.pageGutter,
+                padding: this._settings.scroll 
+                    ? (this._settings.scrollPaddingLeft || 0) + (this._settings.scrollPaddingRight || 0)
+                    : (this._settings.pageGutter || 0) * 2,
                 fontFace: this._settings.fontFamily,
                 letterSpacing: this._settings.letterSpacing,
                 wordSpacing: this._settings.wordSpacing,
@@ -112,13 +131,55 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         this.currentProgression = pub.metadata.effectiveReadingProgression;
         
         // Combine Readium rules with user-provided injectables
-        const readiumRules = createReadiumEpubRules(pub.metadata);
+        const readiumRules = createReadiumEpubRules(pub.metadata, pub.readingOrder.items);
         const userConfig = configuration.injectables || { rules: [], allowedDomains: [] };
         
         this._injector = new Injector({
             rules: [...readiumRules, ...userConfig.rules],
             allowedDomains: userConfig.allowedDomains
         });
+
+        this._contentProtection = configuration.contentProtection || {};
+        
+        // Merge keyboard peripherals
+        this._keyboardPeripherals = this.mergeKeyboardPeripherals(
+            this._contentProtection,
+            configuration.keyboardPeripherals || []
+        );
+        
+        // Initialize navigator protection if any protection is configured
+        if (this._contentProtection.disableContextMenu ||
+            this._contentProtection.checkAutomation ||
+            this._contentProtection.checkIFrameEmbedding ||
+            this._contentProtection.monitorDevTools ||
+            this._contentProtection.protectPrinting?.disable) {
+            this._navigatorProtector = new NavigatorProtector(this._contentProtection);
+            
+            // Listen for custom events from NavigatorProtector
+            this._suspiciousActivityListener = (event: Event) => {
+                const { type, ...activity } = (event as CustomEvent).detail;
+                if (type === "context_menu") {
+                    this.listeners.contextMenu(activity as ContextMenuEvent);
+                } else {
+                    this.listeners.contentProtection(type, activity);
+                }
+            };
+            window.addEventListener(NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT, this._suspiciousActivityListener);
+        }
+        
+        // Initialize keyboard peripherals separately (works independently of protection)
+        if (this._keyboardPeripherals.length > 0) {
+            this._keyboardPeripheralsManager = new KeyboardPeripherals({
+                keyboardPeripherals: this._keyboardPeripherals
+            });
+            
+            // Listen for keyboard peripheral events from main window
+            this._keyboardPeripheralListener = (event: Event) => {
+                const activity = (event as CustomEvent).detail;
+                this.listeners.peripheral(activity);
+            };
+            window.addEventListener(NAVIGATOR_KEYBOARD_PERIPHERAL_EVENT, this._keyboardPeripheralListener);
+        }
         
         // We use a resizeObserver cos’ the container parent may not be the width of 
         // the document/window e.g. app using a docking system with left and right panels.
@@ -154,7 +215,9 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                 this.container, 
                 this.positions, 
                 this.pub,
-                this._injector
+                this._injector,
+                this._contentProtection,
+                this._keyboardPeripherals
             );
             this.framePool.listener = (key: CommsEventKey | ManagerEventKey, data: unknown) => {
                 this.eventListener(key, data);
@@ -166,7 +229,9 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                 this.container, 
                 this.positions, 
                 cssProperties,
-                this._injector
+                this._injector,
+                this._contentProtection,
+                this._keyboardPeripherals
             );
         }
 
@@ -434,6 +499,16 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             case "progress":
                 this.syncLocation(data as ProgressionRange);
                 break;
+            case "content_protection":
+                const activity = data as SuspiciousActivityEvent;
+                this.listeners.contentProtection(activity.type, activity);
+                break;
+            case "context_menu":
+                this.listeners.contextMenu(data as ContextMenuEvent);
+                break;
+            case "keyboard_peripherals":
+                this.listeners.peripheral(data as KeyboardEventData);
+                break;
             case "log":
                 console.log(this._cframes[0]?.source?.split("/")[3], ...(data as any[]));
                 break;
@@ -482,6 +557,14 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     }
 
     public async destroy() {
+        if (this._suspiciousActivityListener) {
+            window.removeEventListener(NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT, this._suspiciousActivityListener);
+        }
+        if (this._keyboardPeripheralListener) {
+            window.removeEventListener(NAVIGATOR_KEYBOARD_PERIPHERAL_EVENT, this._keyboardPeripheralListener);
+        }
+        this._navigatorProtector?.destroy();
+        this._keyboardPeripheralsManager?.destroy();
         await this.framePool?.destroy();
     }
 
@@ -711,7 +794,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
 
     private async loadLocator(locator: Locator, cb: (ok: boolean) => void) {
         let done = false;
-        let cssSelector = (typeof locator.locations.getCssSelector === 'function') && locator.locations.getCssSelector();
+        let cssSelector = (typeof locator.locations.getCssSelector === "function") && locator.locations.getCssSelector();
         if(locator.text?.highlight) {
             done = await new Promise<boolean>((res, _) => {
                 // Attempt to go to a highlighted piece of text in the resource
@@ -743,7 +826,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         // This sanity check has to be performed because we're still passing non-locator class
         // locator objects to this function. This is not good and should eventually be forbidden
         // or the locator should be deserialized sometime before this function.
-        const hid = (typeof locator.locations.htmlId === 'function') && locator.locations.htmlId();
+        const hid = (typeof locator.locations.htmlId === "function") && locator.locations.htmlId();
         if(hid)
             done = await new Promise<boolean>((res, _) => {
                 // Attempt to go to an HTML ID in the resource

package/src/epub/css/Properties.ts

@@ -203,8 +203,8 @@ export interface IRSProperties {
   sansSerifJaV?: string | null;
   sansTf?: string | null;
   scrollPaddingBottom?: number | null;
-  // scrollPaddingLeft?: number | null;
-  // scrollPaddingRight?: number | null;
+  scrollPaddingLeft?: number | null;
+  scrollPaddingRight?: number | null;
   scrollPaddingTop?: number | null;
   secondaryColor?: string | null;
   selectionBackgroundColor?: string | null;
@@ -248,8 +248,8 @@ export class RSProperties extends Properties {
   sansSerifJaV: string | null;
   sansTf: string | null;
   scrollPaddingBottom: number | null;
-  // scrollPaddingLeft: number | null;
-  // scrollPaddingRight: number | null;
+  scrollPaddingLeft: number | null;
+  scrollPaddingRight: number | null;
   scrollPaddingTop: number | null;
   secondaryColor: string | null;
   selectionBackgroundColor: string | null;
@@ -290,8 +290,8 @@ export class RSProperties extends Properties {
     this.paraSpacing = props.paraSpacing ?? null;
     this.primaryColor = props.primaryColor ?? null;
     this.scrollPaddingBottom = props.scrollPaddingBottom ?? null;
-    // this.scrollPaddingLeft = props.scrollPaddingLeft ?? null;
-    // this.scrollPaddingRight = props.scrollPaddingRight ?? null;
+    this.scrollPaddingLeft = props.scrollPaddingLeft ?? null;
+    this.scrollPaddingRight = props.scrollPaddingRight ?? null;
     this.scrollPaddingTop = props.scrollPaddingTop ?? null;
     this.sansSerifJa = props.sansSerifJa ?? null;
     this.sansSerifJaV = props.sansSerifJaV ?? null;
@@ -340,8 +340,8 @@ export class RSProperties extends Properties {
     if (this.sansSerifJaV) cssProperties["--RS__sans-serif-ja-v"] = this.sansSerifJaV;
     if (this.sansTf) cssProperties["--RS__sansTf"] = this.sansTf;
     if (this.scrollPaddingBottom != null) cssProperties["--RS__scrollPaddingBottom"] = this.toPx(this.scrollPaddingBottom);
-    // if (this.scrollPaddingLeft != null) cssProperties["--RS__scrollPaddingLeft"] = this.toPx(this.scrollPaddingLeft);
-    // if (this.scrollPaddingRight != null) cssProperties["--RS__scrollPaddingRight"] = this.toPx(this.scrollPaddingRight);
+    if (this.scrollPaddingLeft != null) cssProperties["--RS__scrollPaddingLeft"] = this.toPx(this.scrollPaddingLeft);
+    if (this.scrollPaddingRight != null) cssProperties["--RS__scrollPaddingRight"] = this.toPx(this.scrollPaddingRight);
     if (this.scrollPaddingTop != null) cssProperties["--RS__scrollPaddingTop"] = this.toPx(this.scrollPaddingTop);
     if (this.secondaryColor) cssProperties["--RS__secondaryColor"] = this.secondaryColor;
     if (this.selectionBackgroundColor) cssProperties["--RS__selectionBackgroundColor"] = this.selectionBackgroundColor;

package/src/epub/css/ReadiumCSS.ts

@@ -45,11 +45,11 @@ export class ReadiumCSS {
     if (settings.scrollPaddingBottom !== this.rsProperties.scrollPaddingBottom)
       this.rsProperties.scrollPaddingBottom = settings.scrollPaddingBottom;
 
-    // if (settings.scrollPaddingLeft !== this.rsProperties.scrollPaddingLeft)
-    //   this.rsProperties.scrollPaddingLeft = settings.scrollPaddingLeft;
+    if (settings.scrollPaddingLeft !== this.rsProperties.scrollPaddingLeft)
+      this.rsProperties.scrollPaddingLeft = settings.scrollPaddingLeft;
 
-    // if (settings.scrollPaddingRight !== this.rsProperties.scrollPaddingRight)
-    //   this.rsProperties.scrollPaddingRight = settings.scrollPaddingRight;
+    if (settings.scrollPaddingRight !== this.rsProperties.scrollPaddingRight)
+      this.rsProperties.scrollPaddingRight = settings.scrollPaddingRight;
 
     if (settings.scrollPaddingTop !== this.rsProperties.scrollPaddingTop)
       this.rsProperties.scrollPaddingTop = settings.scrollPaddingTop;
@@ -62,7 +62,9 @@ export class ReadiumCSS {
     this.lineLengths.update({
       fontFace: settings.fontFamily,
       letterSpacing: settings.letterSpacing,
-      pageGutter: settings.pageGutter,
+      padding: settings.scroll 
+        ? (settings.scrollPaddingLeft || 0) + (settings.scrollPaddingRight || 0)
+        : (settings.pageGutter || 0) * 2,
       wordSpacing: settings.wordSpacing,
       optimalChars: settings.optimalLineLength,
       minChars: settings.minimalLineLength,

package/src/epub/frame/FrameManager.ts

@@ -2,6 +2,7 @@ import { Loader, ModuleName } from "@readium/navigator-html-injectables";
 import { FrameComms } from "./FrameComms";
 import { ReadiumWindow } from "../../../../navigator-html-injectables/types/src/helpers/dom";
 import { sML } from "../../helpers";
+import type { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator";
 
 
 export class FrameManager {
@@ -11,10 +12,15 @@ export class FrameManager {
     private comms: FrameComms | undefined;
     private hidden: boolean = true;
     private destroyed: boolean = false;
-
+    private readonly contentProtectionConfig: IContentProtectionConfig;
+    private readonly keyboardPeripheralsConfig: IKeyboardPeripheralsConfig;
     private currModules: ModuleName[] = [];
 
-    constructor(source: string) {
+    constructor(
+        source: string,
+        contentProtectionConfig: IContentProtectionConfig = {},
+        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = []
+    ) {
         this.frame = document.createElement("iframe");
         this.frame.sandbox.value = "allow-same-origin allow-scripts";
         this.frame.classList.add("readium-navigator-iframe");
@@ -25,6 +31,11 @@ export class FrameManager {
         this.frame.style.pointerEvents = "none";
         this.frame.style.transition = "visibility 0s, opacity 0.1s linear";
         this.source = source;
+
+        // Use the provided content protection config directly without overriding defaults
+        this.contentProtectionConfig = { ...contentProtectionConfig };
+        this.keyboardPeripheralsConfig = [...keyboardPeripheralsConfig];
+
     }
 
     async load(modules: ModuleName[]): Promise<Window> {
@@ -57,6 +68,28 @@ export class FrameManager {
         });
     }
 
+    private applyContentProtection() {
+        if (!this.comms) this.comms!.resume();
+        
+        // Send content protection config
+        this.comms!.send("peripherals_protection", this.contentProtectionConfig);
+        
+        // Send keyboard peripherals separately
+        if (this.keyboardPeripheralsConfig && this.keyboardPeripheralsConfig.length > 0) {
+            this.comms!.send("keyboard_peripherals", this.keyboardPeripheralsConfig);
+        }
+
+        // Apply scroll protection
+        if (this.contentProtectionConfig.monitorScrollingExperimental) {
+            this.comms!.send("scroll_protection", {});
+        }
+
+        // Apply print protection if configured
+        if (this.contentProtectionConfig.protectPrinting) {
+            this.comms!.send("print_protection", this.contentProtectionConfig.protectPrinting);
+        }
+    }
+
     async destroy() {
         await this.hide();
         this.loader?.destroy();
@@ -91,6 +124,9 @@ export class FrameManager {
         return new Promise((res, _) => {
             this.comms?.send("activate", undefined, () => {
                 this.comms?.send("focus", undefined, () => {
+                    // Apply content protection synchronously
+                    this.applyContentProtection();
+                    
                     const remove = () => {
                         this.frame.style.removeProperty("visibility");
                         this.frame.style.removeProperty("aria-hidden");

package/src/epub/frame/FramePoolManager.ts

@@ -3,6 +3,7 @@ import { Locator, Publication } from "@readium/shared";
 import FrameBlobBuider from "./FrameBlobBuilder";
 import { FrameManager } from "./FrameManager";
 import { Injector } from "../../injection/Injector";
+import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator";
 
 const UPPER_BOUNDARY = 5;
 const LOWER_BOUNDARY = 3;
@@ -18,17 +19,23 @@ export class FramePoolManager {
     private pendingUpdates: Map<string, { inPool: boolean }> = new Map();
     private currentBaseURL: string | undefined;
     private readonly injector: Injector | null = null;
+    private readonly contentProtectionConfig: IContentProtectionConfig;
+    private readonly keyboardPeripheralsConfig: IKeyboardPeripheralsConfig;
 
     constructor(
         container: HTMLElement, 
         positions: Locator[], 
         cssProperties?: { [key: string]: string },
-        injector?: Injector | null
+        injector?: Injector | null,
+        contentProtectionConfig?: IContentProtectionConfig,
+        keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig
     ) {
         this.container = container;
         this.positions = positions;
         this.currentCssProperties = cssProperties;
         this.injector = injector ?? null;
+        this.contentProtectionConfig = contentProtectionConfig || {};
+        this.keyboardPeripheralsConfig = keyboardPeripheralsConfig || [];
     }
 
     async destroy() {
@@ -164,7 +171,7 @@ export class FramePoolManager {
                 }
 
                 // Create <iframe>
-                const fm = new FrameManager(this.blobs.get(href)!);
+                const fm = new FrameManager(this.blobs.get(href)!, this.contentProtectionConfig, this.keyboardPeripheralsConfig);
                 if(href !== newHref) await fm.hide(); // Avoid unecessary hide
                 this.container.appendChild(fm.iframe);
                 await fm.load(modules);

package/src/epub/fxl/FXLFrameManager.ts

@@ -3,6 +3,7 @@ import { Page, ReadingProgression } from "@readium/shared";
 import { FrameComms } from "../frame/FrameComms";
 import { FXLPeripherals } from "./FXLPeripherals";
 import { ReadiumWindow } from "../../../../navigator-html-injectables/types/src/helpers/dom";
+import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator";
 
 export class FXLFrameManager {
     private frame: HTMLIFrameElement;
@@ -10,7 +11,8 @@ export class FXLFrameManager {
     public source: string;
     private comms: FrameComms | undefined;
     private readonly peripherals: FXLPeripherals;
-
+    private readonly contentProtectionConfig: IContentProtectionConfig;
+    private readonly keyboardPeripheralsConfig: IKeyboardPeripheralsConfig;
     private currModules: ModuleName[] = [];
 
     // NEW
@@ -19,9 +21,18 @@ export class FXLFrameManager {
     private loadPromise: Promise<Window> | undefined;
     private showPromise: Promise<void> | undefined;
 
-    constructor(peripherals: FXLPeripherals, direction: ReadingProgression, debugHref: string) {
+    constructor(
+        peripherals: FXLPeripherals, 
+        direction: ReadingProgression, 
+        debugHref: string,
+        contentProtectionConfig: IContentProtectionConfig = {},
+        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = []
+    ) {
         this.peripherals = peripherals;
         this.debugHref = debugHref;
+        // Use the provided content protection config directly without overriding defaults
+        this.contentProtectionConfig = { ...contentProtectionConfig };
+        this.keyboardPeripheralsConfig = [...keyboardPeripheralsConfig];
         this.frame = document.createElement("iframe");
         this.frame.sandbox.value = "allow-same-origin allow-scripts";
         this.frame.classList.add("readium-navigator-iframe");
@@ -196,6 +207,23 @@ export class FXLFrameManager {
             this.comms?.halt();
     }
 
+    private applyContentProtection() {
+        if (!this.comms) this.comms!.resume();
+
+        // Send content protection config
+        this.comms!.send("peripherals_protection", this.contentProtectionConfig);
+        
+        // Send keyboard peripherals separately
+        if (this.keyboardPeripheralsConfig && this.keyboardPeripheralsConfig.length > 0) {
+            this.comms!.send("keyboard_peripherals", this.keyboardPeripheralsConfig);
+        }
+
+        // Apply print protection if configured
+        if (this.contentProtectionConfig.protectPrinting) {
+            this.comms!.send("print_protection", this.contentProtectionConfig.protectPrinting);
+        }
+    }
+
     private cachedPage: Page | undefined = undefined;
     async show(page: Page): Promise<void> {
         if(!this.frame.parentElement) {
@@ -221,6 +249,7 @@ export class FXLFrameManager {
             this.comms!.send("focus", undefined, (_: boolean) => {
                 // this.showPromise = undefined; Don't do this
                 this.update(this.cachedPage);
+                this.applyContentProtection();
                 res();
             });
         });

package/src/epub/fxl/FXLFramePoolManager.ts

@@ -5,7 +5,7 @@ import FrameBlobBuider from "../frame/FrameBlobBuilder";
 import { FXLFrameManager } from "./FXLFrameManager";
 import { FXLPeripherals } from "./FXLPeripherals";
 import { FXLSpreader, Orientation, Spread } from "./FXLSpreader";
-import { VisualNavigatorViewport } from "../../Navigator";
+import { VisualNavigatorViewport, IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator";
 import { Injector } from "../../injection/Injector";
 
 const UPPER_BOUNDARY = 8;
@@ -28,6 +28,8 @@ export class FXLFramePoolManager {
     private currentBaseURL: string | undefined;
     private previousFrames: FXLFrameManager[] = [];
     private readonly injector: Injector | null = null;
+    private readonly contentProtectionConfig: IContentProtectionConfig;
+    private readonly keyboardPeripheralsConfig: IKeyboardPeripheralsConfig;
 
     // NEW
     private readonly bookElement: HTMLDivElement;
@@ -50,12 +52,16 @@ export class FXLFramePoolManager {
         container: HTMLElement, 
         positions: Locator[], 
         pub: Publication,
-        injector?: Injector | null
+        injector?: Injector | null,
+        contentProtectionConfig?: IContentProtectionConfig,
+        keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig,
     ) {
         this.container = container;
         this.positions = positions;
         this.pub = pub;
         this.injector = injector ?? null;
+        this.contentProtectionConfig = contentProtectionConfig || {};
+        this.keyboardPeripheralsConfig = keyboardPeripheralsConfig || [];
         this.spreadPresentation = pub.metadata.otherMetadata?.spread || Spread.auto;
 
         if(this.pub.metadata.effectiveReadingProgression !== ReadingProgression.rtl && this.pub.metadata.effectiveReadingProgression !== ReadingProgression.ltr)
@@ -82,7 +88,7 @@ export class FXLFramePoolManager {
 
         this.pub.readingOrder.items.forEach((link) => {
             // Create <iframe>
-            const fm = new FXLFrameManager(this.peripherals, this.pub.metadata.effectiveReadingProgression, link.href);
+            const fm = new FXLFrameManager(this.peripherals, this.pub.metadata.effectiveReadingProgression, link.href, this.contentProtectionConfig, this.keyboardPeripheralsConfig);
             this.spineElement.appendChild(fm.element);
 
             // this.pages.push(fm);

package/src/epub/preferences/EpubDefaults.ts

@@ -53,8 +53,8 @@ export interface IEpubDefaults {
   scroll?: boolean | null,
   scrollPaddingTop?: number | null,
   scrollPaddingBottom?: number | null,
-  // scrollPaddingLeft?: number | null,
-  // scrollPaddingRight?: number | null,
+  scrollPaddingLeft?: number | null,
+  scrollPaddingRight?: number | null,
   selectionBackgroundColor?: string | null,
   selectionTextColor?: string | null,
   textAlign?: TextAlignment | null,
@@ -97,8 +97,8 @@ export class EpubDefaults {
   scroll: boolean | null;
   scrollPaddingTop: number | null;
   scrollPaddingBottom: number | null;
-  // scrollPaddingLeft: number | null;
-  // scrollPaddingRight: number | null;
+  scrollPaddingLeft: number | null;
+  scrollPaddingRight: number | null;
   selectionBackgroundColor: string | null;
   selectionTextColor: string | null;
   textAlign: TextAlignment | null;
@@ -144,8 +144,8 @@ export class EpubDefaults {
     this.scroll = ensureBoolean(defaults.scroll) ?? false;
     this.scrollPaddingTop = ensureNonNegative(defaults.scrollPaddingTop) ?? null;
     this.scrollPaddingBottom = ensureNonNegative(defaults.scrollPaddingBottom) ?? null;
-    // this.scrollPaddingLeft = ensureNonNegative(defaults.scrollPaddingLeft) ?? null;
-    // this.scrollPaddingRight = ensureNonNegative(defaults.scrollPaddingRight) ?? null;
+    this.scrollPaddingLeft = ensureNonNegative(defaults.scrollPaddingLeft) ?? null;
+    this.scrollPaddingRight = ensureNonNegative(defaults.scrollPaddingRight) ?? null;
     this.selectionBackgroundColor = ensureString(defaults.selectionBackgroundColor) || null;
     this.selectionTextColor = ensureString(defaults.selectionTextColor) || null;
     this.textAlign = ensureEnumValue<TextAlignment>(defaults.textAlign, TextAlignment) || null;