@readium/navigator 2.3.0 → 2.4.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.3.0",
+  "version": "2.4.0-alpha.0",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",
@@ -44,15 +44,8 @@
   "engines": {
     "node": ">=18"
   },
-  "scripts": {
-    "clean": "rimraf types dist",
-    "build": "pnpm clean && node scripts/generate-css-selector.js && tsc && vite build",
-    "generate:css-selector": "node scripts/generate-css-selector.js"
-  },
   "devDependencies": {
     "@readium/css": "^2.0.0",
-    "@readium/navigator-html-injectables": "workspace:*",
-    "@readium/shared": "workspace:*",
     "@types/path-browserify": "^1.0.3",
     "css-selector-generator": "^3.8.0",
     "path-browserify": "^1.0.1",
@@ -61,6 +54,13 @@
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
     "user-agent-data-types": "^0.4.2",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "@readium/shared": "2.1.5",
+    "@readium/navigator-html-injectables": "2.3.0"
+  },
+  "scripts": {
+    "clean": "rimraf types dist",
+    "build": "pnpm clean && node scripts/generate-css-selector.js && tsc && vite build",
+    "generate:css-selector": "node scripts/generate-css-selector.js"
   }
-}
+}

package/src/epub/frame/FrameBlobBuilder.ts

@@ -21,24 +21,19 @@ const csp = (domains: string[]) => {
 };
 
 export default class FrameBlobBuider {
-    private readonly item: Link;
-    private readonly burl: string;
-    private readonly pub: Publication;
     private readonly cssProperties?: { [key: string]: string };
     private readonly injector: Injector | null = null;
 
     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;
         }
     ) {
-        this.pub = pub;
         this.item = item;
-        this.burl = item.toURL(baseURL) || "";
         this.cssProperties = options.cssProperties;
         this.injector = options.injector ?? null;
     }
@@ -46,7 +41,7 @@ export default class FrameBlobBuider {
     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();
+                return await this.buildImageFrame();
             } else
                 throw Error("Unsupported frame mediatype " + this.item.mediaType.string);
         } else {
@@ -75,18 +70,20 @@ export default class FrameBlobBuider {
             await this.injector.injectForDocument(doc, this.item);
         }
 
-        return this.finalizeDOM(doc, this.pub.baseURL, this.burl, this.item.mediaType, fxl, this.cssProperties);
+        return this.finalizeDOM(doc, this.pub.baseURL, (await this.pub.get(this.item).link()).toURL(this.baseURL) || "", this.item.mediaType, fxl, this.cssProperties);
     }
 
-    private buildImageFrame(): string {
+    private async buildImageFrame(): Promise<string> {
+        const burl = (await this.pub.get(this.item).link()).toURL(this.baseURL) || ""
+
         // Rudimentary image display
         const doc = document.implementation.createHTMLDocument(this.item.title || this.item.href);
         const simg = document.createElement("img");
-        simg.src = this.burl || "";
+        simg.src = burl || "";
         simg.alt = this.item.title || "";
         simg.decoding = "async";
         doc.body.appendChild(simg);
-        return this.finalizeDOM(doc, this.pub.baseURL, this.burl, this.item.mediaType, true);
+        return this.finalizeDOM(doc, this.pub.baseURL, burl, this.item.mediaType, true);
     }
 
     private setProperties(cssProperties: { [key: string]: string }, doc: Document) {
@@ -101,7 +98,10 @@ export default class FrameBlobBuider {
 
         // Get allowed domains from injector if it exists
         const allowedDomains = this.injector?.getAllowedDomains?.() || [];
-        
+
+        // Remove query from root if present, as CSP doesn't allow them
+        root = root?.split("?")[0];
+
         // Always include the root domain if provided
         const domains = [...new Set([
             ...(root ? [root] : []),
@@ -124,6 +124,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 

package/types/src/epub/frame/FrameBlobBuilder.d.ts

@@ -1,9 +1,9 @@
 import { Link, Publication } from "@readium/shared";
 import { Injector } from "../../injection/Injector";
 export default class FrameBlobBuider {
-    private readonly item;
-    private readonly burl;
     private readonly pub;
+    private readonly baseURL;
+    private readonly item;
     private readonly cssProperties?;
     private readonly injector;
     constructor(pub: Publication, baseURL: string, item: Link, options: {