support more cross origin images

Author: jogibear9988

manifest.json

@@ -24,6 +24,9 @@
     "scripting",
     "contextMenus"
   ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
   "background": {
     "service_worker": "service-worker.js"
   }

src/background/service-worker.js

@@ -74,6 +74,13 @@ extensionApi.runtime.onMessage.addListener((message, sender, sendResponse) => {
     return;
   }
 
+  if (message.type === 'fetch-image-data-url') {
+    void fetchImageDataUrl(message)
+      .then((response) => sendResponse(response))
+      .catch((error) => sendResponse({ ok: false, error: error.message }));
+    return true;
+  }
+
   if (message.type === 'export-transfer-start') {
     sendResponse(handleTransferStart(message, sender));
     return;
@@ -234,6 +241,29 @@ async function handleResultBlob(blob, filename) {
   }
 }
 
+async function fetchImageDataUrl(message) {
+  if (typeof message?.url !== 'string' || message.url.length === 0) {
+    return { ok: false, error: 'Missing image URL' };
+  }
+
+  try {
+    const response = await fetch(message.url, {
+      credentials: 'include',
+      redirect: 'follow',
+    });
+
+    if (!response.ok) {
+      throw new Error(`Image request failed with status ${response.status}`);
+    }
+
+    const blob = await response.blob();
+    const dataUrl = await blobToImageDataUrl(blob, message.url);
+    return { ok: true, dataUrl };
+  } catch (error) {
+    return { ok: false, error: error?.message ?? String(error) };
+  }
+}
+
 async function createDownloadTargetFromBlob(blob) {
   if (shouldUseObjectUrlForBlobDownload()) {
     const objectUrl = URL.createObjectURL(blob);
@@ -289,6 +319,17 @@ async function blobToDataUrl(blob) {
   return `data:${blob.type || 'application/octet-stream'};base64,${base64}`;
 }
 
+async function blobToImageDataUrl(blob, sourceUrl) {
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  const mime = detectImageMimeType(bytes, blob.type, sourceUrl);
+
+  if (!mime) {
+    throw new Error('Fetched resource was not a supported image');
+  }
+
+  return `data:${mime};base64,${bytesToBase64(bytes)}`;
+}
+
 function bytesToBase64(bytes) {
   const chunkSize = 0x8000;
   let binary = '';
@@ -301,6 +342,57 @@ function bytesToBase64(bytes) {
   return btoa(binary);
 }
 
+function detectImageMimeType(bytes, declaredType, sourceUrl) {
+  const normalizedDeclaredType = normalizeMimeType(declaredType);
+  if (normalizedDeclaredType?.startsWith('image/')) {
+    return normalizedDeclaredType;
+  }
+
+  if (looksLikeSvgPayload(bytes) || looksLikeSvgUrl(sourceUrl)) {
+    return 'image/svg+xml';
+  }
+
+  if (matchesSignature(bytes, [0x89, 0x50, 0x4E, 0x47])) return 'image/png';
+  if (matchesSignature(bytes, [0xFF, 0xD8, 0xFF])) return 'image/jpeg';
+  if (matchesSignature(bytes, [0x47, 0x49, 0x46, 0x38])) return 'image/gif';
+  if (matchesSignature(bytes, [0x42, 0x4D])) return 'image/bmp';
+  if (matchesSignature(bytes, [0x52, 0x49, 0x46, 0x46]) && matchesSignature(bytes.subarray(8), [0x57, 0x45, 0x42, 0x50])) {
+    return 'image/webp';
+  }
+
+  return null;
+}
+
+function normalizeMimeType(mime) {
+  if (typeof mime !== 'string' || mime.length === 0) return null;
+  return mime.split(';', 1)[0].trim().toLowerCase() || null;
+}
+
+function matchesSignature(bytes, signature) {
+  if (bytes.length < signature.length) return false;
+
+  for (let index = 0; index < signature.length; index += 1) {
+    if (bytes[index] !== signature[index]) return false;
+  }
+
+  return true;
+}
+
+function looksLikeSvgPayload(bytes) {
+  if (bytes.length === 0) return false;
+
+  const sample = new TextDecoder().decode(bytes.subarray(0, Math.min(bytes.length, 2048)));
+  return sample.replace(/^\uFEFF/, '').trimStart().startsWith('<svg');
+}
+
+function looksLikeSvgUrl(sourceUrl) {
+  try {
+    return new URL(sourceUrl).pathname.toLowerCase().endsWith('.svg');
+  } catch {
+    return false;
+  }
+}
+
 function decodeExportChunk(chunkBase64) {
   if (typeof chunkBase64 !== 'string' || chunkBase64.length === 0) {
     throw new Error('Invalid export chunk payload');

src/content/export-utils.js

@@ -3,25 +3,216 @@ export function createExportBlob(data, mime) {
   return new Blob([bytes], { type: mime });
 }
 
+export function collectPotentiallyTaintedImageDiagnostics(irNodes, options = {}) {
+  const normalizedOptions = getImageSourceOptions(options);
+
+  return irNodes.flatMap((node) => {
+    if (node?.type !== 'image') return [];
+    if (isLikelyCanvasSafeImageSource(node.dataUrl, normalizedOptions)) return [];
+
+    const classification = classifyCanvasImageSource(node.dataUrl, normalizedOptions);
+    return [{
+      source: node.dataUrl,
+      resolvedUrl: classification.resolvedUrl,
+      origin: classification.origin,
+      pageOrigin: classification.pageOrigin,
+      classification: classification.classification,
+      sourceMetadata: node.source ?? null,
+      originalType: node.source?.originalType ?? null,
+      xpath: node.source?.xpath ?? null,
+    }];
+  });
+}
+
+export function collectInaccessibleIframeDiagnostics(root = globalThis.document) {
+  const diagnostics = [];
+  const visitedContainers = new Set();
+
+  function visit(container) {
+    if (!container || visitedContainers.has(container) || typeof container.querySelectorAll !== 'function') {
+      return;
+    }
+
+    visitedContainers.add(container);
+
+    for (const element of Array.from(container.querySelectorAll('*'))) {
+      if (element?.shadowRoot) {
+        visit(element.shadowRoot);
+      }
+
+      if (!isIframeElement(element)) continue;
+
+      try {
+        const frameDocument = element.contentDocument;
+        if (!frameDocument) {
+          diagnostics.push({
+            src: normalizeOptionalString(element.src),
+            title: normalizeOptionalString(element.title),
+            reason: 'iframe-not-loaded',
+            errorName: null,
+          });
+          continue;
+        }
+
+        visit(frameDocument);
+      } catch (error) {
+        diagnostics.push({
+          src: normalizeOptionalString(element.src),
+          title: normalizeOptionalString(element.title),
+          reason: error?.name === 'SecurityError' ? 'cross-origin-iframe' : 'iframe-access-error',
+          errorName: normalizeOptionalString(error?.name),
+        });
+      }
+    }
+  }
+
+  visit(root);
+  return diagnostics;
+}
+
 export function stripPotentiallyTaintedImages(irNodes, options = {}) {
-  const baseUrl = options.baseUrl ?? globalThis.document?.baseURI ?? globalThis.location?.href;
-  const pageOrigin = options.pageOrigin ?? globalThis.location?.origin ?? null;
+  const { baseUrl, pageOrigin } = getImageSourceOptions(options);
 
   return irNodes.filter((node) => {
     if (node?.type !== 'image') return true;
     return isLikelyCanvasSafeImageSource(node.dataUrl, { baseUrl, pageOrigin });
   });
 }
 
+export async function replaceUnsafeImageSources(irNodes, resolver, options = {}) {
+  if (typeof resolver !== 'function') return irNodes;
+
+  const normalizedOptions = getImageSourceOptions(options);
+  const unsafeSources = [...new Set(irNodes
+    .filter((node) => node?.type === 'image')
+    .map((node) => node.dataUrl)
+    .filter((source) => !isLikelyCanvasSafeImageSource(source, normalizedOptions)))];
+
+  if (unsafeSources.length === 0) return irNodes;
+
+  const replacements = new Map();
+
+  await Promise.all(unsafeSources.map(async (source) => {
+    try {
+      const resolvedSource = await resolver(source);
+      if (typeof resolvedSource === 'string' && resolvedSource.startsWith('data:image/')) {
+        replacements.set(source, resolvedSource);
+      }
+    } catch {
+      // Ignore failures and fall back to the original URL.
+    }
+  }));
+
+  if (replacements.size === 0) return irNodes;
+
+  return irNodes.map((node) => {
+    if (node?.type !== 'image') return node;
+    const replacement = replacements.get(node.dataUrl);
+    return replacement ? { ...node, dataUrl: replacement } : node;
+  });
+}
+
 export function isLikelyCanvasSafeImageSource(source, options = {}) {
-  if (typeof source !== 'string' || source.length === 0) return false;
-  if (source.startsWith('data:') || source.startsWith('blob:')) return true;
+  const { classification } = classifyCanvasImageSource(source, options);
+  return classification === 'data-url' ||
+    classification === 'blob-url' ||
+    classification === 'same-origin-url';
+}
+
+export function classifyCanvasImageSource(source, options = {}) {
+  const normalizedOptions = getImageSourceOptions(options);
+
+  if (typeof source !== 'string' || source.length === 0) {
+    return {
+      classification: 'missing-source',
+      resolvedUrl: null,
+      origin: null,
+      pageOrigin: normalizedOptions.pageOrigin,
+    };
+  }
+
+  if (source.startsWith('data:')) {
+    return {
+      classification: 'data-url',
+      resolvedUrl: source,
+      origin: null,
+      pageOrigin: normalizedOptions.pageOrigin,
+    };
+  }
+
+  if (source.startsWith('blob:')) {
+    return {
+      classification: 'blob-url',
+      resolvedUrl: source,
+      origin: null,
+      pageOrigin: normalizedOptions.pageOrigin,
+    };
+  }
+
+  const url = resolveImageSourceUrl(source, normalizedOptions.baseUrl);
+  if (!url) {
+    return {
+      classification: 'invalid-url',
+      resolvedUrl: null,
+      origin: null,
+      pageOrigin: normalizedOptions.pageOrigin,
+    };
+  }
+
+  if (url.protocol === 'file:') {
+    return {
+      classification: 'file-url',
+      resolvedUrl: url.href,
+      origin: null,
+      pageOrigin: normalizedOptions.pageOrigin,
+    };
+  }
 
+  if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+    return {
+      classification: 'other-url-scheme',
+      resolvedUrl: url.href,
+      origin: url.origin === 'null' ? null : url.origin,
+      pageOrigin: normalizedOptions.pageOrigin,
+    };
+  }
+
+  if (!normalizedOptions.pageOrigin) {
+    return {
+      classification: 'network-url-no-page-origin',
+      resolvedUrl: url.href,
+      origin: url.origin,
+      pageOrigin: null,
+    };
+  }
+
+  return {
+    classification: url.origin === normalizedOptions.pageOrigin ? 'same-origin-url' : 'cross-origin-url',
+    resolvedUrl: url.href,
+    origin: url.origin,
+    pageOrigin: normalizedOptions.pageOrigin,
+  };
+}
+
+function getImageSourceOptions(options = {}) {
+  return {
+    baseUrl: options.baseUrl ?? globalThis.document?.baseURI ?? globalThis.location?.href,
+    pageOrigin: options.pageOrigin ?? globalThis.location?.origin ?? null,
+  };
+}
+
+function resolveImageSourceUrl(source, baseUrl) {
   try {
-    const url = new URL(source, options.baseUrl);
-    if (!options.pageOrigin) return false;
-    return url.origin === options.pageOrigin;
+    return new URL(source, baseUrl);
   } catch {
-    return false;
+    return null;
   }
 }
+
+function normalizeOptionalString(value) {
+  return typeof value === 'string' && value.length > 0 ? value : null;
+}
+
+function isIframeElement(element) {
+  return typeof element?.tagName === 'string' && element.tagName.toLowerCase() === 'iframe';
+}