@readium/navigator 2.10.2 → 2.11.0

package/src/epub/EpubNavigator.ts

@@ -6,6 +6,7 @@ import { CommsEventKey, ContextMenuEvent, DecorationActivatedEvent, DecorationPo
 import { Decoration, OnDecorationActivatedEvent, OnDecorationPointerEnterEvent, OnDecorationPointerLeaveEvent, DecorationObserver, DecorableNavigator, DecoratorConfig, decorationsEqual, resolveDecorationForWire, supportsDecorationStyle as canRenderDecorationStyle, DecorationStyleType } from "../decorations/index.ts";
 import * as path from "path-browserify";
 import { FXLFrameManager } from "./fxl/FXLFrameManager.ts";
+import { isTypedOMSupported } from "./fxl/FXLPeripherals.ts";
 import { FrameManager } from "./frame/FrameManager.ts";
 import { IEpubPreferences, EpubPreferences } from "./preferences/EpubPreferences.ts";
 import { IEpubDefaults, EpubDefaults } from "./preferences/EpubDefaults.ts";
@@ -21,6 +22,9 @@ import { IContentProtectionConfig, IKeyboardPeripheralsConfig, KeyboardPeriphera
 import { NavigatorProtector, NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT } from "../protection/NavigatorProtector.ts";
 import { KeyboardPeripherals, NAVIGATOR_KEYBOARD_PERIPHERAL_EVENT } from "../peripherals/KeyboardPeripherals.ts";
 import { getScriptMode } from "../helpers/scriptMode.ts";
+import { UpgradeInsecureRequests } from "./frame/FrameBlobBuilder.ts";
+
+export type { UpgradeInsecureRequests };
 
 export type ManagerEventKey = "zoom";
 
@@ -31,6 +35,7 @@ export interface EpubNavigatorConfiguration {
     contentProtection?: IContentProtectionConfig;
     keyboardPeripherals?: IKeyboardPeripheralsConfig;
     decoratorConfig?: DecoratorConfig;
+    upgradeInsecureRequests?: UpgradeInsecureRequests;
 }
 
 export interface EpubNavigatorListeners {
@@ -77,6 +82,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     private readonly container: HTMLElement;
     private readonly listeners: EpubNavigatorListeners;
     private framePool!: FramePoolManager | FXLFramePoolManager;
+    private _destroyed = false;
     private positions!: Locator[];
     private currentLocation!: Locator;
     private _currentTimelineItem: TimelineItem | undefined;
@@ -99,6 +105,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     private readonly _injectablesConfig: IInjectablesConfig;
     private readonly _contentProtection: IContentProtectionConfig;
     private readonly _keyboardPeripherals: IKeyboardPeripheralsConfig;
+    private readonly _upgradeInsecureRequests: UpgradeInsecureRequests;
     private readonly _navigatorProtector: NavigatorProtector | null = null;
     private readonly _keyboardPeripheralsManager: KeyboardPeripherals | null = null;
     private readonly _suspiciousActivityListener: ((event: Event) => void) | null = null;
@@ -177,6 +184,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         this._contentProtection = configuration.contentProtection || {};
         this._decoratorConfig = configuration.decoratorConfig || {};
         this._decorationResizeSelectors = new Set(this._decoratorConfig.resizeWatchSelectors ?? []);
+        this._upgradeInsecureRequests = configuration.upgradeInsecureRequests ?? 'always';
 
         // Merge keyboard peripherals
         this._keyboardPeripherals = this.mergeKeyboardPeripherals(
@@ -264,21 +272,26 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             });
         }
 
+        if (this._destroyed) return;
+
         if(this._layout === Layout.fixed) {
             this.framePool = new FXLFramePoolManager(
                 this.container,
                 this.positions,
                 this.pub,
+                this._layout,
                 this._injector,
                 this._contentProtection,
                 this._keyboardPeripherals,
-                [...this._decorationResizeSelectors]
+                [...this._decorationResizeSelectors],
+                this._upgradeInsecureRequests
             );
             this.framePool.listener = (key: CommsEventKey | ManagerEventKey, data: unknown) => {
                 this.eventListener(key, data);
             }
         } else {
             await this.updateCSS(false);
+            if (this._destroyed) return;
             const cssProperties = this.compileCSSProperties(this._css);
             this.framePool = new FramePoolManager(
                 this.container,
@@ -291,15 +304,22 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                     .flatMap(item => item.references)
                     .map(ref => { const h = ref.indexOf('#'); return h >= 0 ? ref.slice(h + 1) : ''; })
                     .filter(Boolean),
-                [...this._decorationResizeSelectors]
+                [...this._decorationResizeSelectors],
+                this._upgradeInsecureRequests
             );
         }
 
         if(this.currentLocation === undefined)
             this.currentLocation = this.positions[0];
+        else
+            this.currentLocation = this.completeLocator(this.currentLocation);
 
         await this.resizeHandler();
-        await this.apply();
+        if (this._destroyed) return;
+        return new Promise(res => {
+            if (this._destroyed) return res(false);
+            this.go(this.currentLocation, false, res);
+        });
     }
 
     public get settings(): Readonly<EpubSettings> {
@@ -404,7 +424,12 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         const parentEl = this.container.parentElement || document.documentElement;
 
         if (this._layout === Layout.fixed) {
-            this.container.style.width = `${ getContentWidth(parentEl) - this._settings.constraint }px`;
+            const width = getContentWidth(parentEl) - this._settings.constraint;
+            if (isTypedOMSupported()) {
+                this.container.attributeStyleMap.set("width", CSS.px(width));
+            } else {
+                this.container.style.width = `${ width }px`;
+            }
             if (!this.framePool) return;
             (this.framePool as FXLFramePoolManager).resizeHandler();
         } else {
@@ -633,7 +658,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         if(this._layout === Layout.fixed) {
             return modules.filter((m) => FXLModules.includes(m));
         } else modules = modules.filter((m) => ReflowableModules.includes(m));
-        
+
         // CJK/Mongolian vertical: uses the X-axis snapper, never column or scroll snappers
         const mode = getScriptMode(this.pub.metadata);
         if (mode === 'cjk-vertical' || mode === 'mongolian-vertical') {
@@ -874,6 +899,8 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     // End of Decoration
 
     public async destroy() {
+        // Flag synchronously so an in-flight load() bails before attaching frames.
+        this._destroyed = true;
         if (this._suspiciousActivityListener) {
             window.removeEventListener(NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT, this._suspiciousActivityListener);
         }
@@ -1158,7 +1185,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                 const entries = positions.filter(p => p.href === bare);
                 if (!entries.length) return {};
                 const atFragment = fragment
-                    ? entries.find(p => p.locations.fragments[0] === fragment)
+                    ? entries.find(p => p.locations.fragments?.[0] === fragment)
                     : undefined;
                 let candidate: Locator | undefined;
                 if (atFragment) {
@@ -1268,7 +1295,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             return;
         }
 
-        const progression = locator?.locations?.progression;
+        const progression = locator.locations?.progression;
         const hasProgression = progression && progression > 0;
         if(hasProgression)
             done = await new Promise<boolean>((res, _) => {
@@ -1279,7 +1306,42 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         cb(done);
     }
 
+    private completeLocator(locator: Locator): Locator {
+        if(!locator.href) {
+            let fellback = false;
+            if(typeof locator.locations.position === "number") {
+                const match = this.positions.find(p => p.locations.position === locator.locations.position);
+                if (match) {
+                    locator = match.copyWithLocations(locator.locations);
+                    fellback = true;
+                }
+            }
+            if(!fellback && typeof locator.locations?.totalProgression === "number") {
+                // If locator has no href, but it does have a totalProgression,
+                // we can attempt to find the right resource from the positions list.
+                // This is here to help with conversion from OPDS locators which only
+                // require the total progression in the publication.
+                const targetProgression = locator.locations.totalProgression;
+                let closestIdx = 0;
+                let closestDist = Infinity;
+                for (let i = 0; i < this.positions.length; i++) {
+                    const pos = this.positions[i];
+                    // Use totalProgression if available, otherwise estimate from index
+                    const posProg = pos.locations.totalProgression ?? (i / this.positions.length);
+                    const dist = Math.abs(posProg - targetProgression);
+                    if (dist < closestDist) {
+                        closestDist = dist;
+                        closestIdx = i;
+                    }
+                }
+                locator = this.positions[closestIdx].copyWithLocations(locator.locations);
+            }
+        }
+        return locator;
+    }
+
     public go(locator: Locator, _: boolean, cb: (ok: boolean) => void): void {
+        locator = this.completeLocator(locator);
         const href = locator.href.split("#")[0];
         let link = this.pub.readingOrder.findWithHref(href);
         if(!link) {
@@ -1297,6 +1359,10 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             // Now that we've gone to the right locator, we can attach the listeners.
             // Doing this only at this stage reduces janky UI with multiple locator updates.
             this.attachListener();
+        }).catch((error) => {
+            console.error(error);
+            this._isNavigating = false;
+            cb(false);
         });
     }
 

package/src/epub/frame/FrameBlobBuilder.ts

@@ -1,12 +1,50 @@
-import { Link, MediaType, Publication, ReadingProgression } from "@readium/shared";
+import { Link, MediaType, Publication, ReadingProgression, Resource } from "@readium/shared";
 import { Injector } from "../../injection/Injector.ts";
 import { getScriptMode } from "../../helpers/scriptMode.ts";
 
-const csp = (domains: string[]) => {
+/** CSP source expressions cannot carry a query or fragment */
+const cspSource = (url: string) => url.split(/[?#]/)[0];
+
+/** A CSP path only prefix-matches when it ends in a slash; otherwise it must
+ *  match exactly, which would allow the manifest and block every resource.
+ *  See https://w3c.github.io/webappsec-csp/#match-paths */
+const cspRootSource = (url: string) => {
+    const source = cspSource(url);
+    if (source.endsWith("/")) return source;
+    try {
+        const parsed = new URL(source);
+        parsed.pathname = parsed.pathname.substring(
+            0,
+            parsed.pathname.lastIndexOf("/") + 1
+        );
+        return parsed.href;
+    } catch {
+        // Relative root, not parseable by `URL`
+        return source.replace(/[^/]*$/, "");
+    }
+};
+
+/**
+ * A flag to control whether `upgrade-insecure-requests` is included in the Content
+ * Security Policy of each spine-item blob frame:
+ *
+ * - `always` will always upgrade insecure requests
+ * - `never` will never upgrade insecure requests
+ * - `auto` will upgrade insecure requests only when the publication root URL is HTTPS
+ */
+export type UpgradeInsecureRequests = 'always' | 'never' | 'auto';
+
+const csp = (domains: string[], upgrade: UpgradeInsecureRequests = 'always', root?: string) => {
+    const includeUpgrade =
+        upgrade === "always" ||
+        (upgrade === "never"
+            ? false
+            : typeof root === "string" && root.startsWith("https:"));
+
     const d = domains.join(" ");
     return [
         // 'self' is useless because the document is loaded from a blob: URL
-        `upgrade-insecure-requests`,
+        ...(includeUpgrade ? [`upgrade-insecure-requests`] : []),
         `default-src ${d} blob:`,
         `connect-src 'none'`, // No fetches to anywhere. TODO: change?
         `script-src ${d} blob: 'unsafe-inline'`, // JS scripts
@@ -20,73 +58,135 @@ const csp = (domains: string[]) => {
     ].join("; ");
 };
 
-export default class FrameBlobBuider {
-    private readonly item: Link;
-    private readonly burl: string;
-    private readonly pub: Publication;
+export default class FrameBlobBuilder {
     private readonly cssProperties?: { [key: string]: string };
     private readonly injector: Injector | null = null;
+    private readonly upgradeInsecureRequests: UpgradeInsecureRequests;
+
+    private currentUrl?: string;
+    private currentResource?: Resource;
+    private pendingBuild?: Promise<string>;
 
     constructor(
-        pub: Publication,
-        baseURL: string,
-        item: Link,
+        private readonly pub: Publication,
+        private readonly baseURL: string,
+        private readonly item: Link,
         options: {
             cssProperties?: { [key: string]: string };
             injector?: Injector | null;
+            upgradeInsecureRequests?: UpgradeInsecureRequests;
         }
     ) {
-        this.pub = pub;
         this.item = item;
-        this.burl = item.toURL(baseURL) || "";
         this.cssProperties = options.cssProperties;
         this.injector = options.injector ?? null;
+        this.upgradeInsecureRequests = options.upgradeInsecureRequests ?? 'always';
+    }
+
+    public reset() {
+        this.currentUrl && URL.revokeObjectURL(this.currentUrl);
+        this.currentUrl = undefined;
+        this.currentResource?.close();
+        this.currentResource = undefined;
+        this.pendingBuild = undefined;
     }
 
     public async build(fxl = false): Promise<string> {
-        if(!this.item.mediaType.isHTML) {
-            if(this.item.mediaType.isBitmap || this.item.mediaType.equals(MediaType.SVG)) {
-                return this.buildImageFrame();
+        if(this.currentUrl) return this.currentUrl;
+        if(this.pendingBuild) return this.pendingBuild;
+
+        const p = this.doBuild(fxl).finally(() => {
+            if(this.pendingBuild === p) this.pendingBuild = undefined;
+        });
+        this.pendingBuild = p;
+        return p;
+    }
+
+    private async doBuild(fxl: boolean): Promise<string> {
+        this.currentResource = this.pub.get(this.item);
+        const link = await this.currentResource.link();
+        if(!this.currentResource) {
+            // Reset has occured in the meantime
+            return "about:blank";
+        }
+        if(!link.mediaType.isHTML) {
+            if(link.mediaType.isBitmap || link.mediaType.equals(MediaType.SVG)) {
+                const blobUrl = await this.buildImageFrame();
+                this.currentUrl = blobUrl;
+                return blobUrl;
             } else
-                throw Error("Unsupported frame mediatype " + this.item.mediaType.string);
+                throw Error("Unsupported frame mediatype " + link.mediaType.string);
         } else {
-            return await this.buildHtmlFrame(fxl);
+            const blobUrl = await this.buildHtmlFrame(fxl);
+            this.currentUrl = blobUrl;
+            return blobUrl;
         }
     }
 
     private async buildHtmlFrame(fxl = false): Promise<string> {
-        // Load the HTML resource
-        const txt = await this.pub.get(this.item).readAsString();
-        if(!txt) throw new Error(`Failed reading item ${this.item.href}`);
+        if(!this.currentResource) throw new Error("No resource loaded");
 
-        const doc = new DOMParser().parseFromString(
-            txt,
-            this.item.mediaType.string as DOMParserSupportedType
-        );
+        // Load the HTML resource
+        const link = await this.currentResource.link();
+        const doc = await this.currentResource.readAsXML() as HTMLDocument;
+        if(!doc) throw new Error(`Failed reading item ${link.href}`);
 
         const perror = doc.querySelector("parsererror");
         if (perror) {
             const details = perror.querySelector("div");
-            throw new Error(`Failed parsing item ${this.item.href}: ${details?.textContent || perror.textContent}`);
+            throw new Error(`Failed parsing item ${link.href}: ${details?.textContent || perror.textContent}`);
         }
 
         // Apply resource injections if injection service is provided
         if (this.injector) {
-            await this.injector.injectForDocument(doc, this.item);
+            await this.injector.injectForDocument(doc, link);
         }
 
-        return this.finalizeDOM(doc, this.pub.baseURL, this.burl, this.item.mediaType, fxl, this.cssProperties);
+        return this.finalizeDOM(doc, this.pub.baseURL, link.toURL(this.baseURL) || "", link.mediaType, fxl, this.cssProperties, this.upgradeInsecureRequests);
     }
 
-    private buildImageFrame(): string {
-        // Rudimentary image display
-        const doc = document.implementation.createHTMLDocument(this.item.title || this.item.href);
+    private async buildImageFrame(): Promise<string> {
+        if(!this.currentResource) throw new Error("No resource loaded");
+        const link = await this.currentResource.link();
+        const burl = link.toURL(this.baseURL) || ""
+
+        // Rudimentary image display in an HTML doc
+        const doc = document.implementation.createHTMLDocument(link.title || link.href);
+
+        // Add viewport if available
+        if((link?.height || 0) > 0 && (link?.width || 0) > 0) {
+            const viewportMeta = doc.createElement("meta");
+            viewportMeta.name = "viewport";
+            viewportMeta.content = `width=${link.width}, height=${link.height}`;
+            viewportMeta.dataset.readium = "true";
+            doc.head.appendChild(viewportMeta);
+        }
+
         const simg = document.createElement("img");
-        simg.src = this.burl || "";
-        simg.alt = this.item.title || "";
-        simg.decoding = "async";
+        simg.src = burl || "";
+        simg.alt = link.title || "";
+        await simg.decode(); // Reduce repaints
         doc.body.appendChild(simg);
-        return this.finalizeDOM(doc, this.pub.baseURL, this.burl, this.item.mediaType, true);
+
+        // Apply resource injections if injection service is provided
+        if (this.injector) {
+            await this.injector.injectForDocument(doc, new Link({
+                // Temporary solution to address injector only expecting (X)HTML
+                // documents for injection, which we are technically providing
+                href: "readium-image-frame.xhtml",
+                type: MediaType.XHTML.string
+            }));
+        }
+
+        // Add image style
+        const sstyle = doc.createElement("style");
+        sstyle.dataset.readium = "true";
+        sstyle.textContent = `
+        html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 0; }
+        img { margin: 0; padding: 0; border: 0; }`;
+        doc.head.appendChild(sstyle);
+
+        return this.finalizeDOM(doc, this.pub.baseURL, burl, link.mediaType, true, undefined, this.upgradeInsecureRequests);
     }
 
     private setProperties(cssProperties: { [key: string]: string }, doc: Document) {
@@ -96,15 +196,19 @@ export default class FrameBlobBuider {
         }
     }
 
-    private finalizeDOM(doc: Document, root: string | undefined, base: string | undefined, mediaType: MediaType, fxl = false, cssProperties?: { [key: string]: string }): string {
+    private finalizeDOM(doc: Document, root: string | undefined, base: string | undefined, mediaType: MediaType, fxl = false, cssProperties?: { [key: string]: string }, upgradeInsecureRequests: UpgradeInsecureRequests = 'always'): string {
         if(!doc) return "";
 
-        // Get allowed domains from injector if it exists
-        const allowedDomains = this.injector?.getAllowedDomains?.() || [];
+        // Get allowed domains from injector if it exists. Host-configured, so
+        // only strip what CSP cannot express and leave their paths as given
+        const allowedDomains = (this.injector?.getAllowedDomains?.() || []).map(cspSource);
+
+        // The root must be a directory so the policy covers the whole publication
+        const rootSource = root ? cspRootSource(root) : undefined;
 
         // Always include the root domain if provided
         const domains = [...new Set([
-            ...(root ? [root] : []),
+            ...(rootSource ? [rootSource] : []),
             ...allowedDomains
         ])].filter(Boolean);
 
@@ -124,6 +228,7 @@ export default class FrameBlobBuider {
         // loaded in parallel, greatly increasing overall speed.
         doc.body.querySelectorAll("img").forEach((img) => {
             img.setAttribute("fetchpriority", "high");
+            img.setAttribute("referrerpolicy", "origin");
         });
 
         // We need to ensure that lang is set on the root element
@@ -180,7 +285,7 @@ export default class FrameBlobBuider {
         // Add CSP with allowed domains
         const meta = doc.createElement("meta");
         meta.httpEquiv = "Content-Security-Policy";
-        meta.content = csp(domains);
+        meta.content = csp(domains, upgradeInsecureRequests, root);
         meta.dataset.readium = "true";
         doc.head.firstChild!.before(meta);
 

package/src/epub/frame/FrameManager.ts

@@ -31,7 +31,7 @@ export class FrameManager {
         this.frame.sandbox.value = "allow-same-origin allow-scripts";
         this.frame.classList.add("readium-navigator-iframe");
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.opacity = "0";
         this.frame.style.position = "absolute";
         this.frame.style.pointerEvents = "none";
@@ -142,7 +142,7 @@ export class FrameManager {
     async hide(): Promise<void> {
         if(this.destroyed) return;
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.opacity = "0";
         this.frame.style.pointerEvents = "none";
         this.hidden = true;
@@ -178,9 +178,9 @@ export class FrameManager {
 
                     const remove = () => {
                         this.frame.style.removeProperty("visibility");
-                        this.frame.style.removeProperty("aria-hidden");
                         this.frame.style.removeProperty("opacity");
                         this.frame.style.removeProperty("pointer-events");
+                        this.frame.ariaHidden = null;
                         this.hidden = false;
 
                         if (sML.UA.WebKit) {
@@ -202,14 +202,12 @@ export class FrameManager {
     setCSSProperties(properties: { [key: string]: string }) {
         if(this.destroyed || !this.frame.contentWindow) return;
 
-        // We need to resume and halt postMessage to update the properties
-        // if the frame is hidden since it’s been halted in hide()
-        if (this.hidden) {
-            if (this.comms) this.comms?.resume();
-            else this.comms = new FrameComms(this.frame.contentWindow!, this.source);
+        // A halted comms can still send, so only a never-shown hidden frame needs one created
+        if (this.hidden && !this.comms) {
+            this.comms = new FrameComms(this.frame.contentWindow, this.source);
+            this.comms.halt();
         }
         this.comms?.send("update_properties", properties);
-        if (this.hidden) this.comms?.halt();
     }
 
     get iframe() {