fix(security): sanitize Reader CSS references with a CSS-syntax scanner

static/reader.js

@@ -366,6 +366,7 @@ const readerContext = {
   get returnHistoryKey() { return returnHistoryKey; },
   get runFullSearch() { return runFullSearch; },
   get sanitizeEpubDocument() { return sanitizeEpubDocument; }, set sanitizeEpubDocument(value) { sanitizeEpubDocument = value; },
+  get sanitizeFoliateStyles() { return sanitizeFoliateStyles; }, set sanitizeFoliateStyles(value) { sanitizeFoliateStyles = value; },
   get saveDeadline() { return saveDeadline; }, set saveDeadline(value) { saveDeadline = value; },
   get saveProgress() { return saveProgress; }, set saveProgress(value) { saveProgress = value; },
   get saveTimer() { return saveTimer; }, set saveTimer(value) { saveTimer = value; },
@@ -644,7 +645,7 @@ let {
 } = createReaderPdfTextRuntime(readerContext);
 
 let {
-  normalizeEpubDocument, sanitizeReaderDocument, sanitizeEpubDocument, parseChapterDocument,
+  normalizeEpubDocument, sanitizeReaderDocument, sanitizeEpubDocument, sanitizeFoliateStyles, parseChapterDocument,
   epubContentBody, renderText, sanitizeOfflineHtml, buildDiscourseDocument,
   prepareHtmlDocument, buildHtmlFrameSource, waitForSpreadsheetImages, renderHtml,
   detectHtmlEncoding, repairHtmlContrast

static/reader/formats/reader-foliate-format.mjs

@@ -160,7 +160,7 @@ export function createReaderFoliateFormat(readerContext) {
     const sourceNodes = new WeakMap();
     while (original.nextNode() && cloned.nextNode())
       sourceNodes.set(cloned.currentNode, original.currentNode);
-    return { doc: readerContext.sanitizeEpubDocument(doc), sourceNodes };
+    return { doc: readerContext.sanitizeEpubDocument(doc, { keepBlobImports: true }), sourceNodes };
   }
 
   function foliateSearchAnchor(source, sourceNodes, body, renderedBody) {
@@ -334,7 +334,11 @@ export function createReaderFoliateFormat(readerContext) {
     const { doc, sourceNodes } = readerContext.cloneFoliateDocument(source);
     readerContext.assertReaderActive();
     readerContext.rewriteFoliateResources(doc, section);
-    const styles = [...doc.querySelectorAll("style,link")].map((node) => node.cloneNode(true));
+    // Packaged CSS is loaded from Foliate blob: URLs; inline it sanitized so
+    // remote url()/@import references cannot bypass the archive-only policy.
+    const styles = await readerContext.sanitizeFoliateStyles([...doc.querySelectorAll("style,link")]);
+    signal.throwIfAborted();
+    readerContext.assertReaderActive();
     for (const node of doc.querySelectorAll("style,link")) node.remove();
     const article = document.createElement("article");
     article.dataset.section = String(index);

static/reader/formats/reader-html-format.mjs

@@ -25,7 +25,7 @@ export function createReaderHtmlFormat(readerContext) {
     return doc;
   }
 
-  function sanitizeReaderDocument(doc, { preserveEpubStyles = false } = {}) {
+  function sanitizeReaderDocument(doc, { preserveEpubStyles = false, keepBlobImports = false } = {}) {
     const blocked = preserveEpubStyles
       ? "script,iframe,object,embed,base,form"
       : "script,iframe,object,embed,base,form,link,style";
@@ -33,17 +33,12 @@ export function createReaderHtmlFormat(readerContext) {
     if (preserveEpubStyles) {
       for (const link of doc.querySelectorAll("link")) {
         const rel = (link.getAttribute("rel") || "").toLowerCase().split(/\s+/);
-        if (!rel.includes("stylesheet") || !/^blob:/i.test(link.getAttribute("href") || ""))
+        if (!rel.includes("stylesheet") || rel.includes("alternate") ||
+            !/^blob:/i.test(link.getAttribute("href") || ""))
           link.remove();
       }
-      for (const style of doc.querySelectorAll("style")) {
-        if (
-          /(?:@import\s+|url\s*\(\s*[\"']?)(?:https?:|\/\/|javascript:)/i.test(
-            style.textContent || ""
-          )
-        )
-          style.remove();
-      }
+      for (const style of doc.querySelectorAll("style"))
+        style.textContent = sanitizeCssReferences(style.textContent || "", { keepBlobImports });
     }
     for (const element of doc.querySelectorAll("*"))
       for (const attribute of [...element.attributes]) {
@@ -60,12 +55,347 @@ export function createReaderHtmlFormat(readerContext) {
           (urlAttribute && /^(?:javascript|vbscript):/i.test(schemeValue))
         )
           element.removeAttribute(attribute.name);
+        else if (CSS_VALUE_ATTRIBUTES.has(name)) {
+          const clean = sanitizeCssReferences(attribute.value);
+          if (clean !== attribute.value) element.setAttribute(attribute.name, clean);
+        }
       }
     return doc;
   }
 
-  function sanitizeEpubDocument(doc) {
-    return readerContext.sanitizeReaderDocument(readerContext.normalizeEpubDocument(doc), { preserveEpubStyles: true });
+  // Style attributes and SVG presentation attributes that accept CSS url().
+  const CSS_VALUE_ATTRIBUTES = new Set([
+    "style", "fill", "stroke", "filter", "mask", "clip-path",
+    "marker-start", "marker-mid", "marker-end", "cursor"
+  ]);
+  // Functions whose string arguments are resource URLs (CSS Images 4/Fonts 4).
+  const CSS_REFERENCE_FUNCTIONS = new Set([
+    "url", "src", "image", "image-set", "-webkit-image-set", "cross-fade", "-webkit-cross-fade"
+  ]);
+  const CSS_BLOB_STYLESHEET_MAX_BYTES = 4 * 1024 * 1024;
+  const CSS_IMPORT_MAX_DEPTH = 4;
+  const CSS_IMPORT_MAX_PER_SHEET = 32;
+
+  function cssNameChar(code) {
+    return (code >= 0x61 && code <= 0x7a) || (code >= 0x41 && code <= 0x5a) ||
+      (code >= 0x30 && code <= 0x39) || code === 0x2d || code === 0x5f || code >= 0x80;
+  }
+
+  function cssWhitespace(code) {
+    return code === 0x20 || code === 0x09 || code === 0x0a || code === 0x0c || code === 0x0d;
+  }
+
+  // Resource policy: fragments, blob:, data: and same-origin relative paths only.
+  // data: cannot fetch, blob: is an unguessable same-origin object, and any scheme
+  // (https:, javascript:, file:...) or protocol-relative reference is rejected
+  // after control/whitespace normalization, matching URL parser leniency.
+  function safeCssReference(raw, { strict = false } = {}) {
+    if (strict) return false;
+    const value = String(raw || "").replace(/[\u0000-\u0020\u007f-\u009f]/g, "");
+    if (!value || value.startsWith("#") || /^(?:blob|data):/i.test(value)) return true;
+    if (/^[\\/]{2}/.test(value)) return false;
+    return !/^[a-z][a-z0-9+.-]*:/i.test(value);
+  }
+
+  // Minimal CSS Syntax 3 scanner: decodes escapes and honours strings/comments
+  // exactly where the browser does, so escaped names (`\75rl(`), comments
+  // (`@import/**/"x"`) and quoted references cannot hide a remote fetch.
+  // Unsafe url()/image-set()/image() become `none` ("" in strict mode), unsafe
+  // custom-property URL strings become "", and unsafe
+  // @import rules are removed. Everything else is copied byte-for-byte.
+  function scanCss(source, { strict = false, keepBlobImports = false, blobImports = null, nonce = "" } = {}) {
+    const css = String(source || "");
+    const length = css.length;
+    const edits = [];
+    const stack = [];
+    let i = 0, customValueDepth = -1, imports = 0;
+    // Offline HTML historically deletes references; EPUB styles keep a valid
+    // `none` so shorthand declarations stay parseable.
+    const removed = strict ? "" : "none";
+
+    const readEscape = () => {
+      // css[i] is a backslash that is not followed by a newline.
+      i++;
+      if (i >= length) return "\ufffd";
+      let hex = "";
+      while (hex.length < 6 && i < length && /[0-9a-f]/i.test(css[i])) hex += css[i++];
+      if (hex) {
+        if (i < length && css[i] === "\r" && css[i + 1] === "\n") i += 2;
+        else if (i < length && cssWhitespace(css.charCodeAt(i))) i++;
+        const code = parseInt(hex, 16);
+        return code === 0 || code > 0x10ffff || (code >= 0xd800 && code <= 0xdfff)
+          ? "\ufffd" : String.fromCodePoint(code);
+      }
+      const char = String.fromCodePoint(css.codePointAt(i));
+      i += char.length;
+      return char;
+    };
+    const validEscape = (at) => css[at] === "\\" && at + 1 < length && !/[\n\r\f]/.test(css[at + 1]);
+    const readName = () => {
+      let name = "";
+      while (i < length) {
+        if (cssNameChar(css.charCodeAt(i))) name += css[i++];
+        else if (validEscape(i)) name += readEscape();
+        else break;
+      }
+      return name;
+    };
+    const readString = () => {
+      const quote = css[i++];
+      let value = "";
+      while (i < length) {
+        const char = css[i];
+        if (char === quote) { i++; return value; }
+        if (char === "\n" || char === "\r" || char === "\f") return value; // bad-string
+        if (char === "\\") {
+          if (i + 1 >= length) { i++; continue; }
+          if (css[i + 1] === "\r" && css[i + 2] === "\n") { i += 3; continue; }
+          if (/[\n\r\f]/.test(css[i + 1])) { i += 2; continue; }
+          value += readEscape();
+          continue;
+        }
+        value += char;
+        i++;
+      }
+      return value;
+    };
+    const skipComment = () => {
+      const end = css.indexOf("*/", i + 2);
+      i = end < 0 ? length : end + 2;
+    };
+    // Unquoted url( token; `i` is just after "(". Returns null for bad-url.
+    const readUrlToken = () => {
+      let value = "", bad = false;
+      while (i < length) {
+        const code = css.charCodeAt(i);
+        if (css[i] === ")") { i++; return bad ? null : value; }
+        if (cssWhitespace(code)) {
+          while (i < length && cssWhitespace(css.charCodeAt(i))) i++;
+          if (css[i] !== ")" && i < length) bad = true;
+          continue;
+        }
+        if (css[i] === "\"" || css[i] === "'" || css[i] === "(" || code <= 0x08 ||
+            code === 0x0b || (code >= 0x0e && code <= 0x1f) || code === 0x7f) {
+          bad = true; i++; continue;
+        }
+        if (css[i] === "\\") {
+          if (validEscape(i)) value += readEscape();
+          else { bad = true; i++; }
+          continue;
+        }
+        value += css[i++];
+      }
+      return bad ? null : value;
+    };
+    // Skip to the end of an @import prelude (`;`) or past a stray `{...}` block.
+    const skipAtRule = () => {
+      let depth = 0;
+      while (i < length) {
+        const char = css[i];
+        if (char === "/" && css[i + 1] === "*") { skipComment(); continue; }
+        if (char === "\"" || char === "'") { readString(); continue; }
+        if (char === "\\") { if (validEscape(i)) readEscape(); else i++; continue; }
+        i++;
+        if (char === "(" || char === "[" || char === "{") depth++;
+        else if (char === ")" || char === "]") depth = Math.max(0, depth - 1);
+        else if (char === "}") { if (--depth <= 0) return; }
+        else if (char === ";" && depth === 0) return;
+      }
+    };
+    const handleImport = (start) => {
+      // `i` is just after "@import".
+      let target = null, cursor;
+      while (i < length) {
+        if (cssWhitespace(css.charCodeAt(i))) { i++; continue; }
+        if (css[i] === "/" && css[i + 1] === "*") { skipComment(); continue; }
+        break;
+      }
+      if (css[i] === "\"" || css[i] === "'") target = readString();
+      else {
+        cursor = i;
+        const name = cssNameChar(css.charCodeAt(i)) || validEscape(i) ? readName() : "";
+        if (name.toLowerCase() === "url" && css[i] === "(") {
+          i++;
+          while (i < length && cssWhitespace(css.charCodeAt(i))) i++;
+          if (css[i] === "\"" || css[i] === "'") {
+            target = readString();
+            while (i < length && cssWhitespace(css.charCodeAt(i))) i++;
+            if (css[i] === ")") i++; else target = null;
+          } else target = readUrlToken();
+        } else i = cursor;
+      }
+      const conditionStart = i;
+      skipAtRule();
+      const end = i;
+      const condition = css.slice(conditionStart, end).replace(/;\s*$/, "").trim();
+      const value = target === null ? "" : target.replace(/[\u0000-\u0020\u007f-\u009f]/g, "");
+      const blob = /^blob:/i.test(value);
+      // Same-origin relative sheets are allowed; data: CSS is never imported.
+      const relative = !!value && !blob && !/^data:/i.test(value) && !value.startsWith("#") &&
+        safeCssReference(value);
+      if (!strict && blob && blobImports && imports < CSS_IMPORT_MAX_PER_SHEET &&
+          /^[\w\s(),:.\-]*$/.test(condition) && !/^(?:layer|supports)\b/i.test(condition)) {
+        blobImports.push({ url: value, media: condition });
+        edits.push([start, end, `/*${nonce}:${blobImports.length - 1}*/`]);
+        imports++;
+      } else if (strict || target === null || !(relative || (blob && keepBlobImports && !blobImports)))
+        edits.push([start, end, ""]);
+    };
+
+    while (i < length) {
+      const char = css[i], code = css.charCodeAt(i);
+      if (char === "/" && css[i + 1] === "*") { skipComment(); continue; }
+      if (char === "\"" || char === "'") {
+        const start = i, value = readString();
+        const frame = stack[stack.length - 1];
+        // Custom properties can later be substituted into image-set()/image();
+        // treat absolute or protocol-relative strings there as references.
+        const reference = frame?.reference || (customValueDepth >= 0 &&
+          /^(?:[a-z][a-z0-9+.-]*:|[\\/]{2})/i.test(value.replace(/[\u0000-\u0020\u007f-\u009f]/g, "")));
+        if (reference && !safeCssReference(value, { strict })) {
+          if (frame?.reference) frame.unsafe = true;
+          else edits.push([start, i, "\"\""]);
+        }
+        continue;
+      }
+      if (char === "@" && (cssNameChar(css.charCodeAt(i + 1)) || validEscape(i + 1))) {
+        const start = i;
+        i++;
+        const name = readName().toLowerCase();
+        if (name === "import" && !stack.length) handleImport(start);
+        continue;
+      }
+      if (cssNameChar(code) || validEscape(i) ||
+          (char === "-" && (cssNameChar(css.charCodeAt(i + 1)) || validEscape(i + 1)))) {
+        const start = i, name = readName().toLowerCase();
+        if (css[i] === "(") {
+          i++;
+          if (name === "url") {
+            let probe = i;
+            while (probe < length && cssWhitespace(css.charCodeAt(probe))) probe++;
+            if (css[probe] !== "\"" && css[probe] !== "'") {
+              i = probe;
+              const value = readUrlToken();
+              if (value === null || !safeCssReference(value, { strict })) {
+                edits.push([start, i, removed]);
+                const parent = stack[stack.length - 1];
+                if (parent?.reference) parent.unsafe = true;
+              }
+              continue;
+            }
+          }
+          stack.push({ start, name, reference: CSS_REFERENCE_FUNCTIONS.has(name), unsafe: false });
+          continue;
+        }
+        if (name.startsWith("--") && customValueDepth < 0) {
+          let probe = i;
+          while (probe < length && cssWhitespace(css.charCodeAt(probe))) probe++;
+          if (css[probe] === ":") { customValueDepth = stack.length; i = probe + 1; }
+        }
+        continue;
+      }
+      if (char === "\\") { i++; continue; } // invalid escape
+      if (char === "(") { stack.push({ start: i, name: "", reference: false, unsafe: false }); i++; continue; }
+      if (char === ")") {
+        const frame = stack.pop();
+        i++;
+        if (frame?.unsafe) {
+          edits.push([frame.start, i, removed]);
+          const parent = stack[stack.length - 1];
+          if (parent?.reference) parent.unsafe = true;
+        }
+        continue;
+      }
+      if ((char === ";" || char === "}") && customValueDepth >= 0 && stack.length <= customValueDepth) customValueDepth = -1;
+      if (char === "{" || char === "}") stack.length = 0;
+      i++;
+    }
+    for (const frame of stack) if (frame.unsafe) edits.push([frame.start, length, removed]);
+    if (!edits.length) return css;
+    edits.sort((a, b) => a[0] - b[0] || b[1] - a[1]);
+    let output = "", cursor = 0;
+    for (const [start, end, replacement] of edits) {
+      if (start < cursor) continue; // nested inside an earlier replacement
+      output += css.slice(cursor, start) + replacement;
+      cursor = end;
+    }
+    return output + css.slice(cursor);
+  }
+
+  function sanitizeCssReferences(css, options = {}) {
+    return scanCss(css, options);
+  }
+
+  async function readBlobStylesheet(url) {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) return null;
+      const declared = Number(response.headers.get("content-length") || 0);
+      if (declared > CSS_BLOB_STYLESHEET_MAX_BYTES) return null;
+      const blob = await response.blob();
+      return blob.size > CSS_BLOB_STYLESHEET_MAX_BYTES ? null : await blob.text();
+    } catch (_) {
+      return null;
+    }
+  }
+
+  // Replace blob @imports with their sanitized contents, preserving cascade
+  // position and media conditions. Cycles, excessive depth and unreadable
+  // sheets are dropped rather than loaded unsanitized.
+  async function inlineCssImports(css, depth = 0, ancestors = new Set()) {
+    const blobImports = [];
+    const nonce = `reader-import-${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+    const sanitized = scanCss(css, { blobImports, nonce });
+    if (!blobImports.length) return sanitized;
+    const bodies = await Promise.all(blobImports.map(async ({ url, media }) => {
+      if (depth >= CSS_IMPORT_MAX_DEPTH || ancestors.has(url)) return "";
+      const text = await readBlobStylesheet(url);
+      if (text === null) return "";
+      const body = (await inlineCssImports(text, depth + 1, new Set([...ancestors, url])))
+        .replace(/^\ufeff/, "").replace(/^\s*@charset\s+"[^"]*"\s*;/i, "");
+      return media && !/^all$/i.test(media) ? `@media ${media} {\n${body}\n}` : body;
+    }));
+    return sanitized.replace(new RegExp(`/\\*${nonce}:(\\d+)\\*/`, "g"), (_, index) => bodies[Number(index)] ?? "");
+  }
+
+  // Foliate rewrites chapter stylesheets to blob: URLs. Load them as sanitized
+  // inline styles so remote references inside packaged CSS cannot escape the
+  // archive-only resource policy. Results are cached per blob URL.
+  const foliateStyleCache = new Map();
+  const FOLIATE_STYLE_CACHE_MAX = 64;
+
+  async function sanitizeFoliateStyles(nodes) {
+    const output = [];
+    for (const node of nodes) {
+      if (node.localName === "link") {
+        const href = node.getAttribute("href") || "";
+        if (!/^blob:/i.test(href)) continue;
+        let pending = foliateStyleCache.get(href);
+        if (!pending) {
+          pending = readBlobStylesheet(href).then(text => text === null ? null : inlineCssImports(text, 0, new Set([href])));
+          pending.then(text => { if (text === null) foliateStyleCache.delete(href); });
+          foliateStyleCache.set(href, pending);
+          while (foliateStyleCache.size > FOLIATE_STYLE_CACHE_MAX)
+            foliateStyleCache.delete(foliateStyleCache.keys().next().value);
+        }
+        const text = await pending;
+        if (text === null) continue;
+        const style = document.createElement("style");
+        const media = node.getAttribute("media");
+        if (media) style.setAttribute("media", media);
+        style.textContent = text;
+        output.push(style);
+      } else {
+        const style = node.cloneNode(false);
+        style.textContent = await inlineCssImports(node.textContent || "");
+        output.push(style);
+      }
+    }
+    return output;
+  }
+
+  function sanitizeEpubDocument(doc, options = {}) {
+    return readerContext.sanitizeReaderDocument(readerContext.normalizeEpubDocument(doc), { ...options, preserveEpubStyles: true });
   }
 
   function parseChapterDocument(text) {
@@ -111,7 +441,7 @@ export function createReaderHtmlFormat(readerContext) {
     });
     const template = document.createElement("template");
     template.content.appendChild(clean);
-    const stripUrls = (value) => value.replace(/@import[^;]+;|url\s*\([^)]*\)/gi, "");
+    const stripUrls = (value) => sanitizeCssReferences(value, { strict: true });
     for (const style of template.content.querySelectorAll("style")) {
       const value = style.textContent, stripped = stripUrls(value);
       if (stripped !== value) style.textContent = stripped;
@@ -319,6 +649,8 @@ export function createReaderHtmlFormat(readerContext) {
     normalizeEpubDocument,
     sanitizeReaderDocument,
     sanitizeEpubDocument,
+    sanitizeCssReferences,
+    sanitizeFoliateStyles,
     parseChapterDocument,
     epubContentBody,
     renderText,

tests/test_reader_css_sanitizer.mjs

@@ -0,0 +1,56 @@
+// Offline contract for Reader CSS reference sanitization (EPUB/chapter styles).
+import assert from "node:assert/strict";
+import { createReaderHtmlFormat } from "../static/reader/formats/reader-html-format.mjs";
+
+const { sanitizeCssReferences: clean } = createReaderHtmlFormat({});
+const cases = [
+  // [input, expected, options]
+  ["p{background:url(https://x.test/a.png)}", "p{background:none}"],
+  ["p{background:URL( 'https://x.test/a.png' )}", "p{background:none}"],
+  ["p{background:\\75 rl(https://x.test/a.png)}", "p{background:none}"],
+  ["p{background:\\75rl(//x.test/a.png)}", "p{background:none}"],
+  ["p{background:url(ht\\74ps://x.test/a.png)}", "p{background:none}"],
+  ["p{background:url(\"java\\9script:x\")}", "p{background:none}"],
+  ["p{background:url(h\ttps://x.test)}", "p{background:none}"],
+  ["p{background:image-set(\"https://x.test/a.png\" 1x)}", "p{background:none}"],
+  ["p{background:-webkit-image-set(url(https://x.test/a.png) 1x)}", "p{background:none}"],
+  ["p{--bg:\"https://x.test/a.png\";background:image-set(var(--bg) 1x)}", "p{--bg:\"\";background:image-set(var(--bg) 1x)}"],
+  ["@import \"https://x.test/a.css\";p{}", "p{}"],
+  ["@import/**/url(https://x.test/a.css) screen;p{}", "p{}"],
+  ["@\\69mport 'https://x.test/a.css';p{}", "p{}"],
+  ["@import url(data:text/css,p{});p{}", "p{}"],
+  ["@import \"blob:https://site/abc\";p{}", "p{}"],
+  ["@import \"blob:https://site/abc\";p{}", "@import \"blob:https://site/abc\";p{}", { keepBlobImports: true }],
+  ["@import \"local.css\";p{}", "@import \"local.css\";p{}"],
+  // Safe references and non-reference strings stay byte-for-byte.
+  ["p{background:url(blob:https://site/1)}", null],
+  ["p{background:url(\"data:image/svg+xml,<svg/>\")}", null],
+  ["@font-face{src:url(\"blob:https://site/f\") format(\"woff2\"),local(\"Noto\")}", null],
+  ["p{background:url(images/a.png)} q{fill:url(#grad)}", null],
+  ["p::before{content:\"https://example.com\"}", null],
+  ["p{content:\"url(https://x.test)\"} /* url(https://x.test) */", null],
+  ["p{background:url(https://x.test/a.png)}", "p{background:none}", { strict: false }],
+  // Strict (offline HTML) removes every reference.
+  ["p{background:url(#a)}@import 'x.css';", "p{background:}", { strict: true }],
+  ["<p style>background:url(javascript:bad);color:#111", "<p style>background:;color:#111", { strict: true }],
+];
+let failures = 0;
+for (const [input, expected, options] of cases) {
+  const actual = clean(input, options);
+  try {
+    assert.equal(actual, expected ?? input);
+  } catch (error) {
+    failures++;
+    console.error(`FAIL ${JSON.stringify(input)}\n  got      ${JSON.stringify(actual)}\n  expected ${JSON.stringify(expected ?? input)}`);
+  }
+}
+// Linear-time behaviour on adversarial nesting/escapes.
+const big = "p{background:" + "image-set(".repeat(20000) + "\"https://x.test\"" + ")".repeat(20000) + "}" + "\\".repeat(50000);
+const started = Date.now();
+assert.ok(!clean(big).includes("https://x.test"));
+assert.ok(Date.now() - started < 2000, "scanner must stay linear");
+if (failures) {
+  console.error(`${failures} CSS sanitizer case(s) failed`);
+  process.exit(1);
+}
+console.log(`reader CSS sanitizer: ${cases.length} cases passed`);

tests/test_reader_refactor.py

@@ -2686,6 +2686,41 @@ class ReaderRefactorTest(unittest.TestCase):
         probe.click()
         self.assertFalse(self.page.evaluate("() => window.__readerSecurityMarker === 17"))
 
+    def test_epub_css_cannot_load_remote_references_but_keeps_packaged_styles(self):
+        css = ("@import url(https://css.remote.test/a.css);\n"
+               "@import '\\68ttps://css.remote.test/b.css';\n"
+               "p.linked { letter-spacing: 3px; background-image: url(https://img.remote.test/a.png); }\n"
+               "p.escaped { background-image: \\75rl(//img.remote.test/b.png); }\n"
+               "p.set { background-image: image-set('https://img.remote.test/c.png' 1x); }\n"
+               "p.local { background-image: url(dot.png); }\n")
+        dot = base64.b64decode("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMB/6XWbqkAAAAASUVORK5CYII=")
+        body = support.zip_bytes({
+            "META-INF/container.xml": '<?xml version="1.0"?><container xmlns="urn:oasis:names:tc:opendocument:xmlns:container" version="1.0"><rootfiles><rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml"/></rootfiles></container>',
+            "OEBPS/content.opf": '<?xml version="1.0"?><package xmlns="http://www.idpf.org/2007/opf" version="3.0" unique-identifier="id"><metadata xmlns:dc="http://purl.org/dc/elements/1.1/"><dc:identifier id="id">css-security</dc:identifier><dc:title>CSS</dc:title><dc:language>en</dc:language></metadata><manifest><item id="chapter" href="chapter.xhtml" media-type="application/xhtml+xml"/><item id="style" href="style.css" media-type="text/css"/><item id="dot" href="dot.png" media-type="image/png"/></manifest><spine><itemref idref="chapter"/></spine></package>',
+            "OEBPS/style.css": css,
+            "OEBPS/dot.png": dot,
+            "OEBPS/chapter.xhtml": '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS</title><link rel="stylesheet" href="style.css"/><style>p.inline { background-image: \\75 rl("https://img.remote.test/d.png"); }</style></head><body><p class="linked">linked</p><p class="escaped">escaped</p><p class="set">set</p><p class="local">local</p><p class="inline">inline</p><p class="attr" style="background-image:url(&quot;https://img.remote.test/e.png&quot;)">attr</p></body></html>',
+        }, ("mimetype", "application/epub+zip"))
+        remote = []
+        self.page.on("request", lambda request: remote.append(request.url) if ".remote.test" in request.url else None)
+        self.serve(body, "application/epub+zip")
+        self.open(self.reader_url("epub", name="css-security"))
+        self.page.wait_for_function("""() => {
+          const root = document.querySelector('article[data-section]')?.shadowRoot;
+          const p = root?.querySelector('p.linked');
+          return p && getComputedStyle(p).letterSpacing === '3px';
+        }""")
+        styles = self.page.evaluate("""() => {
+          const root = document.querySelector('article[data-section]').shadowRoot;
+          return Object.fromEntries([...root.querySelectorAll('p')].map(p =>
+            [p.className, getComputedStyle(p).backgroundImage]));
+        }""")
+        for name in ("linked", "escaped", "set", "inline", "attr"):
+            self.assertEqual(styles[name], "none", name)
+        self.assertRegex(styles["local"], r"^url\(\"blob:")
+        self.page.wait_for_timeout(300)
+        self.assertEqual(remote, [])
+
     def expose_html_contrast(self):
         def instrument(route):
             response = route.fetch()