@limetech/lime-elements 39.0.3 → 39.1.0

package/dist/collection/components/email-viewer/email-viewer.js

@@ -0,0 +1,294 @@
+import { h, Host, } from "@stencil/core";
+import translate from "../../global/translations";
+import { applyRemoteImagesPolicy, containsRemoteImages } from "./remote-images";
+import { splitEmailAddressList } from "./split-email-address-list";
+import { formatBytes } from "../../util/format-bytes";
+/**
+ * This is a private component, used to render `.eml` files inside
+ * `limel-file-viewer`.
+ *
+ * :::note
+ * If `bodyHtml` is provided, it will be rendered using `innerHTML`.
+ * Consumers should pre-sanitize `bodyHtml` before passing it to the component.
+ * :::
+ *
+ * @exampleComponent limel-example-email-viewer-plain-text
+ * @exampleComponent limel-example-email-viewer-inline-image
+ * @exampleComponent limel-example-email-viewer-remote-image-policy
+ *
+ * @private
+ */
+export class EmailViewer {
+    constructor() {
+        /**
+         * Defines the localization for translations.
+         */
+        this.language = 'en';
+        this.allowRemoteImagesState = false;
+        this.renderAttachment = (attachment, index) => {
+            var _a, _b;
+            const filename = ((_a = attachment.filename) === null || _a === void 0 ? void 0 : _a.trim()) ||
+                this.getTranslation('file-viewer.email.attachment.unnamed');
+            const mimeType = ((_b = attachment.mimeType) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            return (h("li", { key: `attachment-${index}` }, h("span", { class: "attachment-filename" }, filename), h("span", { class: "attachment-mime-type" }, " ", mimeType), this.renderSizeBadge(attachment.size)));
+        };
+        this.renderSizeBadge = (size) => {
+            if (typeof size !== 'number') {
+                return;
+            }
+            return (h("limel-badge", { class: "attachment-size", label: formatBytes(size) }));
+        };
+        this.onEnableRemoteImagesClick = (event) => {
+            var _a;
+            (_a = event === null || event === void 0 ? void 0 : event.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(event);
+            this.enableRemoteImages();
+        };
+        this.enableRemoteImages = () => {
+            if (this.allowRemoteImages !== undefined) {
+                this.allowRemoteImagesChange.emit(true);
+                return;
+            }
+            this.allowRemoteImagesState = true;
+        };
+    }
+    resetAllowRemoteImages(newEmail, oldEmail) {
+        if (!newEmail) {
+            this.allowRemoteImagesState = false;
+            return;
+        }
+        if (newEmail.from !== (oldEmail === null || oldEmail === void 0 ? void 0 : oldEmail.from)) {
+            this.allowRemoteImagesState = false;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'a004af12989a477f4a9404ee86e0429bc5c2d427' }, h("div", { key: 'fc3bdeb81d823ff1cd39b4f6d52b4a88d9326392', class: "email", part: "email" }, this.renderHeaders(), this.renderRemoteImageBanner(), h("section", { key: '6fdd1cfe50cc4b41f7e70413541dc5950d7c44fa' }, this.renderAttachments(), this.renderBody()))));
+    }
+    renderHeaders() {
+        const headerFields = [
+            'subject',
+            'from',
+            'to',
+            'cc',
+            'date',
+        ];
+        return (h("div", { class: "email-headers", part: "email-headers" }, headerFields.map((type) => {
+            var _a;
+            return this.renderEmailHeader(type, this.getTranslation(`file-viewer.email.${type}`), (_a = this.email) === null || _a === void 0 ? void 0 : _a[type]);
+        })));
+    }
+    renderBody() {
+        return (this.renderBodyHtml() ||
+            this.renderBodyText() ||
+            this.renderFallbackUrl() || h("slot", { name: "fallback" }));
+    }
+    renderBodyHtml() {
+        var _a;
+        const bodyHtml = (_a = this.email) === null || _a === void 0 ? void 0 : _a.bodyHtml;
+        if (!bodyHtml) {
+            return;
+        }
+        const innerHtml = applyRemoteImagesPolicy(bodyHtml, this.getAllowRemoteImages());
+        return h("div", { class: "body", innerHTML: innerHtml, part: "email-body" });
+    }
+    renderBodyText() {
+        var _a;
+        const bodyText = (_a = this.email) === null || _a === void 0 ? void 0 : _a.bodyText;
+        if (!bodyText) {
+            return;
+        }
+        return (h("pre", { class: "body plain-text", part: "email-body" }, bodyText));
+    }
+    renderFallbackUrl() {
+        if (!this.fallbackUrl) {
+            return;
+        }
+        return (h("object", { data: this.fallbackUrl, type: "text/plain" }, h("slot", { name: "fallback" })));
+    }
+    renderEmailHeader(type, label, value) {
+        if (!value) {
+            return;
+        }
+        const values = this.getHeaderValues(type, value);
+        return (h("dl", { class: `headers ${type}` }, h("dt", null, label), values.map((headerValue, index) => (h("dd", { key: `${type}-${index}` }, headerValue)))));
+    }
+    getHeaderValues(type, value) {
+        if (type === 'to' || type === 'cc') {
+            return splitEmailAddressList(value);
+        }
+        return [value];
+    }
+    renderAttachments() {
+        var _a;
+        const attachments = (_a = this.email) === null || _a === void 0 ? void 0 : _a.attachments;
+        if (!(attachments === null || attachments === void 0 ? void 0 : attachments.length)) {
+            return;
+        }
+        const label = this.getTranslation('file-viewer.email.attachments');
+        return (h("div", { class: "attachments" }, h("span", null, label), h("ul", null, attachments.map((attachment, index) => this.renderAttachment(attachment, index)))));
+    }
+    getTranslation(key) {
+        return translate.get(key, this.language);
+    }
+    shouldShowRemoteImagesBanner() {
+        var _a;
+        const bodyHtml = (_a = this.email) === null || _a === void 0 ? void 0 : _a.bodyHtml;
+        if (!bodyHtml || this.getAllowRemoteImages()) {
+            return false;
+        }
+        return containsRemoteImages(bodyHtml);
+    }
+    renderRemoteImageBanner() {
+        if (!this.shouldShowRemoteImagesBanner()) {
+            return;
+        }
+        const icon = {
+            name: 'warning_shield',
+            color: 'rgb(var(--color-orange-default))',
+        };
+        const heading = this.getTranslation('file-viewer.email.remote-images.warning');
+        const description = this.getTranslation('file-viewer.email.remote-images.warning.description');
+        const buttonLabel = this.getTranslation('file-viewer.email.remote-images.load');
+        return (h("limel-collapsible-section", { header: heading, icon: icon, language: this.language }, h("button", { type: "button", class: "load-images", slot: "header", onClick: this.onEnableRemoteImagesClick }, buttonLabel), h("limel-markdown", { value: description })));
+    }
+    getAllowRemoteImages() {
+        var _a;
+        return (_a = this.allowRemoteImages) !== null && _a !== void 0 ? _a : this.allowRemoteImagesState;
+    }
+    static get is() { return "limel-email-viewer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["email-viewer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["email-viewer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "email": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Email",
+                    "resolved": "Email",
+                    "references": {
+                        "Email": {
+                            "location": "import",
+                            "path": "./email-viewer.types",
+                            "id": "src/components/email-viewer/email-viewer.types.ts::Email",
+                            "referenceLocation": "Email"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The email message to display.\n\nIf `email.bodyHtml` is set directly, consumers must provide sanitized\nHTML."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "fallbackUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional URL to render as a final fallback using an `<object type=\"text/plain\">`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "fallback-url"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Languages",
+                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+                    "references": {
+                        "Languages": {
+                            "location": "import",
+                            "path": "../date-picker/date.types",
+                            "id": "src/components/date-picker/date.types.ts::Languages",
+                            "referenceLocation": "Languages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the localization for translations."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "language",
+                "defaultValue": "'en'"
+            },
+            "allowRemoteImages": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether remote images (http/https) are loaded.\n\nIf omitted, the component treats this as a per-email setting.\nConsumers that want to remember the choice (per session/global) can\nprovide this prop and listen for `allowRemoteImagesChange`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-remote-images"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "allowRemoteImagesState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "allowRemoteImagesChange",
+                "name": "allowRemoteImagesChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Emitted when the user requests remote images to be loaded."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "email",
+                "methodName": "resetAllowRemoteImages"
+            }];
+    }
+}

package/dist/collection/components/email-viewer/email-viewer.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/email-viewer/remote-images.js

@@ -0,0 +1,50 @@
+/**
+ * Checks whether the given HTML contains any images with a `data-remote-src`
+ * attribute, indicating they reference external (remote) resources.
+ *
+ * @param html - The HTML string to inspect.
+ */
+export function containsRemoteImages(html) {
+    const parser = new DOMParser();
+    const document = parser.parseFromString(html, 'text/html');
+    return document.querySelector('img[data-remote-src]') !== null;
+}
+/**
+ * If `allowRemoteImages` is `true`, replaces the `src` attribute of every
+ * `<img data-remote-src="...">` element with the value of `data-remote-src`
+ * (provided it points to an http(s) URL) and removes the data attribute.
+ *
+ * When `allowRemoteImages` is `false` the HTML is returned unchanged.
+ *
+ * Returns an HTML fragment that is safe to assign to `innerHTML` on a regular
+ * container element (not a full `<html>/<head>/<body>` document string).
+ *
+ * @param html - The HTML string to process.
+ * @param allowRemoteImages - Whether to restore remote image sources.
+ */
+export function applyRemoteImagesPolicy(html, allowRemoteImages) {
+    if (!allowRemoteImages) {
+        return html;
+    }
+    const parser = new DOMParser();
+    const document = parser.parseFromString(html, 'text/html');
+    const images = document.querySelectorAll('img[data-remote-src]');
+    for (const image of images) {
+        const remoteSrc = image.dataset.remoteSrc;
+        if (!remoteSrc || !isAllowedRemoteImageUrl(remoteSrc)) {
+            delete image.dataset.remoteSrc;
+            continue;
+        }
+        image.setAttribute('src', remoteSrc);
+        delete image.dataset.remoteSrc;
+    }
+    const headStyles = [...document.head.querySelectorAll('style')]
+        .map((style) => style.outerHTML)
+        .join('');
+    return `${headStyles}${document.body.innerHTML}`;
+}
+function isAllowedRemoteImageUrl(url) {
+    const trimmed = url.trim();
+    const lower = trimmed.toLowerCase();
+    return lower.startsWith('https://') || lower.startsWith('http://');
+}

package/dist/collection/components/email-viewer/sanitize-email-html.js

@@ -0,0 +1,245 @@
+import { unified } from "unified";
+import rehypeParse from "rehype-parse";
+import rehypeSanitize from "rehype-sanitize";
+import rehypeStringify from "rehype-stringify";
+import { visit } from "unist-util-visit";
+import { defaultSchema } from "rehype-sanitize";
+const allowedMimeTypes = new Set([
+    'image/png',
+    'image/jpeg',
+    'image/jpg',
+    'image/gif',
+    'image/webp',
+    'image/bmp',
+    'image/x-icon',
+    'image/vnd.microsoft.icon',
+]);
+/**
+ * Sanitizes email HTML to prevent XSS and other security issues while
+ * preserving the original visual appearance (layout, colors, fonts, etc.).
+ *
+ * This differs from the markdown sanitizer (`sanitizeHTML`) in that:
+ * - **All inline CSS is preserved** (no style property filtering).
+ * - Dangerous CSS properties like `behavior`, `expression`, `-moz-binding` are removed.
+ * - Standard dangerous tags/attributes are blocked (script, event handlers, javascript: URLs).
+ *
+ * @param html - The HTML string to sanitize (typically an email body).
+ * @returns The sanitized HTML string.
+ */
+export async function sanitizeEmailHTML(html) {
+    const file = await unified()
+        .use(rehypeParse)
+        .use(rehypeSanitize, getEmailSanitizationSchema())
+        .use(() => {
+        return (tree) => {
+            visit(tree, 'element', (node) => {
+                sanitizeDangerousCss(node);
+                sanitizeDangerousUrls(node);
+            });
+        };
+    })
+        .use(rehypeStringify)
+        .process(html);
+    return file.toString();
+}
+/**
+ * Returns a rehype-sanitize schema that allows all standard HTML elements
+ * and attributes needed for rich email rendering, including `style`.
+ */
+function getEmailSanitizationSchema() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const defaultSrcProtocols = (_b = (_a = defaultSchema.protocols) === null || _a === void 0 ? void 0 : _a.src) !== null && _b !== void 0 ? _b : [];
+    const schema = Object.assign(Object.assign({}, defaultSchema), { protocols: Object.assign(Object.assign({}, defaultSchema.protocols), {
+            // Email bodies often embed images as data URLs. We allow `data:` here,
+            // but still validate the MIME type in `sanitizeDangerousUrls`.
+            src: [...defaultSrcProtocols, 'http', 'https', 'data']
+        }), attributes: Object.assign(Object.assign({}, defaultSchema.attributes), { table: [
+                ...((_c = defaultSchema.attributes.table) !== null && _c !== void 0 ? _c : []),
+                // Email HTML often relies on these legacy attributes.
+                'cellpadding',
+                'cellPadding',
+                'cellspacing',
+                'cellSpacing',
+                'border',
+                'dir',
+                'width',
+                'height',
+            ], colgroup: [...((_d = defaultSchema.attributes.colgroup) !== null && _d !== void 0 ? _d : []), 'span'], col: [...((_e = defaultSchema.attributes.col) !== null && _e !== void 0 ? _e : []), 'width', 'span'], '*': [
+                ...((_f = defaultSchema.attributes['*']) !== null && _f !== void 0 ? _f : []),
+                'style', // Allow inline styles on all elements
+                // NOTE: rehype/parse maps `class` to the HAST property name
+                // `className`, which is what rehype-sanitize checks.
+                'className',
+                'class', // Keep for completeness
+                'id', // Allow id for anchors/internal navigation
+                // Used to store remote image URLs without loading them immediately.
+                'data-remote-src',
+                'dataRemoteSrc',
+            ] }),
+        // Allow common email-specific tags
+        tagNames: [
+            ...((_g = defaultSchema.tagNames) !== null && _g !== void 0 ? _g : []),
+            // Allow full-document HTML emails. These tags won't render as text,
+            // but keeping them avoids their contents being surfaced as plain text.
+            'html',
+            'head',
+            'body',
+            'title',
+            'meta',
+            // Preserve embedded email CSS.
+            'style',
+            // Preserve table column sizing when using <colgroup>/<col>.
+            'colgroup',
+            'col',
+            'center', // Deprecated but widely used in email
+            'font', // Deprecated but widely used in email
+        ] });
+    return schema;
+}
+/**
+ * Validates and normalizes potentially dangerous URL attributes.
+ *
+ * Currently only handles `<img src>` and allows safe embedded `data:image/*`.
+ *
+ * @param node - The HTML element node to sanitize.
+ */
+function sanitizeDangerousUrls(node) {
+    var _a;
+    if (!(node === null || node === void 0 ? void 0 : node.tagName) || node.tagName !== 'img') {
+        return;
+    }
+    const src = (_a = node.properties) === null || _a === void 0 ? void 0 : _a.src;
+    if (typeof src !== 'string') {
+        return;
+    }
+    const safeSrc = getSafeEmailImageSrc(src);
+    if (safeSrc) {
+        node.properties.src = safeSrc;
+        delete node.properties.dataRemoteSrc;
+        return;
+    }
+    const remoteSrc = getRemoteEmailImageSrc(src);
+    if (remoteSrc) {
+        // Avoid loading remote images by default. Store the URL so the viewer can
+        // opt-in and restore it later.
+        node.properties.dataRemoteSrc = remoteSrc;
+        delete node.properties.src;
+        return;
+    }
+    // Keep the <img> but strip the source.
+    delete node.properties.src;
+}
+/**
+ * Returns a safe image `src` for email rendering.
+ *
+ * Only permits embedded `data:` URLs with an allow-listed image MIME type.
+ *
+ * @param src - The raw `src` attribute value.
+ * @returns A safe `src` to keep, or `undefined` to strip it.
+ */
+function getSafeEmailImageSrc(src) {
+    const trimmedSrc = src.trim();
+    if (!trimmedSrc) {
+        return;
+    }
+    // Only allow embedded images. Loading remote images has privacy implications
+    // (tracking pixels) and may leak network details.
+    if (!trimmedSrc.toLowerCase().startsWith('data:')) {
+        return;
+    }
+    const mimeType = getDataUrlMimeType(trimmedSrc);
+    if (!mimeType) {
+        return;
+    }
+    if (!allowedMimeTypes.has(mimeType)) {
+        return;
+    }
+    return trimmedSrc;
+}
+/**
+ * Returns a safe remote image URL to keep for later opt-in loading.
+ *
+ * @param src - The raw `src` attribute value.
+ * @returns The remote URL if it is http/https.
+ */
+function getRemoteEmailImageSrc(src) {
+    const trimmedSrc = src.trim();
+    const lower = trimmedSrc.toLowerCase();
+    if (lower.startsWith('http://') || lower.startsWith('https://')) {
+        return trimmedSrc;
+    }
+}
+/**
+ * Extracts the MIME type from a `data:` URL.
+ *
+ * @param dataUrl - A `data:` URL string.
+ * @returns The MIME type if present.
+ */
+function getDataUrlMimeType(dataUrl) {
+    var _a;
+    // data:[<mime type>][;charset=<charset>][;base64],<data>
+    const match = /^data:([^;,]+)(?:;charset=[^;,]+)?(?:;base64)?,/i.exec(dataUrl);
+    const mimeType = (_a = match === null || match === void 0 ? void 0 : match[1]) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    return mimeType || undefined;
+}
+/**
+ * Removes dangerous constructs from inline CSS (style attributes and `<style>` tags).
+ *
+ * @param node - The HTML element node to sanitize.
+ */
+function sanitizeDangerousCss(node) {
+    var _a;
+    if (!(node === null || node === void 0 ? void 0 : node.tagName)) {
+        return;
+    }
+    if (((_a = node.properties) === null || _a === void 0 ? void 0 : _a.style) && typeof node.properties.style === 'string') {
+        node.properties.style = stripDangerousCss(node.properties.style);
+    }
+    if (node.tagName === 'style' && Array.isArray(node.children)) {
+        for (const child of node.children) {
+            if ((child === null || child === void 0 ? void 0 : child.type) === 'text' && typeof child.value === 'string') {
+                child.value = stripDangerousCss(child.value);
+            }
+        }
+    }
+}
+/**
+ * Removes common script-capable CSS constructs.
+ *
+ * @param css - A CSS string from a style attribute or `<style>` tag.
+ * @returns The CSS with dangerous constructs removed.
+ */
+function stripDangerousCss(css) {
+    // Minimal defensive filtering. We preserve styling for fidelity, but drop
+    // well-known script-capable constructs (mostly relevant in legacy engines).
+    const dangerousPatterns = [
+        /behavior\s*:/gi,
+        /expression\s*\(/gi,
+        /-moz-binding\s*:/gi,
+        /vbscript\s*:/gi,
+        /javascript\s*:/gi,
+    ];
+    const importPattern = /@import\s+(?:url\([^)]{0,2000}\)|[^;]{0,2000});?/gi;
+    const urlPattern = /url\(\s{0,50}(?:"([^"]{0,2000})"|'([^']{0,2000})'|([^"')\s]{1,2000}))\s{0,50}\)/gi;
+    const isSafeCssUrl = (value) => {
+        const normalized = value.trim().toLowerCase();
+        if (normalized.startsWith('data:') ||
+            normalized.startsWith('cid:') ||
+            normalized.startsWith('#')) {
+            return true;
+        }
+        return (!normalized.startsWith('//') &&
+            !/^[a-z][a-z0-9+.-]*:/i.test(normalized));
+    };
+    let cleaned = css;
+    for (const pattern of dangerousPatterns) {
+        cleaned = cleaned.replaceAll(pattern, '');
+    }
+    cleaned = cleaned.replaceAll(importPattern, '');
+    cleaned = cleaned.replaceAll(urlPattern, (match, first, second, third) => {
+        var _a, _b;
+        const value = ((_b = (_a = first !== null && first !== void 0 ? first : second) !== null && _a !== void 0 ? _a : third) !== null && _b !== void 0 ? _b : '').trim();
+        return isSafeCssUrl(value) ? match : 'url("")';
+    });
+    return cleaned;
+}