@file-viewer/doc 2.4.0 → 3.0.0

package/README.en.md

@@ -21,6 +21,10 @@ const rendered = renderMsDoc(parsed)
 container.innerHTML = `<style>${rendered.css}</style><div class="msdoc-root">${rendered.html}</div>`
 ```
 
+External links and linked images are blocked by default. Trusted integrations
+can opt in separately with `externalLinkPolicy: 'allow'` and
+`externalResourcePolicy: 'allow'`; embedded images and bookmarks keep working.
+
 The package also exports `parseMsDocToHtml`, `mountMsDoc`, `createMsDocViewer`, and `MsDocWorkerClient`.
 
 ## Scope

package/README.md

@@ -109,6 +109,9 @@ document.getElementById('app')!.innerHTML = `
 `;
 ```
 
+外部链接和关联图片默认阻断。确需访问可信外部资源时，应分别显式设置
+`externalLinkPolicy: 'allow'` 和 `externalResourcePolicy: 'allow'`；内嵌图片及书签不受影响。
+
 ### 2）使用内置 Viewer
 
 ```ts

package/dist/core/utils.js

@@ -48,7 +48,8 @@ export function slugify(text) {
     return String(text ?? '')
         .toLowerCase()
         .replace(/[^a-z0-9\u4e00-\u9fa5]+/g, '-')
-        .replace(/^-+|-+$/g, '') || 'item';
+        .replace(/^-/, '')
+        .replace(/-$/, '') || 'item';
 }
 export function shallowEqual(a, b) {
     if (a === b)

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { parseMsDoc } from './msdoc/parser.js';
 export { renderMsDoc, defaultMsDocCss, sanitizeMsDocLinkHref } from './render/html.js';
-export { createMsDocViewer, mountMsDoc, parseMsDocToHtml, sanitizeMsDocHtml } from './viewer.js';
+export { createMsDocViewer, mountMsDoc, parseMsDocToHtml, sanitizeFileViewerDocumentMarkup, sanitizeMsDocHtml, } from './viewer.js';
 export { MsDocWorkerClient } from './worker-client.js';
 export type * from './types.js';

package/dist/index.js

@@ -1,4 +1,4 @@
 export { parseMsDoc } from './msdoc/parser.js';
 export { renderMsDoc, defaultMsDocCss, sanitizeMsDocLinkHref } from './render/html.js';
-export { createMsDocViewer, mountMsDoc, parseMsDocToHtml, sanitizeMsDocHtml } from './viewer.js';
+export { createMsDocViewer, mountMsDoc, parseMsDocToHtml, sanitizeFileViewerDocumentMarkup, sanitizeMsDocHtml, } from './viewer.js';
 export { MsDocWorkerClient } from './worker-client.js';

package/dist/msdoc/html-word.js

@@ -1,7 +1,10 @@
 import { charPropsToState, paraPropsToState } from './properties.js';
 const HTML_PREFIX_RE = /^(?:<!doctype\s+html\b|<html\b|<body\b)/i;
-const BLOCK_RE = /<(div|p|h[1-6]|li|pre|blockquote|tr)\b([^>]*)>([\s\S]*?)<\/\1\s*>/gi;
-const UNSAFE_CONTENT_RE = /<(script|style|noscript|iframe|object|embed|svg)\b[^>]*>[\s\S]*?<\/\1\s*>/gi;
+const HTML_BREAK_TAGS = new Set(['br']);
+const HTML_PARAGRAPH_TAGS = new Set(['div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'pre', 'blockquote', 'tr']);
+const HTML_BLOCK_TAGS = new Set(['div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'pre', 'blockquote', 'tr', 'table']);
+const HTML_CELL_TAGS = new Set(['td', 'th']);
+const HTML_SKIPPED_CONTENT_TAGS = new Set(['script', 'style', 'noscript', 'iframe', 'object', 'embed', 'svg']);
 function asciiPreview(bytes, length = 1024) {
     return Array.from(bytes.subarray(0, Math.min(length, bytes.length)), byte => byte === 0 ? '' : String.fromCharCode(byte)).join('');
 }
@@ -63,34 +66,165 @@ function decodeEntities(value) {
         return named[entity.toLowerCase()] ?? match;
     });
 }
+function findHtmlTagEnd(value, start) {
+    let quote = '';
+    for (let index = start + 1; index < value.length; index += 1) {
+        const character = value[index] || '';
+        if (quote) {
+            if (character === quote)
+                quote = '';
+            continue;
+        }
+        if (character === '"' || character === "'") {
+            quote = character;
+        }
+        else if (character === '>') {
+            return index;
+        }
+    }
+    return -1;
+}
+function readHtmlTag(value, start, end) {
+    let cursor = start + 1;
+    while (cursor < end && /\s/.test(value[cursor] || ''))
+        cursor += 1;
+    const closing = value[cursor] === '/';
+    if (closing)
+        cursor += 1;
+    while (cursor < end && /\s/.test(value[cursor] || ''))
+        cursor += 1;
+    const nameStart = cursor;
+    while (cursor < end && /[A-Za-z0-9]/.test(value[cursor] || ''))
+        cursor += 1;
+    return {
+        closing,
+        name: value.slice(nameStart, cursor).toLowerCase(),
+        attributes: closing ? '' : value.slice(cursor, end),
+        selfClosing: !closing && /\/\s*$/.test(value.slice(cursor, end)),
+    };
+}
+function skipHtmlElementContent(value, lowerValue, tagName, start) {
+    const closingPrefix = `</${tagName}`;
+    let cursor = start;
+    while (cursor < value.length) {
+        const closingStart = lowerValue.indexOf(closingPrefix, cursor);
+        if (closingStart < 0)
+            return value.length;
+        const boundary = lowerValue[closingStart + closingPrefix.length] || '';
+        if (boundary && !/[\s>]/.test(boundary)) {
+            cursor = closingStart + closingPrefix.length;
+            continue;
+        }
+        const closingEnd = findHtmlTagEnd(value, closingStart);
+        return closingEnd < 0 ? value.length : closingEnd + 1;
+    }
+    return value.length;
+}
+function htmlFragmentToText(fragment) {
+    const chunks = [];
+    const lowerFragment = fragment.toLowerCase();
+    let cursor = 0;
+    while (cursor < fragment.length) {
+        const tagStart = fragment.indexOf('<', cursor);
+        if (tagStart < 0) {
+            chunks.push(fragment.slice(cursor));
+            break;
+        }
+        chunks.push(fragment.slice(cursor, tagStart));
+        if (fragment.startsWith('<!--', tagStart)) {
+            const commentEnd = fragment.indexOf('-->', tagStart + 4);
+            cursor = commentEnd < 0 ? fragment.length : commentEnd + 3;
+            continue;
+        }
+        const tagEnd = findHtmlTagEnd(fragment, tagStart);
+        if (tagEnd < 0) {
+            chunks.push(fragment.slice(tagStart));
+            break;
+        }
+        const tag = readHtmlTag(fragment, tagStart, tagEnd);
+        if (!tag.closing && HTML_SKIPPED_CONTENT_TAGS.has(tag.name)) {
+            cursor = skipHtmlElementContent(fragment, lowerFragment, tag.name, tagEnd + 1);
+            continue;
+        }
+        if (HTML_BREAK_TAGS.has(tag.name) || (tag.closing && HTML_BLOCK_TAGS.has(tag.name))) {
+            chunks.push('\n');
+        }
+        else if (HTML_CELL_TAGS.has(tag.name)) {
+            chunks.push('\t');
+        }
+        cursor = tagEnd + 1;
+    }
+    return chunks.join('').replace(/\u0000/g, '');
+}
 function fragmentToText(fragment) {
-    return decodeEntities(fragment
-        .replace(UNSAFE_CONTENT_RE, '')
-        .replace(/<!--[\s\S]*?-->/g, '')
-        .replace(/<br\s*\/?>/gi, '\n')
-        .replace(/<\/(?:div|p|h[1-6]|li|pre|blockquote|tr|table)>/gi, '\n')
-        .replace(/<\/?(?:td|th)\b[^>]*>/gi, '\t')
-        .replace(/<[^>]+>/g, '')
-        .replace(/\u0000/g, ''))
+    return decodeEntities(htmlFragmentToText(fragment))
         .replace(/\r\n?/g, '\n')
         .replace(/[\t\f\v ]+/g, ' ')
         .replace(/ *\n */g, '\n')
         .trim();
 }
 function extractParagraphs(html) {
-    const safe = html.replace(UNSAFE_CONTENT_RE, '').replace(/<!--[\s\S]*?-->/g, '');
     const paragraphs = [];
-    for (const match of safe.matchAll(BLOCK_RE)) {
-        const content = match[3] || '';
+    const lowerHtml = html.toLowerCase();
+    let active = null;
+    let cursor = 0;
+    const appendParagraph = (attributes, content) => {
         const text = fragmentToText(content);
-        if (!text)
+        if (text)
+            paragraphs.push({ text, attributes, content });
+    };
+    while (cursor < html.length) {
+        const tagStart = html.indexOf('<', cursor);
+        if (tagStart < 0)
+            break;
+        if (html.startsWith('<!--', tagStart)) {
+            const commentEnd = html.indexOf('-->', tagStart + 4);
+            cursor = commentEnd < 0 ? html.length : commentEnd + 3;
+            continue;
+        }
+        const tagEnd = findHtmlTagEnd(html, tagStart);
+        if (tagEnd < 0)
+            break;
+        const tag = readHtmlTag(html, tagStart, tagEnd);
+        if (!tag.closing && HTML_SKIPPED_CONTENT_TAGS.has(tag.name)) {
+            cursor = skipHtmlElementContent(html, lowerHtml, tag.name, tagEnd + 1);
             continue;
-        paragraphs.push({ text, attributes: match[2] || '', content });
+        }
+        if (HTML_PARAGRAPH_TAGS.has(tag.name) && !tag.selfClosing) {
+            if (!tag.closing) {
+                if (!active) {
+                    active = {
+                        attributes: tag.attributes,
+                        contentStart: tagEnd + 1,
+                        name: tag.name,
+                        sameNameDepth: 0,
+                    };
+                }
+                else if (active.name === tag.name) {
+                    active.sameNameDepth += 1;
+                }
+            }
+            else if (active?.name === tag.name) {
+                if (active.sameNameDepth > 0) {
+                    active.sameNameDepth -= 1;
+                }
+                else {
+                    appendParagraph(active.attributes, html.slice(active.contentStart, tagStart));
+                    active = null;
+                }
+            }
+        }
+        cursor = tagEnd + 1;
+    }
+    // Malformed HTML saved by old Word versions is common. Preserve its visible
+    // tail as a paragraph without restarting a regex search at every opening tag.
+    if (active) {
+        appendParagraph(active.attributes, html.slice(active.contentStart));
     }
     if (paragraphs.length)
         return paragraphs;
-    const text = fragmentToText(safe);
-    return text ? [{ text, attributes: '', content: safe }] : [];
+    const text = fragmentToText(html);
+    return text ? [{ text, attributes: '', content: html }] : [];
 }
 function readStyle(attributes) {
     return /\bstyle\s*=\s*(["'])([\s\S]*?)\1/i.exec(attributes)?.[2] || '';

package/dist/msdoc/objects.d.ts

@@ -6,6 +6,7 @@ export interface OfficeArtRecordHeader {
     recLen: number;
     size: number;
 }
+export declare function trimTrailingNullCharacters(value: string): string;
 export declare function detectImageSegment(bytes: Uint8Array): {
     mime: string;
     start: number;

package/dist/msdoc/objects.js

@@ -36,6 +36,13 @@ function isPrintableAnsi(bytes) {
     }
     return true;
 }
+export function trimTrailingNullCharacters(value) {
+    let end = value.length;
+    while (end > 0 && value.charCodeAt(end - 1) === 0) {
+        end -= 1;
+    }
+    return end === value.length ? value : value.slice(0, end);
+}
 function isProbablyPicturePath(value) {
     const normalized = value.trim();
     if (!normalized)
@@ -217,7 +224,7 @@ function readOptionalPictureName(pictureChunk, picf) {
     const raw = pictureChunk.subarray(offset + 1, offset + 1 + length);
     if (!isPrintableAnsi(raw))
         return null;
-    const value = new TextDecoder('windows-1252').decode(raw).replace(/\0+$/g, '');
+    const value = trimTrailingNullCharacters(new TextDecoder('windows-1252').decode(raw));
     if (!isProbablyPicturePath(value)) {
         if (picf.mm !== MM_SHAPEFILE)
             return null;
@@ -322,7 +329,7 @@ function extractEmbeddedBlipFromFbse(bytes, offset, header) {
     if (!candidate)
         return null;
     const fbseName = cbName > 0 && nameOffset + cbName <= payloadEnd
-        ? new TextDecoder('utf-16le').decode(bytes.subarray(nameOffset, nameOffset + Math.max(0, cbName - 2))).replace(/\0+$/g, '')
+        ? trimTrailingNullCharacters(new TextDecoder('utf-16le').decode(bytes.subarray(nameOffset, nameOffset + Math.max(0, cbName - 2))))
         : '';
     return {
         ...candidate,

package/dist/render/html.js

@@ -50,12 +50,12 @@ export function sanitizeMsDocLinkHref(href, policy = 'block') {
         return null;
     if (/^(?:https?:|mailto:|tel:)/i.test(value))
         return value;
-    if (value.startsWith('//') || value.startsWith('\\'))
+    if (value.startsWith('//') || value.includes('\\'))
         return null;
-    if (/^(?:\/|\.\/|\.\.\/)/.test(value) && !value.startsWith('//') && !value.startsWith('\\\\')) {
+    if (/^(?:\/|\.\/|\.\.\/)/.test(value) && !value.startsWith('//')) {
         return value;
     }
-    if (!/^[a-z][a-z\d+.-]*:/i.test(value) && !value.startsWith('\\'))
+    if (!/^[a-z][a-z\d+.-]*:/i.test(value))
         return value;
     return null;
 }
@@ -263,13 +263,61 @@ function applyInlineImageDisplaySize(style, asset) {
     if (heightPx)
         style.height = `${heightPx}px`;
 }
-function sanitizeImageSource(src) {
-    const value = String(src || '').trim();
+const SAFE_RASTER_IMAGE_DATA_URL = /^data:image\/(?:avif|bmp|gif|jpeg|png|webp|x-icon);base64,[a-z\d+/=]+$/i;
+function decodeBase64Text(value) {
+    try {
+        const bufferCtor = globalThis.Buffer;
+        if (bufferCtor)
+            return bufferCtor.from(value, 'base64').toString('utf8');
+        if (typeof atob !== 'function')
+            return null;
+        const binary = atob(value);
+        const bytes = Uint8Array.from(binary, character => character.charCodeAt(0));
+        return new TextDecoder().decode(bytes);
+    }
+    catch {
+        return null;
+    }
+}
+function isSafeSvgImageDataUrl(value) {
+    const match = /^data:image\/svg\+xml;base64,([a-z\d+/=]+)$/i.exec(value);
+    if (!match || match[1].length > 8 * 1024 * 1024)
+        return false;
+    const svg = decodeBase64Text(match[1]);
+    if (!svg || !/^\s*<svg(?:\s|>)/i.test(svg))
+        return false;
+    if (/<\/?(?:script|style|foreignObject|iframe|object|embed|form|link)\b/i.test(svg))
+        return false;
+    if (/<!\s*(?:doctype|entity)\b/i.test(svg) || /\son[a-z\d_-]+\s*=/i.test(svg))
+        return false;
+    if (svg.includes('\\') || svg.includes('/*') || /@import\b/i.test(svg))
+        return false;
+    if (/url\s*\(\s*(?!["']?#[A-Za-z0-9_.:-]+["']?\s*\))/i.test(svg))
+        return false;
+    for (const resource of svg.matchAll(/\s(?:href|xlink:href|src)\s*=\s*(["'])([\s\S]*?)\1/gi)) {
+        const target = String(resource[2] || '').replace(/[\u0000-\u0020\u007f-\u009f]/g, '');
+        if (!/^#[A-Za-z0-9_.:-]+$/.test(target) && !SAFE_RASTER_IMAGE_DATA_URL.test(target))
+            return false;
+    }
+    return true;
+}
+function sanitizeImageSource(src, policy, allowGeneratedVector = false) {
+    const value = String(src || '').replace(/[\u0000-\u0020\u007f-\u009f]/g, '').trim();
     if (!value)
         return null;
-    if (/^data:image\//i.test(value))
+    if (SAFE_RASTER_IMAGE_DATA_URL.test(value))
         return value;
-    if (/^(?:https?:|blob:)/i.test(value))
+    if (allowGeneratedVector && isSafeSvgImageDataUrl(value))
+        return value;
+    if (/^blob:/i.test(value))
+        return value;
+    if (policy !== 'allow')
+        return null;
+    if (/^https?:/i.test(value))
+        return value;
+    if (value.startsWith('//') || value.startsWith('\\'))
+        return null;
+    if (!/^[a-z][a-z\d+.-]*:/i.test(value) && !value.startsWith('\\'))
         return value;
     return null;
 }
@@ -298,7 +346,8 @@ function sanitizeAssetHref(href, context) {
     return null;
 }
 function renderImageNode(node, context) {
-    const src = sanitizeImageSource(node.asset.sourceUrl) || sanitizeImageSource(node.asset.dataUrl);
+    const allowGeneratedVector = node.asset.meta?.vectorConverted === true;
+    const src = sanitizeImageSource(node.asset.sourceUrl, context.externalResourcePolicy, allowGeneratedVector) || sanitizeImageSource(node.asset.dataUrl, context.externalResourcePolicy, allowGeneratedVector);
     const baseStyle = inlineStyleToCss(node.style);
     const displaySize = inlineImageDisplaySizePx(node.asset);
     if (displaySize.widthPx || displaySize.heightPx) {
@@ -489,6 +538,7 @@ export function renderMsDoc(parsed, options = {}) {
     const css = options.css ?? defaultMsDocCss();
     const context = {
         externalLinkPolicy: options.externalLinkPolicy ?? 'block',
+        externalResourcePolicy: options.externalResourcePolicy ?? 'block',
     };
     const html = parsed.blocks.map((block) => {
         if (block.type === 'paragraph')

package/dist/types.d.ts

@@ -619,6 +619,8 @@ export interface MsDocRenderOptions {
     css?: string;
     /** External links are blocked by default; internal document bookmarks remain active. */
     externalLinkPolicy?: 'allow' | 'block';
+    /** Linked image resources are blocked by default; embedded data/blob images remain available. */
+    externalResourcePolicy?: 'allow' | 'block';
 }
 export interface MsDocMeta {
     fib: {

package/dist/viewer.d.ts

@@ -1,4 +1,11 @@
+import type { Config } from 'dompurify';
 import type { MsDocParseToHtmlOptions, MsDocRenderResult, MsDocViewer, MsDocViewerConfig, ViewerInput } from './types.js';
+/**
+ * Shared DOC/RTF DOMPurify boundary. A per-window purifier and Trusted Types
+ * policy avoid duplicate policy creation when several Word formats are opened
+ * in the same host document.
+ */
+export declare function sanitizeFileViewerDocumentMarkup(html: string, targetWindow: Window, config: Config): unknown | null;
 export declare function sanitizeMsDocHtml(html: string, targetWindow: Window): DocumentFragment;
 export declare function mountMsDoc(container: HTMLElement, rendered: MsDocRenderResult): HTMLElement;
 export declare function parseMsDocToHtml(input: ViewerInput, options?: MsDocParseToHtmlOptions): Promise<MsDocRenderResult>;

package/dist/viewer.js

@@ -1,6 +1,59 @@
 import createDOMPurify from 'dompurify';
 import { parseMsDoc } from './msdoc/parser.js';
 import { renderMsDoc } from './render/html.js';
+const purifierByWindow = new WeakMap();
+const trustedTypesPolicyByWindow = new WeakMap();
+const getDocumentPurifier = (targetWindow) => {
+    const cached = purifierByWindow.get(targetWindow);
+    if (cached)
+        return cached;
+    const purifier = createDOMPurify(targetWindow);
+    if (!purifier.isSupported)
+        return null;
+    purifierByWindow.set(targetWindow, purifier);
+    return purifier;
+};
+const getDocumentTrustedTypesPolicy = (targetWindow) => {
+    const cached = trustedTypesPolicyByWindow.get(targetWindow);
+    if (cached)
+        return cached;
+    const trustedTypes = targetWindow.trustedTypes;
+    if (!trustedTypes?.createPolicy)
+        return null;
+    try {
+        const policy = trustedTypes.createPolicy('file-viewer-document-sanitizer', {
+            createHTML: value => value,
+            createScriptURL: value => value,
+        });
+        trustedTypesPolicyByWindow.set(targetWindow, policy);
+        return policy;
+    }
+    catch {
+        return null;
+    }
+};
+/**
+ * Shared DOC/RTF DOMPurify boundary. A per-window purifier and Trusted Types
+ * policy avoid duplicate policy creation when several Word formats are opened
+ * in the same host document.
+ */
+export function sanitizeFileViewerDocumentMarkup(html, targetWindow, config) {
+    const purifier = getDocumentPurifier(targetWindow);
+    if (!purifier)
+        return null;
+    const policy = getDocumentTrustedTypesPolicy(targetWindow);
+    try {
+        return purifier.sanitize(html, {
+            ...config,
+            ...(policy ? { TRUSTED_TYPES_POLICY: policy } : {}),
+        });
+    }
+    catch {
+        // If a host CSP forbids this policy name, callers fall back to a text node
+        // rather than mounting unsanitized markup or failing the whole preview.
+        return null;
+    }
+}
 async function normalizeInput(input) {
     if (input instanceof ArrayBuffer)
         return input;
@@ -21,13 +74,17 @@ async function normalizeInput(input) {
     throw new TypeError('Unsupported input type');
 }
 export function sanitizeMsDocHtml(html, targetWindow) {
-    const purifier = createDOMPurify(targetWindow);
-    return purifier.sanitize(html, {
+    const sanitized = sanitizeFileViewerDocumentMarkup(html, targetWindow, {
         RETURN_DOM_FRAGMENT: true,
         USE_PROFILES: { html: true },
         FORBID_TAGS: ['base', 'embed', 'form', 'iframe', 'object', 'script', 'style', 'template'],
         FORBID_ATTR: ['action', 'formaction', 'srcdoc'],
     });
+    if (sanitized?.nodeType === 11)
+        return sanitized;
+    const fallback = targetWindow.document.createDocumentFragment();
+    fallback.append(targetWindow.document.createTextNode(html));
+    return fallback;
 }
 export function mountMsDoc(container, rendered) {
     if (!container)
@@ -77,7 +134,7 @@ export function createMsDocViewer(container, config = {}) {
             return mountMsDoc(container, rendered);
         },
         clear() {
-            container.innerHTML = '';
+            container.replaceChildren();
             current = null;
         },
         destroy() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/doc",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "private": false,
   "type": "module",
   "description": "Browser-native legacy MS-DOC (.doc) parser and HTML renderer extracted from the public msdoc-viewer 0.2.0 line.",