@readium/navigator 2.2.7 → 2.2.9

package/src/epub/fxl/FXLFramePoolManager.ts

@@ -6,6 +6,7 @@ import { FXLFrameManager } from "./FXLFrameManager";
 import { FXLPeripherals } from "./FXLPeripherals";
 import { FXLSpreader, Orientation, Spread } from "./FXLSpreader";
 import { VisualNavigatorViewport } from "../../Navigator";
+import { Injector } from "../../injection/Injector";
 
 const UPPER_BOUNDARY = 8;
 const LOWER_BOUNDARY = 5;
@@ -26,6 +27,7 @@ export class FXLFramePoolManager {
     private readonly delayedTimeout: Map<string, number> = new Map();
     private currentBaseURL: string | undefined;
     private previousFrames: FXLFrameManager[] = [];
+    private readonly injector: Injector | null = null;
 
     // NEW
     private readonly bookElement: HTMLDivElement;
@@ -44,10 +46,16 @@ export class FXLFramePoolManager {
     // private readonly pages: FXLFrameManager[] = [];
     public readonly peripherals: FXLPeripherals;
 
-    constructor(container: HTMLElement, positions: Locator[], pub: Publication) {
+    constructor(
+        container: HTMLElement, 
+        positions: Locator[], 
+        pub: Publication,
+        injector?: Injector | null
+    ) {
         this.container = container;
         this.positions = positions;
         this.pub = pub;
+        this.injector = injector ?? null;
         this.spreadPresentation = pub.metadata.otherMetadata?.spread || Spread.auto;
 
         if(this.pub.metadata.effectiveReadingProgression !== ReadingProgression.rtl && this.pub.metadata.effectiveReadingProgression !== ReadingProgression.ltr)
@@ -393,6 +401,9 @@ export class FXLFramePoolManager {
         // Revoke all blobs
         this.blobs.forEach(v => URL.revokeObjectURL(v));
 
+        // Clean up injector if it exists
+        this.injector?.dispose();
+
         // Empty container of elements
         this.container.childNodes.forEach(v => {
             if(v.nodeType === Node.ELEMENT_NODE || v.nodeType === Node.TEXT_NODE) v.remove();
@@ -495,7 +506,14 @@ export class FXLFramePoolManager {
                 const itm = pub.readingOrder.items[index];
                 if(!itm) return; // TODO throw?
                 if(!this.blobs.has(href)) {
-                    const blobBuilder = new FrameBlobBuider(pub, this.currentBaseURL || "", itm);
+                    const blobBuilder = new FrameBlobBuider(
+                        pub, 
+                        this.currentBaseURL || "", 
+                        itm,
+                        {
+                            injector: this.injector
+                        }
+                    );
                     const blobURL = await blobBuilder.build(true);
                     this.blobs.set(href, blobURL);
                 }

package/src/helpers/minify.ts

@@ -0,0 +1,14 @@
+/**
+ * Utilities for processing CSS and JavaScript content
+ */
+
+/**
+ * Minifies JavaScript by removing comments and normalizing whitespace
+ */
+export const stripJS = (source: string) => source.replace(/\/\/.*/g, "").replace(/\/\*[\s\S]*?\*\//g, "").replace(/\n/g, "").replace(/\s+/g, " ");
+
+/**
+ * Minifies CSS by removing comments and normalizing whitespace
+ * Note: URL resolution should be handled by the caller with correct context
+ */
+export const stripCSS = (source: string) => source.replace(/\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, "").replace(/ {2,}/g, " ");

package/src/index.ts

@@ -4,4 +4,5 @@ export * from './epub';
 export * from './audio';
 export * from './helpers';
 export * from './preferences';
-export * from './css';
+export * from './css';
+export * from './injection';

package/src/injection/Injectable.ts

@@ -0,0 +1,85 @@
+import { Link } from "@readium/shared";
+
+type ForbiddenAttributes = "type" | "rel" | "href" | "src";
+type AllowedAttributes = {
+    [K in string]: K extends ForbiddenAttributes 
+        ? never 
+        : (string | boolean | undefined);
+} & {
+    [K in ForbiddenAttributes]?: never;
+};
+
+export interface IBaseInjectable {
+    id?: string;
+    target?: "head" | "body";
+    type?: string;
+    condition?: (doc: Document) => boolean;
+        
+    // Extra attributes - type and rel are forbidden here since they are at root
+    attributes?: AllowedAttributes;
+}
+
+export interface IScriptInjectable extends IBaseInjectable {
+    as: "script";
+    rel?: never; // Scripts don't have rel
+}
+
+export interface ILinkInjectable extends IBaseInjectable {
+    as: "link";
+    rel: string;
+}
+
+export interface IUrlInjectable {
+    url: string;
+}
+
+export interface IBlobInjectable {
+    blob: Blob;
+}
+
+export type IInjectable = (IScriptInjectable | ILinkInjectable) & (IUrlInjectable | IBlobInjectable);
+
+/**
+ * Defines a rule for resource injection, specifying which resources to inject into which documents.
+ */
+export interface IInjectableRule {
+    /**
+     * List of resource URLs or patterns that this rule applies to.
+     * Can be exact URLs or patterns with wildcards.
+     */
+    resources: Array<string | RegExp>;
+    
+    /**
+     * Resources to inject at the beginning of the target (in array order)
+     */
+    prepend?: IInjectable[];
+    
+    /**
+     * Resources to inject at the end of the target (in array order)
+     */
+    append?: IInjectable[];
+}
+
+export interface IInjectablesConfig {
+    rules: IInjectableRule[];
+    allowedDomains?: string[];
+}
+
+export interface IInjector {
+    /**
+     * Injects resources into a document based on matching rules
+     * @param doc The document to inject resources into
+     * @param link The link being loaded, used to match against injection rules
+     */
+    injectForDocument(doc: Document, link: Link): Promise<void>;
+    
+    /**
+     * Cleans up any resources used by the injector
+     */
+    dispose(): void;
+
+    /**
+     * Get the list of allowed domains
+     */
+    getAllowedDomains(): string[]
+}

package/src/injection/Injector.ts

@@ -0,0 +1,356 @@
+import { IInjectableRule, IInjectable, IInjector, IInjectablesConfig } from "./Injectable";
+import { Link } from "@readium/shared";
+
+const inferTypeFromResource = (resource: IInjectable): string | undefined => {
+    // If blob has a type, use it
+    if ("blob" in resource && resource.blob.type) {
+        return resource.blob.type;
+    }
+    
+    // For scripts, default to text/javascript
+    if (resource.as === "script") {
+        return "text/javascript";
+    }
+    
+    // For links, try to infer from URL extension
+    if (resource.as === "link" && "url" in resource) {
+        const url = resource.url.toLowerCase();
+        if (url.endsWith(".css")) return "text/css";
+        if ([".js", ".mjs", ".cjs"].some(ext => url.endsWith(ext))) return "text/javascript";
+    }
+    
+    return undefined;
+};
+
+const applyAttributes = (element: HTMLElement, resource: IInjectable): void => {
+    // Apply extra attributes, filtering out root-level properties
+    if (resource.attributes) {
+        Object.entries(resource.attributes).forEach(([key, value]) => {
+            // Skip root-level properties to prevent conflicts
+            if (key === "type" || key === "rel" || key === "href" || key === "src") {
+                return;
+            }
+            
+            if (value !== undefined && value !== null) {
+                // Convert boolean attributes to proper HTML format
+                if (typeof value === "boolean") {
+                    if (value) {
+                        element.setAttribute(key, "");
+                    }
+                } else {
+                    element.setAttribute(key, value);
+                }
+            }
+        });
+    }
+};
+
+const scriptify = (doc: Document, resource: IInjectable, source: string): HTMLScriptElement => {
+    const s = doc.createElement("script");
+    s.dataset.readium = "true";
+    
+    // Set the injectable ID if provided
+    if (resource.id) {
+        s.id = resource.id;
+    }
+    
+    // Apply root-level type if provided
+    const finalType = resource.type || inferTypeFromResource(resource);
+    if (finalType) {
+        s.type = finalType;
+    }
+    
+    // Apply extra attributes
+    applyAttributes(s, resource);
+    
+    // Always set src from the processed URL
+    s.src = source;
+    
+    return s;
+};
+
+const linkify = (doc: Document, resource: IInjectable, source: string): HTMLLinkElement => {
+    const s = doc.createElement("link");
+    s.dataset.readium = "true";
+    
+    // Set the injectable ID if provided
+    if (resource.id) {
+        s.id = resource.id;
+    }
+    
+    // Apply root-level rel if provided
+    if (resource.rel) {
+        s.rel = resource.rel;
+    }
+    
+    const finalType = resource.type || inferTypeFromResource(resource);
+    if (finalType) {
+        s.type = finalType;
+    }
+    
+    // Apply extra attributes
+    applyAttributes(s, resource);
+    
+    // Always set href from the processed URL
+    s.href = source;
+    
+    return s;
+};
+
+export class Injector implements IInjector {
+    private readonly blobStore: Map<string, { url: string; refCount: number }> = new Map();
+    private readonly createdBlobUrls: Set<string> = new Set();
+    private readonly rules: IInjectableRule[];
+    private readonly allowedDomains: string[] = [];
+    private injectableIdCounter = 0;
+    
+    constructor(config: IInjectablesConfig) {
+        // Validate allowed domains - they should be proper URLs for external resources
+        this.allowedDomains = (config.allowedDomains || []).map(domain => {
+            try {
+                new URL(domain);
+                return domain;
+            } catch {
+                throw new Error(`Invalid allowed domain: "${domain}". Must be a valid URL (e.g., "https://fonts.googleapis.com").`);
+            }
+        });
+        
+        // Assign IDs to injectables that don't have them
+        this.rules = config.rules.map(rule => {
+            const processedRule: IInjectableRule = { ...rule };
+            
+            // Process prepend injectables (reverse to preserve order when prepending)
+            if (rule.prepend) {
+                processedRule.prepend = rule.prepend.map(injectable => ({
+                    ...injectable,
+                    id: injectable.id || `injectable-${this.injectableIdCounter++}`
+                })).reverse(); // Reverse here so we can process normally later
+            }
+            
+            // Process append injectables (keep original order)
+            if (rule.append) {
+                processedRule.append = rule.append.map(injectable => ({
+                    ...injectable,
+                    id: injectable.id || `injectable-${this.injectableIdCounter++}`
+                }));
+            }
+            
+            return processedRule;
+        });
+    }
+    
+    public dispose(): void {
+        // Cleanup any created blob URLs
+        for (const url of this.createdBlobUrls) {
+            try {
+                URL.revokeObjectURL(url);
+            } catch (error) {
+                console.warn("Failed to revoke blob URL:", url, error);
+            }
+        }
+        this.createdBlobUrls.clear();
+    }
+
+    public getAllowedDomains(): string[] {
+        return [...this.allowedDomains]; // Return a copy to prevent external modification
+    }
+
+    public async injectForDocument(doc: Document, link: Link): Promise<void> {        
+        for (const rule of this.rules) {
+            if (this.matchesRule(rule, link)) {
+                await this.applyRule(doc, rule);
+            }
+        }
+    }
+
+    private matchesRule(rule: IInjectableRule, link: Link): boolean {
+        // Use the original href from the publication, not the resolved blob URL
+        const originalHref = link.href;
+        
+        return rule.resources.some(pattern => {
+            if (pattern instanceof RegExp) {
+                return pattern.test(originalHref);
+            }
+            return originalHref === pattern;
+        });
+    }
+
+    private async getOrCreateBlobUrl(resource: IInjectable): Promise<string> {
+        // Use the injectable ID as the cache key
+        const cacheKey = resource.id!; // ID is guaranteed to exist after constructor
+        
+        if (this.blobStore.has(cacheKey)) {
+            const entry = this.blobStore.get(cacheKey)!;
+            entry.refCount++;
+            return entry.url;
+        }
+
+        if ("blob" in resource) {
+            const url = URL.createObjectURL(resource.blob);
+            this.blobStore.set(cacheKey, { url, refCount: 1 });
+            this.createdBlobUrls.add(url);
+            return url;
+        }
+        
+        throw new Error("Resource must have a blob property");
+    }
+
+    public async releaseBlobUrl(url: string): Promise<void> {
+        if (!this.createdBlobUrls.has(url)) return;
+
+        const entry = Array.from(this.blobStore.values())
+            .find(entry => entry.url === url);
+
+        if (entry) {
+            entry.refCount--;
+            if (entry.refCount <= 0) {
+                URL.revokeObjectURL(url);
+                this.createdBlobUrls.delete(url);
+                // Remove from blobStore
+                for (const [key, value] of this.blobStore.entries()) {
+                    if (value.url === url) {
+                        this.blobStore.delete(key);
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    private async getResourceUrl(resource: IInjectable, doc: Document): Promise<string> {
+        if ("url" in resource) {
+            const resolvedUrl = new URL(resource.url, doc.baseURI).toString();
+            if (!this.isValidUrl(resolvedUrl, doc)) {
+                throw new Error(`Invalid URL: Only HTTPS, data:, blob:, or localhost HTTP URLs are allowed. Got: ${resource.url}`);
+            }
+            return resolvedUrl;
+        } else {
+            return this.getOrCreateBlobUrl(resource);
+        }
+    }
+
+    private createPreloadLink(doc: Document, resource: IInjectable, url: string): void {
+        if (resource.as !== "link" || resource.rel !== "preload") return;
+        
+        // Create a new resource object with preload attributes
+        const preloadResource: IInjectable = {
+            ...resource,
+            rel: "preload",
+            attributes: {
+                ...resource.attributes,
+                as: resource.as
+            }
+        };
+        
+        const preloadLink = linkify(doc, preloadResource, url);
+        doc.head.appendChild(preloadLink);
+    }
+
+    private createElement(doc: Document, resource: IInjectable, source: string): HTMLElement {
+        if (resource.as === "script") {
+            return scriptify(doc, resource, source);
+        }
+        if (resource.as === "link") {
+            return linkify(doc, resource, source);
+        }
+        throw new Error(`Unsupported element type: ${(resource as any).as}`);
+    }
+
+    private async applyRule(doc: Document, rule: IInjectableRule): Promise<void> {
+        const createdElements: { element: HTMLElement; url: string }[] = [];
+        
+        // Collect all injectables that pass their conditions before modifying the document
+        const prependInjectables = rule.prepend ? rule.prepend.filter(resource => 
+            !resource.condition || resource.condition(doc)
+        ) : [];
+        
+        const appendInjectables = rule.append ? rule.append.filter(resource => 
+            !resource.condition || resource.condition(doc)
+        ) : [];
+        
+        try {
+            // Process prepend injectables first (already reversed in constructor)
+            for (const resource of prependInjectables) {
+                await this.processInjectable(resource, doc, createdElements, "prepend");
+            }
+            
+            // Process append injectables next (in order)
+            for (const resource of appendInjectables) {
+                await this.processInjectable(resource, doc, createdElements, "append");
+            }
+        } catch (error) {
+            // Clean up any created elements on error
+            for (const { element, url } of createdElements) {
+                try {
+                    element.remove();
+                    await this.releaseBlobUrl(url);
+                } catch (cleanupError) {
+                    console.error("Error during cleanup:", cleanupError);
+                }
+            }
+            throw error;
+        }
+    }
+    
+    private async processInjectable(
+        resource: IInjectable, 
+        doc: Document, 
+        createdElements: { element: HTMLElement; url: string }[], 
+        position: "prepend" | "append"
+    ): Promise<void> {
+        const target = resource.target === "body" ? doc.body : doc.head;
+        if (!target) return;
+
+        let url: string | null = null;
+        try {
+            url = await this.getResourceUrl(resource, doc);
+            
+            if (resource.rel === "preload" && "url" in resource) {
+                this.createPreloadLink(doc, resource, url);
+            } else {
+                const element = this.createElement(doc, resource, url);
+                createdElements.push({ element, url });
+                
+                if (position === "prepend") {
+                    target.prepend(element);
+                } else {
+                    target.append(element);
+                }
+            }
+        } catch (error) {
+            console.error("Failed to process resource:", error);
+            if (url && "blob" in resource) {
+                await this.releaseBlobUrl(url);
+            }
+            throw error;
+        }
+    }
+
+    private isValidUrl(url: string, doc: Document): boolean {
+        try {
+            const parsed = new URL(url, doc.baseURI);
+            
+            // Allow data URLs
+            if (parsed.protocol === "data:") return true;
+            
+            // Allow blob URLs that we created
+            if (parsed.protocol === "blob:" && this.createdBlobUrls.has(url)) {
+                return true;
+            }
+
+            // Check against allowed domains if any are specified
+            if (this.allowedDomains.length > 0) {
+                const origin = parsed.origin;
+                return this.allowedDomains.some(allowed => {
+                    const allowedOrigin = new URL(allowed).origin;
+                    return origin === allowedOrigin;
+                });
+            }
+
+            // No allowed domains specified - deny external URLs
+            return false;
+        } catch {
+            return false;
+        }
+    }
+}

package/src/injection/epubInjectables.ts

@@ -0,0 +1,90 @@
+import { IInjectableRule, IInjectable } from "../injection/Injectable";
+import { stripJS, stripCSS } from "../helpers/minify";
+import { Metadata, Layout } from "@readium/shared";
+
+import readiumCSSAfter from "@readium/css/css/dist/ReadiumCSS-after.css?raw";
+import readiumCSSBefore from "@readium/css/css/dist/ReadiumCSS-before.css?raw";
+import readiumCSSDefault from "@readium/css/css/dist/ReadiumCSS-default.css?raw";
+
+import cssSelectorGeneratorContent from "../dom/_readium_cssSelectorGenerator.js?raw";
+import executionPreventionContent from "../dom/_readium_executionPrevention.js?raw";
+import onloadProxyContent from "../dom/_readium_executionCleanup.js?raw";
+
+/**
+ * Creates injectable rules for EPUB content documents
+ */
+export function createReadiumEpubRules(metadata: Metadata): IInjectableRule[] {
+    const isFixedLayout = metadata.effectiveLayout === Layout.fixed;
+    
+    // Core injectables that should be prepended
+    const prependInjectables: IInjectable[] = [
+        // CSS Selector Generator - always injected
+        {
+            id: "css-selector-generator",
+            as: "script",
+            target: "head",
+            blob: new Blob([stripJS(cssSelectorGeneratorContent)], { type: "text/javascript" })
+        },
+        // Execution Prevention - conditional (has executable scripts)
+        {
+            id: "execution-prevention",
+            as: "script",
+            target: "head",
+            blob: new Blob([stripJS(executionPreventionContent)], { type: "text/javascript" }),
+            condition: (doc: Document) => !!(doc.querySelector("script") || doc.querySelector("body[onload]:not(body[onload=''])"))
+        }
+    ];
+
+    // Core injectables that should be appended
+    const appendInjectables: IInjectable[] = [
+        // Onload Proxy - conditional (has executable scripts)
+        {
+            id: "onload-proxy",
+            as: "script",
+            target: "head",
+            blob: new Blob([stripJS(onloadProxyContent)], { type: "text/javascript" }),
+            condition: (doc: Document) => !!(doc.querySelector("script") || doc.querySelector("body[onload]:not(body[onload=''])"))
+        }
+    ];
+
+    // Only add Readium CSS for reflowable documents
+    if (!isFixedLayout) {
+        // Readium CSS Before - prepended for reflowable
+        prependInjectables.unshift({
+            id: "readium-css-before",
+            as: "link",
+            target: "head",
+            blob: new Blob([stripCSS(readiumCSSBefore)], { type: "text/css" }),
+            rel: "stylesheet"
+        });
+        
+        // Readium CSS Default and After - appended for reflowable
+        appendInjectables.unshift(
+            // Readium CSS Default - only for reflowable AND no existing styles
+            {
+                id: "readium-css-default",
+                as: "link",
+                target: "head",
+                blob: new Blob([stripCSS(readiumCSSDefault)], { type: "text/css" }),
+                rel: "stylesheet",
+                condition: (doc: Document) => !(doc.querySelector("link[rel='stylesheet']") || doc.querySelector("style") || doc.querySelector("[style]:not([style=''])"))
+            },
+            // Readium CSS After - only for reflowable
+            {
+                id: "readium-css-after",
+                as: "link",
+                target: "head",
+                blob: new Blob([stripCSS(readiumCSSAfter)], { type: "text/css" }),
+                rel: "stylesheet"
+            }
+        );
+    }
+
+    return [
+        {
+            resources: [/\.xhtml$/, /\.html$/],
+            prepend: prependInjectables,
+            append: appendInjectables
+        }
+    ];
+}

package/src/injection/index.ts

@@ -0,0 +1,2 @@
+export * from "./Injectable";
+export * from "./Injector";

package/src/injection/webpubInjectables.ts

@@ -0,0 +1,59 @@
+import { IInjectableRule, IInjectable } from "../injection/Injectable";
+import { stripJS, stripCSS } from "../helpers/minify";
+
+import readiumCSSWebPub from "@readium/css/css/dist/webPub/ReadiumCSS-webPub.css?raw";
+
+import cssSelectorGeneratorContent from "../dom/_readium_cssSelectorGenerator.js?raw";
+import webpubExecutionContent from "../dom/_readium_webpubExecution.js?raw";
+import onloadProxyContent from "../dom/_readium_executionCleanup.js?raw";
+
+/**
+ * Creates injectable rules for WebPub content documents
+ */
+export function createReadiumWebPubRules(): IInjectableRule[] {
+    // Core injectables that should be prepended
+    const prependInjectables: IInjectable[] = [
+        // CSS Selector Generator - always injected
+        {
+            id: "css-selector-generator",
+            as: "script",
+            target: "head",
+            blob: new Blob([stripJS(cssSelectorGeneratorContent)], { type: "text/javascript" })
+        },
+        // WebPub Execution - always injected (sets up event blocking to false)
+        {
+            id: "webpub-execution",
+            as: "script",
+            target: "head",
+            blob: new Blob([stripJS(webpubExecutionContent)], { type: "text/javascript" })
+        }
+    ];
+
+    // Core injectables that should be appended
+    const appendInjectables: IInjectable[] = [
+        // Onload Proxy - conditional (has executable scripts)
+        {
+            id: "onload-proxy",
+            as: "script",
+            target: "head",
+            blob: new Blob([stripJS(onloadProxyContent)], { type: "text/javascript" }),
+            condition: (doc: Document) => !!(doc.querySelector("script") || doc.querySelector("body[onload]:not(body[onload=''])"))
+        },
+        // Readium CSS WebPub - always injected
+        {
+            id: "readium-css-webpub",
+            as: "link",
+            target: "head",
+            blob: new Blob([stripCSS(readiumCSSWebPub)], { type: "text/css" }),
+            rel: "stylesheet"
+        }
+    ];
+
+    return [
+        {
+            resources: [/\.xhtml$/, /\.html$/],
+            prepend: prependInjectables,
+            append: appendInjectables
+        }
+    ];
+}