@file-viewer/renderer-drawing 2.4.0 → 3.0.0

package/dist/diagram.js

@@ -1,5 +1,6 @@
-import { createFileViewerTranslator } from '@file-viewer/core';
+import { createFileViewerTranslator, assertFileViewerMermaidSourceHasNoExternalResources } from '@file-viewer/core';
 import Panzoom, {} from '@panzoom/panzoom';
+import { sanitizeDrawingSvg } from './sanitize.js';
 const getOwnerWindow = (documentRef) => {
     return documentRef.defaultView || (typeof window !== 'undefined' ? window : undefined);
 };
@@ -29,34 +30,19 @@ const normalizePlantumlServer = (documentRef, value) => {
         return normalized;
     }
 };
-const sanitizeSvg = (documentRef, svg, t) => {
-    const parsed = new DOMParser().parseFromString(svg, 'image/svg+xml');
-    const parseError = parsed.querySelector('parsererror');
-    if (parseError) {
-        throw new Error(parseError.textContent || t('drawing.error.svgParseFailed'));
-    }
-    parsed.querySelectorAll('script,iframe,object,embed').forEach(node => node.remove());
-    parsed.querySelectorAll('*').forEach(node => {
-        for (const attribute of Array.from(node.attributes)) {
-            if (/^on/i.test(attribute.name)) {
-                node.removeAttribute(attribute.name);
-            }
-        }
-    });
-    const svgNode = parsed.documentElement;
-    return documentRef.importNode(svgNode, true);
-};
 const renderMermaidSvg = async (documentRef, text, theme, t) => {
+    assertFileViewerMermaidSourceHasNoExternalResources(text);
     const mermaidModule = await import('mermaid');
     const mermaid = mermaidModule.default;
     const id = `file-viewer-mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`;
     mermaid.initialize({
         startOnLoad: false,
         securityLevel: 'strict',
+        htmlLabels: false,
         theme: isDarkTheme(documentRef, theme) ? 'dark' : 'default'
     });
     const rendered = await mermaid.render(id, text);
-    return sanitizeSvg(documentRef, rendered.svg, t);
+    return sanitizeDrawingSvg(documentRef, rendered.svg, t('drawing.error.svgParseFailed'));
 };
 const appendSvgText = (documentRef, parent, text, x, dy, weight = '500') => {
     const line = documentRef.createElementNS('http://www.w3.org/2000/svg', 'tspan');
@@ -138,7 +124,7 @@ const renderPlantumlSvg = async (documentRef, text, options, t) => {
         if (!response.ok) {
             throw new Error(t('drawing.error.plantumlRenderFailed', { status: response.status }));
         }
-        return sanitizeSvg(documentRef, await response.text(), t);
+        return sanitizeDrawingSvg(documentRef, await response.text(), t('drawing.error.svgParseFailed'));
     }
     catch (error) {
         if (error instanceof DOMException && error.name === 'AbortError') {

package/dist/drawing.d.ts

@@ -1,10 +1,10 @@
 import type { FileRenderContext, FileViewerRenderedInstance } from '@file-viewer/core';
-declare global {
-    interface Window {
-        GraphViewer?: {
-            createViewerForElement: (element: HTMLElement, callback?: (viewer: unknown) => void) => unknown;
-            processElements: (className?: string) => void;
-        };
-    }
-}
+export declare const normalizeDrawioText: (documentRef: Document, value: string | null) => string;
+/**
+ * diagrams.net is a large third-party runtime. Its same-document renderer may
+ * interpret cell labels and style resource keys as HTML or URLs, so sanitize
+ * the direct mxGraphModel before it reaches that runtime. Compressed/opaque
+ * models fail closed here and use the inert fallback instead.
+ */
+export declare const sanitizeOfficialDrawioXml: (documentRef: Document, value: string, invalidMessage?: string) => string;
 export default function renderDrawing(buffer: ArrayBuffer, target: HTMLDivElement, type?: string, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;

package/dist/drawing.js

@@ -1,8 +1,8 @@
-import { createFileViewerTranslator, createFileViewerZoomChangeEmitter, registerFileViewerZoomProvider, readFileViewerText, resolveFileViewerDrawioViewerScriptUrl, resolveFileViewerRuntimeAssetBaseUrl, waitForFileViewerNextPaint, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
+import { createFileViewerTranslator, createFileViewerZoomChangeEmitter, registerFileViewerZoomProvider, readFileViewerText, resolveFileViewerDrawioViewerScriptUrl, resolveFileViewerRuntimeAssetBaseUrl, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
+import { isFileViewerDrawioOfficialViewerEnabled } from './optionalCapabilities.js';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const EXCALIDRAW_OFFICIAL_TIMEOUT = 6000;
 const DRAWIO_OFFICIAL_TIMEOUT = 6000;
-const diagramsViewerPromises = new WeakMap();
 const drawingStyle = `
 .drawing-viewer{display:flex;height:100%;min-height:360px;flex-direction:column;background:#edf2f7;color:#172033}
 .drawing-toolbar{position:sticky;top:0;z-index:2;display:flex;min-height:46px;align-items:center;justify-content:space-between;gap:16px;padding:8px 14px;border-bottom:1px solid rgba(148,163,184,.35);background:rgba(248,250,252,.92);backdrop-filter:blur(12px)}
@@ -17,7 +17,7 @@ const drawingStyle = `
 .drawing-scroll{height:100%;overflow:auto;padding:22px}
 .drawing-canvas{width:100%;min-height:420px;transition:transform .18s ease,zoom .18s ease}
 .drawing-canvas .drawing-svg,.drawing-canvas svg{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:10px;background:#fff;box-shadow:0 18px 42px rgba(15,23,42,.12)}
-.drawing-canvas .drawing-mxgraph{min-height:420px;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 18px 42px rgba(15,23,42,.12)}
+.drawing-canvas .drawing-mxgraph{display:block;width:100%;min-height:420px;overflow:hidden;border:0;border-radius:10px;background:#fff;box-shadow:0 18px 42px rgba(15,23,42,.12)}
 .drawing-diagram-shell{display:flex;min-height:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background:linear-gradient(135deg,#f8fafc,#eef6f4);box-shadow:0 18px 42px rgba(15,23,42,.12)}
 .drawing-diagram-pan{display:inline-flex;min-width:240px;min-height:180px;align-items:center;justify-content:center;padding:32px;cursor:grab;touch-action:none}
 .drawing-diagram-pan:active{cursor:grabbing}
@@ -86,87 +86,99 @@ const resolveDirectoryUrl = (url) => {
         return slashIndex >= 0 ? url.slice(0, slashIndex + 1) : '';
     }
 };
-const configureOfflineDiagramsViewerAssets = (documentRef, scriptUrl) => {
-    const ownerWindow = documentRef.defaultView || (typeof window !== 'undefined' ? window : undefined);
-    if (!ownerWindow) {
-        return;
+const escapeHtmlAttribute = (value) => value
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+const createDrawioSandboxNonce = (ownerWindow) => {
+    const bytes = new Uint8Array(18);
+    ownerWindow.crypto.getRandomValues(bytes);
+    return Array.from(bytes, byte => byte.toString(16).padStart(2, '0')).join('');
+};
+const resolveSafeDrawioViewerScript = (documentRef, scriptUrl) => {
+    const resolved = new URL(scriptUrl, documentRef.baseURI);
+    const documentUrl = new URL(documentRef.baseURI);
+    if (!/^https?:$/.test(resolved.protocol) || resolved.origin !== documentUrl.origin) {
+        throw new Error('The diagrams.net viewer script must use a same-origin HTTP(S) URL.');
     }
-    const viewerWindow = ownerWindow;
-    const baseUrl = resolveDirectoryUrl(scriptUrl);
-    const setDefault = (key, value) => {
-        if (viewerWindow[key] === undefined || viewerWindow[key] === '') {
-            viewerWindow[key] = value;
-        }
+    return resolved;
+};
+const buildDrawioSandboxDocument = (xml, scriptUrl, nonce, channel) => {
+    const baseUrl = resolveDirectoryUrl(scriptUrl.href);
+    const assetRoot = baseUrl.replace(/\/$/, '');
+    const runtimeConfig = {
+        PROXY_URL: `${baseUrl}proxy`,
+        STYLE_PATH: `${baseUrl}styles`,
+        SHAPES_PATH: `${baseUrl}shapes`,
+        STENCIL_PATH: `${baseUrl}stencils`,
+        DRAW_MATH_URL: `${baseUrl}math4/es5`,
+        GRAPH_IMAGE_PATH: `${baseUrl}img`,
+        mxImageBasePath: `${baseUrl}mxgraph/images`,
+        mxBasePath: `${baseUrl}mxgraph/`,
+        mxLoadStylesheets: false,
+        DRAWIO_BASE_URL: assetRoot,
+        DRAWIO_LIGHTBOX_URL: assetRoot,
+        DRAWIO_SERVER_URL: baseUrl,
+        DRAWIO_VIEWER_URL: scriptUrl.href,
+        DRAWIO_LOG_URL: '',
+        EXPORT_URL: `${baseUrl}export`,
+        PLANT_URL: `${baseUrl}plant`,
+        VSS_CONVERT_URL: `${baseUrl}VsdConverter/api/converter`,
+        DRAWIO_GITLAB_URL: baseUrl,
+        DRAWIO_GITHUB_URL: baseUrl,
+        DRAWIO_GITHUB_API_URL: baseUrl,
+        RT_WEBSOCKET_URL: `${baseUrl}rt`,
+        NOTIFICATIONS_URL: `${baseUrl}notifications`,
     };
-    // viewer-static.min.js still contains public diagrams.net defaults. Setting
-    // these before the script executes keeps every secondary asset on the same
-    // self-hosted directory as the viewer script.
-    setDefault('PROXY_URL', `${baseUrl}proxy`);
-    setDefault('STYLE_PATH', `${baseUrl}styles`);
-    setDefault('SHAPES_PATH', `${baseUrl}shapes`);
-    setDefault('STENCIL_PATH', `${baseUrl}stencils`);
-    setDefault('DRAW_MATH_URL', `${baseUrl}math4/es5`);
-    setDefault('GRAPH_IMAGE_PATH', `${baseUrl}img`);
-    setDefault('mxImageBasePath', `${baseUrl}mxgraph/images`);
-    setDefault('mxBasePath', `${baseUrl}mxgraph/`);
-    setDefault('mxLoadStylesheets', false);
-    setDefault('DRAWIO_BASE_URL', baseUrl.replace(/\/$/, ''));
-    setDefault('DRAWIO_LIGHTBOX_URL', baseUrl.replace(/\/$/, ''));
-    setDefault('DRAWIO_SERVER_URL', baseUrl);
-    setDefault('DRAWIO_VIEWER_URL', `${baseUrl}viewer-static.min.js`);
-    setDefault('DRAWIO_LOG_URL', '');
-    setDefault('EXPORT_URL', `${baseUrl}export`);
-    setDefault('PLANT_URL', `${baseUrl}plant`);
-    setDefault('VSS_CONVERT_URL', `${baseUrl}VsdConverter/api/converter`);
-    setDefault('DRAWIO_GITLAB_URL', baseUrl);
-    setDefault('DRAWIO_GITHUB_URL', baseUrl);
-    setDefault('DRAWIO_GITHUB_API_URL', baseUrl);
-    setDefault('RT_WEBSOCKET_URL', `${baseUrl}rt`);
-    setDefault('NOTIFICATIONS_URL', `${baseUrl}notifications`);
-};
-const getDiagramsViewerPromiseMap = (documentRef) => {
-    let promiseMap = diagramsViewerPromises.get(documentRef);
-    if (!promiseMap) {
-        promiseMap = new Map();
-        diagramsViewerPromises.set(documentRef, promiseMap);
-    }
-    return promiseMap;
-};
-const deleteDiagramsViewerPromise = (documentRef, scriptUrl) => {
-    const promiseMap = diagramsViewerPromises.get(documentRef);
-    promiseMap?.delete(scriptUrl);
-    if (promiseMap && promiseMap.size === 0) {
-        diagramsViewerPromises.delete(documentRef);
-    }
-};
-const loadDiagramsViewer = (documentRef, scriptUrl, t) => {
-    const ownerWindow = documentRef.defaultView || (typeof window !== 'undefined' ? window : undefined);
-    if (ownerWindow?.GraphViewer) {
-        return Promise.resolve();
-    }
-    configureOfflineDiagramsViewerAssets(documentRef, scriptUrl);
-    const promiseMap = getDiagramsViewerPromiseMap(documentRef);
-    const existingPromise = promiseMap.get(scriptUrl);
-    if (existingPromise) {
-        return existingPromise;
-    }
-    const nextPromise = new Promise((resolve, reject) => {
-        const existed = Array.from(documentRef.querySelectorAll('script[src]'))
-            .find(script => script.src === scriptUrl);
-        if (existed) {
-            existed.addEventListener('load', () => resolve(), { once: true });
-            existed.addEventListener('error', () => reject(new Error(t('drawing.error.viewerLoadFailed'))), { once: true });
-            return;
-        }
-        const script = documentRef.createElement('script');
-        script.src = scriptUrl;
-        script.async = true;
-        script.onload = () => resolve();
-        script.onerror = () => reject(new Error(t('drawing.error.viewerLoadFailed')));
-        documentRef.head.appendChild(script);
-    });
-    promiseMap.set(scriptUrl, nextPromise);
-    return nextPromise;
+    const graphConfig = {
+        xml,
+        toolbar: 'zoom layers lightbox',
+        nav: true,
+        resize: true,
+        'auto-fit': true,
+        'auto-crop': true,
+        'auto-origin': true,
+        'allow-zoom-in': true,
+        'allow-zoom-out': true,
+        border: 16,
+        highlight: '#0f766e',
+    };
+    const csp = [
+        "default-src 'none'",
+        `script-src 'nonce-${nonce}' ${baseUrl}`,
+        `style-src 'unsafe-inline' ${baseUrl}`,
+        `img-src data: blob: ${baseUrl}`,
+        `font-src data: ${baseUrl}`,
+        "media-src data: blob:",
+        "connect-src 'none'",
+        "object-src 'none'",
+        "base-uri 'none'",
+        "form-action 'none'",
+    ].join('; ');
+    const bootstrap = `
+    Object.assign(window, ${JSON.stringify(runtimeConfig)});
+    window.__fileViewerDrawioSentinel = 0;
+    window.onDrawioViewerLoad = function () {
+      try {
+        GraphViewer.createViewerForElement(document.getElementById('graph'));
+        parent.postMessage({ fileViewerDrawio: ${JSON.stringify(channel)}, ok: true }, '*');
+      } catch (error) {
+        parent.postMessage({ fileViewerDrawio: ${JSON.stringify(channel)}, ok: false, message: String(error && error.message || error) }, '*');
+      }
+    };
+  `;
+    return `<!doctype html>
+<html><head>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-Security-Policy" content="${escapeHtmlAttribute(csp)}">
+  <meta name="referrer" content="no-referrer">
+  <style>html,body{margin:0;min-height:100%;background:#fff}#graph{max-width:100%;min-height:420px;border:1px solid transparent}</style>
+  <script nonce="${nonce}">${bootstrap}</script>
+</head><body>
+  <div id="graph" class="mxgraph" data-mxgraph="${escapeHtmlAttribute(JSON.stringify(graphConfig))}"></div>
+  <script src="${escapeHtmlAttribute(scriptUrl.href)}"></script>
+</body></html>`;
 };
 const runWithTimeout = async (task, timeout, message) => {
     let timer;
@@ -507,19 +519,179 @@ const parseDrawioGeometry = (cell) => {
         })),
     };
 };
-const normalizeDrawioText = (documentRef, value) => {
+const decodeDrawioEntities = (documentRef, value) => {
+    const Parser = documentRef.defaultView?.DOMParser || globalThis.DOMParser;
+    if (!Parser) {
+        return value;
+    }
+    // Escaping every literal '<' means document input can only become a text
+    // node in this inert parser. Named and numeric HTML entities still decode
+    // according to the browser's complete entity table.
+    const parsed = new Parser().parseFromString(value.replace(/</g, '&lt;'), 'text/html');
+    return parsed.documentElement.textContent || '';
+};
+const stripDrawioMarkup = (value) => {
+    let output = '';
+    let cursor = 0;
+    while (cursor < value.length) {
+        if (value[cursor] !== '<') {
+            output += value[cursor];
+            cursor += 1;
+            continue;
+        }
+        let quote = '';
+        let end = cursor + 1;
+        for (; end < value.length; end += 1) {
+            const character = value[end];
+            if (quote) {
+                if (character === quote) {
+                    quote = '';
+                }
+                continue;
+            }
+            if (character === '"' || character === "'") {
+                quote = character;
+                continue;
+            }
+            if (character === '>') {
+                break;
+            }
+        }
+        if (end >= value.length) {
+            output += '<';
+            cursor += 1;
+            continue;
+        }
+        const tag = value.slice(cursor + 1, end).trim().toLowerCase();
+        if (/^\/?br(?:\s|\/|$)/.test(tag)) {
+            output += '\n';
+        }
+        cursor = end + 1;
+    }
+    return output;
+};
+export const normalizeDrawioText = (documentRef, value) => {
     if (!value) {
         return '';
     }
-    const helper = documentRef.createElement('textarea');
-    helper.innerHTML = value;
-    return helper.value
-        .replace(/<br\s*\/?>/gi, '\n')
-        .replace(/<[^>]+>/g, '')
+    return stripDrawioMarkup(decodeDrawioEntities(documentRef, value))
         .replace(/\u00a0/g, ' ')
         .replace(/[ \t]+/g, ' ')
         .trim();
 };
+const DRAWIO_FORBIDDEN_ELEMENTS = new Set([
+    'script',
+    'style',
+    'foreignobject',
+    'iframe',
+    'object',
+    'embed',
+    'form',
+    'link',
+]);
+const DRAWIO_RESOURCE_ATTRIBUTES = new Set([
+    'href',
+    'xlink:href',
+    'url',
+    'link',
+    'image',
+    'icon',
+    'src',
+    'srcset',
+]);
+const isControlCharacter = (character) => {
+    const codePoint = character.charCodeAt(0);
+    return codePoint <= 0x1f || (codePoint >= 0x7f && codePoint <= 0x9f);
+};
+const stripControlCharacters = (value, replacement = '') => {
+    let normalized = '';
+    for (const character of value) {
+        normalized += isControlCharacter(character) ? replacement : character;
+    }
+    return normalized;
+};
+const containsDrawioActiveResource = (value) => {
+    const canonical = stripControlCharacters(value)
+        .replace(/\s+/g, '')
+        .toLowerCase();
+    return /(?:javascript|vbscript|data|file|blob|https?):|(?:^|[=("'])\/\/|\\\\/.test(canonical);
+};
+const sanitizeOfficialDrawioStyle = (value) => {
+    const safeEntries = [];
+    for (const [rawKey, rawValue] of parseDrawioStyle(value)) {
+        const key = rawKey.trim();
+        const styleValue = rawValue.trim();
+        if (!/^[A-Za-z][A-Za-z0-9_.-]*$/.test(key))
+            continue;
+        if (/(?:html|image|icon|link|href|url)/i.test(key))
+            continue;
+        if (containsDrawioActiveResource(styleValue))
+            continue;
+        if ([...styleValue].some(isControlCharacter) || /[<>"'`\\]/.test(styleValue) || /url\s*\(/i.test(styleValue))
+            continue;
+        safeEntries.push(`${key}=${styleValue}`);
+    }
+    safeEntries.push('html=0');
+    return `${safeEntries.join(';')};`;
+};
+const sanitizeOfficialDrawioText = (documentRef, value) => {
+    return normalizeDrawioText(documentRef, value)
+        .replace(/[<>&"'`]/g, ' ')
+        .split('')
+        .map(character => isControlCharacter(character) ? ' ' : character)
+        .join('')
+        .replace(/\s+/g, ' ')
+        .trim();
+};
+/**
+ * diagrams.net is a large third-party runtime. Its same-document renderer may
+ * interpret cell labels and style resource keys as HTML or URLs, so sanitize
+ * the direct mxGraphModel before it reaches that runtime. Compressed/opaque
+ * models fail closed here and use the inert fallback instead.
+ */
+export const sanitizeOfficialDrawioXml = (documentRef, value, invalidMessage = 'This Draw.io file has no safely renderable mxGraphModel.') => {
+    if (/<!\s*(?:doctype|entity)\b/i.test(value))
+        throw new Error(invalidMessage);
+    const Parser = documentRef.defaultView?.DOMParser || globalThis.DOMParser;
+    const Serializer = documentRef.defaultView?.XMLSerializer || globalThis.XMLSerializer;
+    if (!Parser || !Serializer)
+        throw new Error(invalidMessage);
+    const parsed = new Parser().parseFromString(value, 'application/xml');
+    if (parsed.querySelector('parsererror') || !parsed.querySelector('mxGraphModel')) {
+        throw new Error(invalidMessage);
+    }
+    for (const element of Array.from(parsed.querySelectorAll('*'))) {
+        const localName = element.localName.toLowerCase();
+        if (DRAWIO_FORBIDDEN_ELEMENTS.has(localName)) {
+            element.remove();
+            continue;
+        }
+        for (const attribute of Array.from(element.attributes)) {
+            const name = attribute.name.toLowerCase();
+            if (name.startsWith('on') || DRAWIO_RESOURCE_ATTRIBUTES.has(name)) {
+                element.removeAttribute(attribute.name);
+                continue;
+            }
+            if (name === 'style') {
+                element.setAttribute(attribute.name, sanitizeOfficialDrawioStyle(attribute.value));
+                continue;
+            }
+            if (name === 'value' || name === 'label' || name === 'tooltip' || name === 'title') {
+                element.setAttribute(attribute.name, sanitizeOfficialDrawioText(documentRef, attribute.value));
+                continue;
+            }
+            if (containsDrawioActiveResource(attribute.value)) {
+                element.removeAttribute(attribute.name);
+                continue;
+            }
+            const normalized = stripControlCharacters(attribute.value)
+                .replace(/[<>&"'`]/g, '')
+                .trim();
+            element.setAttribute(attribute.name, normalized);
+        }
+    }
+    return new Serializer().serializeToString(parsed);
+};
 const appendDrawioWrappedText = (documentRef, svg, text, x, y, width, height, fontSize, fill) => {
     if (!text) {
         return;
@@ -729,41 +901,57 @@ const renderDrawioFallback = (documentRef, text, target, t) => {
 };
 const renderOfficialDrawio = async (documentRef, text, target, scriptUrl, t) => {
     const ownerWindow = documentRef.defaultView || (typeof window !== 'undefined' ? window : undefined);
-    await loadDiagramsViewer(documentRef, scriptUrl, t);
-    await waitForFileViewerNextPaint(ownerWindow);
-    const host = createElement(documentRef, 'div', 'mxgraph drawing-mxgraph');
-    host.setAttribute('data-mxgraph', JSON.stringify({
-        xml: text,
-        toolbar: 'zoom layers lightbox',
-        nav: true,
-        resize: true,
-        'auto-fit': true,
-        'auto-crop': true,
-        'auto-origin': true,
-        'allow-zoom-in': true,
-        'allow-zoom-out': true,
-        border: 16,
-        highlight: '#0f766e',
-    }));
-    target.appendChild(host);
-    if (!ownerWindow?.GraphViewer) {
+    if (!ownerWindow) {
         throw new Error(t('drawing.error.viewerInitFailed'));
     }
-    ownerWindow.GraphViewer.createViewerForElement(host);
+    const resolvedScriptUrl = resolveSafeDrawioViewerScript(documentRef, scriptUrl);
+    const sanitizedText = sanitizeOfficialDrawioXml(documentRef, text, t('drawing.error.drawioNoModel'));
+    const nonce = createDrawioSandboxNonce(ownerWindow);
+    const channel = `file-viewer-drawio-${nonce}`;
+    const frame = createElement(documentRef, 'iframe', 'drawing-mxgraph');
+    frame.title = 'diagrams.net preview';
+    frame.referrerPolicy = 'no-referrer';
+    frame.sandbox.add('allow-scripts');
+    frame.srcdoc = buildDrawioSandboxDocument(sanitizedText, resolvedScriptUrl, nonce, channel);
+    await new Promise((resolve, reject) => {
+        const timer = setTimeout(() => fail(t('drawing.error.drawioTimeout')), DRAWIO_OFFICIAL_TIMEOUT);
+        const cleanup = () => {
+            ownerWindow.removeEventListener('message', onMessage);
+            clearTimeout(timer);
+        };
+        const fail = (message) => {
+            cleanup();
+            reject(new Error(message));
+        };
+        const onMessage = (event) => {
+            if (event.source !== frame.contentWindow || event.data?.fileViewerDrawio !== channel)
+                return;
+            if (event.data?.ok === true) {
+                cleanup();
+                resolve();
+            }
+            else {
+                fail(event.data?.message || t('drawing.error.viewerInitFailed'));
+            }
+        };
+        ownerWindow.addEventListener('message', onMessage);
+        frame.addEventListener('error', () => fail(t('drawing.error.viewerLoadFailed')), { once: true });
+        target.appendChild(frame);
+    });
     markRendered(target, 'official');
 };
 const renderDrawio = async (documentRef, text, target, options, t) => {
-    if (options?.preferOfficial === false) {
+    const preferOfficial = options?.preferOfficial ?? isFileViewerDrawioOfficialViewerEnabled();
+    if (!preferOfficial) {
         renderDrawioFallback(documentRef, text, target, t);
         return;
     }
     const scriptUrl = resolveDrawingViewerScriptUrl(options, documentRef);
     try {
-        await runWithTimeout(renderOfficialDrawio(documentRef, text, target, scriptUrl, t), DRAWIO_OFFICIAL_TIMEOUT, t('drawing.error.drawioTimeout'));
+        await renderOfficialDrawio(documentRef, text, target, scriptUrl, t);
     }
     catch (error) {
         console.warn(error);
-        deleteDiagramsViewerPromise(documentRef, scriptUrl);
         delete target.dataset.drawingRendered;
         target.replaceChildren();
         renderDrawioFallback(documentRef, text, target, t);

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { type FileRenderHandler, type FileViewerRenderedInstance, type FileViewerRendererPlugin, type RendererDefinition } from '@file-viewer/core';
+export { disableFileViewerDrawioOfficialViewer, enableFileViewerDrawioOfficialViewer, isFileViewerDrawioOfficialViewerEnabled, } from './optionalCapabilities.js';
 export declare const drawingRendererDefinition: RendererDefinition;
 export declare const renderFileViewerDrawing: FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>;
 export declare const drawingRenderer: FileViewerRendererPlugin<FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>>;

package/dist/index.js

@@ -1,4 +1,5 @@
 import { DEFAULT_RENDERER_DEFINITIONS, } from '@file-viewer/core';
+export { disableFileViewerDrawioOfficialViewer, enableFileViewerDrawioOfficialViewer, isFileViewerDrawioOfficialViewerEnabled, } from './optionalCapabilities.js';
 const drawingDefinition = DEFAULT_RENDERER_DEFINITIONS.find(definition => definition.id === 'drawing');
 if (!drawingDefinition) {
     throw new Error('@file-viewer/renderer-drawing could not locate the core drawing renderer definition.');

package/dist/optionalCapabilities.d.ts

@@ -0,0 +1,3 @@
+export declare const enableFileViewerDrawioOfficialViewer: () => void;
+export declare const disableFileViewerDrawioOfficialViewer: () => void;
+export declare const isFileViewerDrawioOfficialViewerEnabled: () => boolean;

package/dist/optionalCapabilities.js

@@ -0,0 +1,8 @@
+let drawioOfficialViewerEnabled = false;
+export const enableFileViewerDrawioOfficialViewer = () => {
+    drawioOfficialViewerEnabled = true;
+};
+export const disableFileViewerDrawioOfficialViewer = () => {
+    drawioOfficialViewerEnabled = false;
+};
+export const isFileViewerDrawioOfficialViewerEnabled = () => drawioOfficialViewerEnabled;

package/dist/sanitize.d.ts

@@ -0,0 +1 @@
+export declare const sanitizeDrawingSvg: (documentRef: Document, svg: string, invalidMessage?: string) => SVGSVGElement;

package/dist/sanitize.js

@@ -0,0 +1,32 @@
+import createDOMPurify from 'dompurify';
+import { sanitizeFileViewerSvgResources } from '@file-viewer/core';
+const purifierByDocument = new WeakMap();
+const getPurifier = (documentRef) => {
+    const cached = purifierByDocument.get(documentRef);
+    if (cached)
+        return cached;
+    const windowRef = documentRef.defaultView;
+    if (!windowRef)
+        return null;
+    const purifier = createDOMPurify(windowRef);
+    if (!purifier.isSupported)
+        return null;
+    purifierByDocument.set(documentRef, purifier);
+    return purifier;
+};
+export const sanitizeDrawingSvg = (documentRef, svg, invalidMessage = 'Unable to parse SVG safely.') => {
+    const purifier = getPurifier(documentRef);
+    if (!purifier)
+        throw new Error(invalidMessage);
+    const fragment = purifier.sanitize(svg, {
+        RETURN_DOM_FRAGMENT: true,
+        USE_PROFILES: { svg: true, svgFilters: true },
+        FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'foreignObject'],
+        FORBID_ATTR: ['srcdoc'],
+    });
+    sanitizeFileViewerSvgResources(fragment);
+    const root = fragment.querySelector('svg');
+    if (!root)
+        throw new Error(invalidMessage);
+    return documentRef.importNode(root, true);
+};

package/file-viewer.capability.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../../../ecosystem/capability-manifest.schema.json",
+  "schemaVersion": 1,
+  "id": "drawing",
+  "packageName": "@file-viewer/renderer-drawing",
+  "rendererIds": ["drawing"],
+  "formats": ["excalidraw", "drawio", "dio", "mermaid", "mmd", "plantuml", "puml"],
+  "assets": { "rendererIds": [] },
+  "license": { "spdx": "Apache-2.0", "policy": "permissive" },
+  "weight": "heavy",
+  "profiles": ["all"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-drawing",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "private": false,
   "type": "module",
   "description": "Standalone Draw.io, Excalidraw, Mermaid, and PlantUML renderer plugin for File Viewer with pan/zoom support.",
@@ -51,13 +51,18 @@
   },
   "files": [
     "dist",
+    "file-viewer.capability.json",
     "README.md",
     "README.en.md",
     "LICENSE"
   ],
+  "fileViewer": {
+    "capabilityManifest": "./file-viewer.capability.json"
+  },
   "dependencies": {
-    "@file-viewer/core": "2.4.0",
+    "@file-viewer/core": "3.0.0",
     "@panzoom/panzoom": "^4.6.2",
+    "dompurify": "3.4.13",
     "mermaid": "^11.16.1",
     "plantuml-encoder": "^1.4.0",
     "roughjs": "^4.6.6"