@file-viewer/renderer-typst 2.4.0 → 3.0.0

package/README.en.md

@@ -44,6 +44,10 @@ The default asset paths are:
 
 For private deployments, override them with `options.typst.compilerWasmUrl`, `options.typst.rendererWasmUrl`, and `options.typst.fontAssetsUrl`. The default text fonts ship with this package and are copied by `file-viewer-copy-assets` / `@file-viewer/vite-plugin`, so the runtime does not depend on public CDNs.
 
+## CSP and Trusted Types
+
+Typst SVG is rendered through controlled XML parsing, structural sanitization, and DOM node import without `innerHTML`. If the site enables `require-trusted-types-for 'script'`, allow `file-viewer-typst-svg` in the `trusted-types` directive (the DOMPurify export/print path also needs `dompurify`).
+
 ## Migration Note
 
 Typst rendering has moved out of `@file-viewer/core` into this package. Core only keeps the `renderFileViewerTypst()` compatibility export with a clear installation error, and no longer installs `@myriaddreamin/*` by default. Install this renderer explicitly, or use `@file-viewer/preset-all`, when real Typst preview is required.

package/README.md

@@ -44,6 +44,10 @@ const options = {
 
 私有化部署时可以通过 `options.typst.compilerWasmUrl`、`options.typst.rendererWasmUrl` 和 `options.typst.fontAssetsUrl` 覆盖。默认字体资产随本包发布并由 `file-viewer-copy-assets` / `@file-viewer/vite-plugin` 复制到本地静态目录，预览运行时不会访问公共 CDN。
 
+## CSP 与 Trusted Types
+
+Typst SVG 通过受控的 XML 解析、结构化净化和 DOM 节点导入渲染，不使用 `innerHTML`。如果站点启用了 `require-trusted-types-for 'script'`，请在 `trusted-types` 指令中允许 `file-viewer-typst-svg`（DOMPurify 的导出/打印路径还需要 `dompurify`）。
+
 ## 迁移说明
 
 Typst 渲染已经从 `@file-viewer/core` 迁移到本包。core 只保留 `renderFileViewerTypst()` 兼容导出并给出明确安装提示，不再默认安装 `@myriaddreamin/*`。需要 Typst 真实预览时，请显式安装本包，或直接使用 `@file-viewer/preset-all`。

package/dist/sanitize.d.ts

@@ -0,0 +1 @@
+export declare const sanitizeTypstSvgDocument: (root: Document | Element) => void;

package/dist/sanitize.js

@@ -0,0 +1,104 @@
+import { sanitizeFileViewerSvgResources } from '@file-viewer/core';
+const URL_ATTRIBUTES = new Set([
+    'href',
+    'xlink:href',
+    'src',
+    'poster',
+    'action',
+    'formaction',
+]);
+const SAFE_RELATIVE_URL_ASCII = new Set(`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789._~!$&'()*+,;=@%/?#-`);
+const stripUrlControlCharacters = (value) => {
+    let normalized = '';
+    for (const character of value) {
+        const code = character.charCodeAt(0);
+        if (code > 0x20 && (code < 0x7f || code > 0x9f)) {
+            normalized += character;
+        }
+    }
+    return normalized;
+};
+const normalizeTypstResourceUrl = (value) => {
+    const normalized = stripUrlControlCharacters(value).trim();
+    if (!normalized) {
+        return null;
+    }
+    if (/^#[A-Za-z0-9_.:-]+$/.test(normalized)) {
+        return normalized;
+    }
+    if (/^data:image\/(?:png|jpe?g|gif|webp);base64,[A-Za-z0-9+/=]+$/i.test(normalized)) {
+        return normalized;
+    }
+    if (/^blob:[A-Za-z0-9.+-]+:\/\/[^\s]+$/i.test(normalized)) {
+        return normalized;
+    }
+    if (!normalized.includes(':') &&
+        !normalized.includes('\\') &&
+        !normalized.startsWith('//') &&
+        Array.from(normalized).every(character => (character.charCodeAt(0) > 0x7f || SAFE_RELATIVE_URL_ASCII.has(character)))) {
+        return normalized;
+    }
+    return null;
+};
+const hasOnlySafeCssUrls = (value) => {
+    const normalized = stripUrlControlCharacters(value);
+    if (normalized.includes('\\') ||
+        normalized.includes('/*') ||
+        /(?:expression|image(?:-set)?|paint|var)\s*\(|@import|(?:^|[^-])behavior\s*:|-moz-binding/i.test(normalized)) {
+        return false;
+    }
+    let cursor = 0;
+    while (cursor < normalized.length) {
+        const match = /url\s*\(/ig;
+        match.lastIndex = cursor;
+        const next = match.exec(normalized);
+        if (!next) {
+            return true;
+        }
+        const close = normalized.indexOf(')', match.lastIndex);
+        if (close < 0) {
+            return false;
+        }
+        const target = normalized
+            .slice(match.lastIndex, close)
+            .trim()
+            .replace(/^(?:"([\s\S]*)"|'([\s\S]*)')$/, '$1$2');
+        if (!normalizeTypstResourceUrl(target)) {
+            return false;
+        }
+        cursor = close + 1;
+    }
+    return true;
+};
+export const sanitizeTypstSvgDocument = (root) => {
+    root.querySelectorAll('script,iframe,object,embed,form').forEach(node => node.remove());
+    root.querySelectorAll('*').forEach(element => {
+        for (const attribute of Array.from(element.attributes)) {
+            const name = attribute.name.toLowerCase();
+            if (name.startsWith('on') || name === 'srcdoc') {
+                element.removeAttribute(attribute.name);
+                continue;
+            }
+            if (URL_ATTRIBUTES.has(name)) {
+                const normalizedUrl = normalizeTypstResourceUrl(attribute.value);
+                if (!normalizedUrl) {
+                    element.removeAttribute(attribute.name);
+                    continue;
+                }
+                attribute.value = normalizedUrl;
+            }
+            if ((name === 'style' || /url\s*\(/i.test(attribute.value)) && !hasOnlySafeCssUrls(attribute.value)) {
+                element.removeAttribute(attribute.name);
+            }
+        }
+    });
+    root.querySelectorAll('style').forEach(style => {
+        if (!hasOnlySafeCssUrls(style.textContent || '')) {
+            style.remove();
+        }
+    });
+    // Typst output may contain navigation links, but embedded resources must be
+    // self-contained. The shared SVG gate removes relative/remote image loads
+    // while retaining safe anchors, fragments, blobs, and raster data URLs.
+    sanitizeFileViewerSvgResources(root);
+};

package/dist/typst.d.ts

@@ -1,4 +1,4 @@
-import { type FileRenderContext, type FileViewerRenderedInstance } from '@file-viewer/core';
+import { type FileRenderContext, type FileViewerRenderedInstance, type PrintPageSize } from '@file-viewer/core';
 declare global {
     interface Window {
         __FLYFISH_TYPST_COMPILER_WASM_URL__?: string;
@@ -6,4 +6,11 @@ declare global {
         __FLYFISH_TYPST_RENDERER_WASM_URL__?: string;
     }
 }
+export interface TypstRenderedPage extends PrintPageSize {
+    index: number;
+    svg: string;
+    svgNode: Element;
+}
+export declare const parseTypstSvgPages: (svgText: string, svgParseFailedMessage: string, documentRef?: Document) => TypstRenderedPage[];
+export declare const importTypstSvgPageNode: (documentRef: Document, page: Pick<TypstRenderedPage, "svgNode">) => Element;
 export default function renderTypst(buffer: ArrayBuffer, target: HTMLDivElement, _type?: string, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;

package/dist/typst.js

@@ -2,6 +2,40 @@ import { $typst, MemoryAccessModel } from '@myriaddreamin/typst.ts';
 import { TypstSnippet } from '@myriaddreamin/typst.ts/contrib/snippet';
 import { resolveFileViewerTypstCompilerWasmUrl, resolveFileViewerTypstFontAssetsUrl, resolveFileViewerTypstRendererWasmUrl, resolveFileViewerRuntimeAssetBaseUrl, } from '@file-viewer/core/assets';
 import { createFileViewerTranslator, createFileViewerZoomChangeEmitter, formatCssPixels, registerFileViewerZoomProvider, readFileViewerText, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
+import { sanitizeTypstSvgDocument } from './sanitize.js';
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const XMLNS_NAMESPACE = 'http://www.w3.org/2000/xmlns/';
+const TYPST_TRUSTED_TYPES_POLICY_NAME = 'file-viewer-typst-svg';
+const typstTrustedTypesPolicies = new WeakMap();
+const assertTypstSvgIsSafeForInertParsing = (value) => {
+    if (/<!\s*(?:doctype|entity)\b|<\?|<\s*\/?\s*(?:script|iframe|object|embed|form|base|link|meta)\b|\s(?:on[a-z0-9_-]+|srcdoc)\s*=/i.test(value)) {
+        throw new TypeError('Typst SVG contains executable markup and was rejected before parsing.');
+    }
+    return value;
+};
+const createTypstSvgParserInput = (value, documentRef) => {
+    const windowRef = (documentRef === null || documentRef === void 0 ? void 0 : documentRef.defaultView) || (typeof window !== 'undefined' ? window : null);
+    const trustedTypes = windowRef === null || windowRef === void 0 ? void 0 : windowRef.trustedTypes;
+    if (!trustedTypes) {
+        return value;
+    }
+    let policy = typstTrustedTypesPolicies.get(trustedTypes);
+    if (!policy) {
+        try {
+            policy = trustedTypes.createPolicy(TYPST_TRUSTED_TYPES_POLICY_NAME, {
+                createHTML: assertTypstSvgIsSafeForInertParsing,
+            });
+            typstTrustedTypesPolicies.set(trustedTypes, policy);
+        }
+        catch (error) {
+            const detail = error instanceof Error ? ` ${error.message}` : '';
+            const policyError = new Error(`Trusted Types must allow the ${TYPST_TRUSTED_TYPES_POLICY_NAME} policy for Typst SVG parsing.${detail}`);
+            policyError.cause = error;
+            throw policyError;
+        }
+    }
+    return policy.createHTML(value);
+};
 const typstStyle = `
 .typst-viewer{min-height:100%;overflow:auto;background:var(--file-viewer-render-surface-background,#eef1f4);color:#172033}
 .typst-toolbar{position:sticky;top:0;z-index:2;display:flex;min-height:52px;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px;border-bottom:1px solid rgba(120,134,155,.18);background:rgba(248,250,252,.92);backdrop-filter:blur(16px)}
@@ -169,34 +203,26 @@ const readNumberAttribute = (element, name) => {
     const value = Number.parseFloat(element.getAttribute(name) || '');
     return Number.isFinite(value) && value > 0 ? value : 0;
 };
-const removeUnsafeSvgContent = (root) => {
-    root.querySelectorAll('script').forEach(script => script.remove());
-    root.querySelectorAll('*').forEach(element => {
-        Array.from(element.attributes).forEach(attribute => {
-            const name = attribute.name.toLowerCase();
-            const value = attribute.value.trim().toLowerCase();
-            if (name.startsWith('on') || value.startsWith('javascript:')) {
-                element.removeAttribute(attribute.name);
-            }
-        });
-    });
-};
 const serializeNode = (node) => {
     return new XMLSerializer().serializeToString(node);
 };
-const parseTypstSvgPages = (svgText, svgParseFailedMessage) => {
-    const parser = new DOMParser();
-    const documentSvg = parser.parseFromString(svgText, 'image/svg+xml');
+export const parseTypstSvgPages = (svgText, svgParseFailedMessage, documentRef) => {
+    var _a;
+    const Parser = ((_a = documentRef === null || documentRef === void 0 ? void 0 : documentRef.defaultView) === null || _a === void 0 ? void 0 : _a.DOMParser) || DOMParser;
+    const parser = new Parser();
+    const documentSvg = parser.parseFromString(createTypstSvgParserInput(svgText, documentRef), 'image/svg+xml');
     const parseError = documentSvg.querySelector('parsererror');
     if (parseError) {
         throw new Error(parseError.textContent || svgParseFailedMessage);
     }
-    removeUnsafeSvgContent(documentSvg);
+    sanitizeTypstSvgDocument(documentSvg);
     const root = documentSvg.documentElement;
+    if (root.namespaceURI !== SVG_NAMESPACE || root.localName.toLowerCase() !== 'svg') {
+        throw new Error(svgParseFailedMessage);
+    }
     const sharedNodes = Array.from(root.children)
         .filter(child => ['style', 'defs'].includes(child.tagName.toLowerCase()))
-        .map(serializeNode)
-        .join('');
+        .map(child => child.cloneNode(true));
     const pageGroups = Array.from(root.querySelectorAll('g.typst-page'));
     const fallbackWidth = readNumberAttribute(root, 'data-width') ||
         readNumberAttribute(root, 'width') ||
@@ -209,7 +235,8 @@ const parseTypstSvgPages = (svgText, svgParseFailedMessage) => {
                 index: 1,
                 width: fallbackWidth,
                 height: fallbackHeight,
-                svg: svgText,
+                svg: serializeNode(root),
+                svgNode: root,
             }];
     }
     return pageGroups.map((group, index) => {
@@ -217,20 +244,30 @@ const parseTypstSvgPages = (svgText, svgParseFailedMessage) => {
         const pageHeight = readNumberAttribute(group, 'data-page-height') || fallbackHeight;
         const pageClone = group.cloneNode(true);
         pageClone.setAttribute('transform', 'translate(0, 0)');
-        const pageSvg = [
-            `<svg style="overflow:visible;" class="typst-doc" viewBox="0 0 ${pageWidth} ${pageHeight}" width="${pageWidth}" height="${pageHeight}" data-width="${pageWidth}" data-height="${pageHeight}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">`,
-            sharedNodes,
-            serializeNode(pageClone),
-            '</svg>',
-        ].join('');
+        const pageSvg = documentSvg.createElementNS(SVG_NAMESPACE, 'svg');
+        pageSvg.setAttribute('style', 'overflow:visible;');
+        pageSvg.setAttribute('class', 'typst-doc');
+        pageSvg.setAttribute('viewBox', `0 0 ${pageWidth} ${pageHeight}`);
+        pageSvg.setAttribute('width', String(pageWidth));
+        pageSvg.setAttribute('height', String(pageHeight));
+        pageSvg.setAttribute('data-width', String(pageWidth));
+        pageSvg.setAttribute('data-height', String(pageHeight));
+        pageSvg.setAttributeNS(XMLNS_NAMESPACE, 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
+        pageSvg.setAttributeNS(XMLNS_NAMESPACE, 'xmlns:h5', 'http://www.w3.org/1999/xhtml');
+        pageSvg.append(...sharedNodes.map(node => node.cloneNode(true)), pageClone);
+        sanitizeTypstSvgDocument(pageSvg);
         return {
             index: index + 1,
             width: pageWidth,
             height: pageHeight,
-            svg: pageSvg,
+            svg: serializeNode(pageSvg),
+            svgNode: pageSvg,
         };
     });
 };
+export const importTypstSvgPageNode = (documentRef, page) => {
+    return documentRef.importNode(page.svgNode, true);
+};
 const formatTypstError = (error) => {
     if (Array.isArray(error)) {
         return error.map(item => {
@@ -465,7 +502,7 @@ export default async function renderTypst(buffer, target, _type, context) {
             const shell = createElement(documentRef, 'section', 'typst-page-shell');
             shell.setAttribute('aria-label', `Page ${page.index}`);
             const content = createElement(documentRef, 'div', 'typst-page-content');
-            content.innerHTML = page.svg;
+            content.replaceChildren(importTypstSvgPageNode(documentRef, page));
             shell.append(content);
             pageShells.set(page.index, shell);
             pagesRoot.append(shell);
@@ -539,7 +576,7 @@ export default async function renderTypst(buffer, target, _type, context) {
             if (disposed || token !== renderToken) {
                 return;
             }
-            pages = parseTypstSvgPages(svg, t('typst.error.svgParseFailed'));
+            pages = parseTypstSvgPages(svg, t('typst.error.svgParseFailed'), documentRef);
             state = 'ready';
             syncUi();
             registerExportAdapter();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-typst",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "private": false,
   "type": "module",
   "description": "Standalone Typst renderer plugin for File Viewer powered by browser WASM.",
@@ -54,7 +54,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "2.4.0",
+    "@file-viewer/core": "3.0.0",
     "@myriaddreamin/typst-ts-renderer": "0.7.0",
     "@myriaddreamin/typst-ts-web-compiler": "0.7.0",
     "@myriaddreamin/typst.ts": "0.7.0"