@schukai/monster 4.32.0 → 4.32.2

package/source/components/content/viewer/message.mjs

@@ -14,10 +14,10 @@
 
 import { instanceSymbol } from "../../../constants.mjs";
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	registerCustomElement,
-	updaterTransformerMethodsSymbol,
+  assembleMethodSymbol,
+  CustomElement,
+  registerCustomElement,
+  updaterTransformerMethodsSymbol,
 } from "../../../dom/customelement.mjs";
 
 import { sanitizeHtml } from "../../../dom/sanitize-html.mjs";
@@ -37,6 +37,12 @@ export { MessageContent };
  */
 const containerElementSymbol = Symbol("containerElement");
 
+/**
+ * @privacy
+ * @type {symbol}
+ **/
+const showPrivacyImagesSymbol = Symbol("showPrivvacyImages");
+
 /**
  * @private
  * @type {symbol}
@@ -57,375 +63,428 @@ const embeddedImageUrlsSymbol = Symbol("embeddedImageUrls");
  * @summary An HTML content component that can display sanitized HTML.
  */
 class MessageContent extends CustomElement {
-	constructor() {
-		super();
-		this[embeddedImageUrlsSymbol] = [];
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for(
-			"@schukai/monster/components/content/viewer/message-content@@instance",
-		);
-	}
-
-	/**
-	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
-	 *
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {string} content The HTML string to be displayed.
-	 * @property {Object} features Features to enable or disable specific functionalities.
-	 * @property {boolean} features.sanitize Whether to sanitize the HTML content (removes scripts, etc.). Defaults to true.
-	 * @property {object} sanitize Sanitization options.
-	 * @property {function} sanitize.callback A callback function to sanitize the HTML content. Defaults to a built-in sanitizer. You can use libraries like DOMPurify for this purpose.
-	 * @property {Object} message The message object containing email details.
-	 * @property {Object} message.from The sender's information.
-	 * @property {string|null} message.from.name The sender's name.
-	 * @property {string|null} message.from.address The sender's email address.
-	 * @property {Object} message.to The recipient's information.
-	 * @property {string|null} message.to.name The recipient's name.
-	 * @property {string|null} message.to.address The recipient's email address.
-	 * @property {Array} message.cc An array of CC recipients.
-	 * @property {string|null} message.subject The subject of the email.
-	 * @property {string|null} message.date The date of the email, formatted as a string.
-	 * @property {string|null} message.messageID The unique identifier of the email message.
-	 * @property {Array} message.parts An array of parts of the email, which can include text, HTML, attachments, etc.
-	 * @property {Array} message.attachments An array of attachments processed from the email parts.
-	 * @property {Object} message.headers Additional headers of the email.
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			templateFormatter: {
-				marker: {
-					open: null,
-					close: null,
-				},
-				i18n: true,
-			},
-
-			content: "", // Default content is an empty slot
-
-			features: {
-				sanitize: true, // Enable sanitization by default
-			},
-
-			sanitize: {
-				callback: sanitizeHtml.bind(this),
-			},
-
-			labels: getTranslations(),
-
-			message: {
-				from: {
-					name: null,
-					address: null,
-				},
-				to: {
-					name: null,
-					address: null,
-				},
-				cc: [],
-				subject: null,
-				date: null,
-				messageID: null,
-				parts: [],
-				attachments: [], // Added for processed attachments
-				headers: [],
-			},
-		});
-	}
-
-	/**
-	 * Returns the updater transformer methods for this component.
-	 * @returns {{sanitizeHtml: ((function(*): (*))|*)}}
-	 */
-	[updaterTransformerMethodsSymbol]() {
-		return {
-			sanitizeHtml: (value) => {
-				if (this.getOption("features.sanitize")) {
-					return this.getOption("sanitize.callback")(value);
-				}
-				return value;
-			},
-		};
-	}
-
-	/**
-	 * Sets the content of the MessageContent component.
-	 * @param {Object} message The message object containing parts, headers, etc.
-	 * @returns {MessageContent}
-	 */
-	setMessage(message) {
-		if (!isObject(message)) {
-			throw new Error("message must be an object");
-		}
-
-		this[embeddedImageUrlsSymbol].forEach((url) => URL.revokeObjectURL(url));
-		this[embeddedImageUrlsSymbol] = [];
-
-		this.setOption("message.from.name", message?.from?.name || null);
-		this.setOption("message.from.address", message?.from?.address || null);
-		this.setOption("message.to.name", message?.to?.name || null);
-		this.setOption("message.to.address", message?.to?.address || null);
-
-		const dateTime = message?.date ? new Date(message.date) : null;
-		const localeDateTime = dateTime?.toLocaleString(navigator.language, {
-			year: "numeric",
-			month: "long",
-			day: "numeric",
-			hour: "2-digit",
-			minute: "2-digit",
-		});
-
-		this.setOption("message.date", localeDateTime || null);
-		this.setOption("message.cc", message?.cc || []);
-		this.setOption("message.subject", message?.subject || null);
-		this.setOption("message.messageID", message?.messageID || null);
-
-		function escapeHTML(str) {
-			return str
-				.replace(/&/g, "&")
-				.replace(/</g, "&lt;")
-				.replace(/>/g, "&gt;")
-				.replace(/"/g, "&quot;")
-				.replace(/'/g, "&#39;");
-		}
-
-		const headers = [];
-		for (const [key, value] of Object.entries(message?.headers || {})) {
-			if (key && value) {
-				let valueString = value;
-				if (isArray(valueString)) {
-					valueString = "<ul>";
-					for (const item of value) {
-						const escapedItem = escapeHTML(item);
-						valueString += `<li>${escapedItem}</li>`;
-					}
-					valueString += "</ul>";
-				}
-
-				headers.push({
-					key: key,
-					value: valueString,
-				});
-			}
-		}
-
-		this.setOption("message.headers", headers || []);
-
-		let htmlContent = "";
-		let plainTextContent = "";
-		const attachments = [];
-		const embeddedImages = {};
-
-		const processParts = (parts) => {
-			if (!parts || !Array.isArray(parts)) {
-				return;
-			}
-
-			for (const part of parts) {
-				try {
-					if (part.parts && part.parts.length > 0) {
-						processParts(part.parts);
-					} else if (
-						part.dispositionType === "attachment" &&
-						part.contentType
-					) {
-						part["index"] = attachments.length; // Füge Index hinzu, um die Reihenfolge zu verfolgen
-						part["fileSize"] = part.content ? part.content.length : 0; // Dateigröße in Bytes
-						part["humanReadableSize"] = part.content
-							? `${(part.content.length / 1024).toFixed(2)} KB`
-							: "0 KB"; // Menschlich lesbare Größe
-
-						attachments.push(part);
-					} else if (
-						part.contentType &&
-						part.contentType.startsWith("text/html")
-					) {
-						htmlContent = part.content;
-					} else if (
-						part.contentType &&
-						part.contentType.startsWith("text/plain")
-					) {
-						if (!htmlContent) {
-							plainTextContent = part.content;
-						}
-					} else if (
-						part.dispositionType === "inline" &&
-						part.contentType &&
-						part.contentType.startsWith("image/")
-					) {
-						const cid =
-							part?.["contentId"] ||
-							(part.filename
-								? part.filename.split(".").slice(0, -1).join(".")
-								: null);
-
-						if (cid) {
-							embeddedImages[cid] = part;
-						} else {
-							console.warn(
-								"Inline image part found without Content-ID or filename:",
-								part,
-							);
-						}
-					}
-				} catch (e) {
-					console.error("Error processing part:", part, e);
-				}
-			}
-		};
-
-		if (message?.parts) {
-			processParts(message.parts);
-		}
-
-		if (!htmlContent && plainTextContent) {
-			htmlContent = plainTextContent.replace(/\n/g, "<br>");
-		}
-
-		for (const cid in embeddedImages) {
-			const imagePart = embeddedImages[cid];
-			if (imagePart.content && imagePart.contentType) {
-				try {
-					const base64ImageContent = imagePart.content.replace(/\s/g, "");
-					const imageContentType = imagePart.contentType;
-					let cleanCid = imagePart.contentId;
-
-					if (cleanCid) {
-						cleanCid = cleanCid.trim();
-						cleanCid = cleanCid.replace(/[\u0000-\u001F\u007F-\u009F]/g, ""); // Steuerzeichen entfernen
-					} else {
-						cleanCid = imagePart.filename
-							? imagePart.filename.split(".").slice(0, -1).join(".")
-							: null;
-						if (!cleanCid) {
-							console.warn(
-								"Content-ID or filename not found for an image part. Cannot replace CID in HTML.",
-							);
-							continue; // Überspringe dieses Bild, wenn CID fehlt
-						}
-					}
-
-					const decodedContent = atob(base64ImageContent);
-					const uint8Array = new Uint8Array(decodedContent.length);
-					for (let i = 0; i < decodedContent.length; i++) {
-						uint8Array[i] = decodedContent.charCodeAt(i);
-					}
-
-					const blob = new Blob([uint8Array], { type: imageContentType });
-					const objectUrl = URL.createObjectURL(blob);
-					this[embeddedImageUrlsSymbol].push(objectUrl); // Speichern zur späteren Widerrufung
-
-					const imgRegex =
-						/(<img\b(?:(?!src\s*=)[^>])*?)(?:\s+src\s*=\s*(["'])(?:\s*cid:[^'"]*|\s*)\2)?([^>]*>)/gi;
-					htmlContent = htmlContent.replace(
-						imgRegex,
-						`$1 src="${objectUrl}"$3`,
-					);
-				} catch (e) {
-					console.error(
-						`Error processing embedded image with CID '${cid}':`,
-						e,
-					);
-					htmlContent = htmlContent.replace(
-						new RegExp(`cid:${cid}`, "g"),
-						"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAA C0lEQVR42mP8Xw8AAo8GgAAAAgA+cQIPQAAAABJRU5ErkJggg==",
-					);
-				}
-			}
-		}
-
-		this[contentContainerElementSymbol].setOption("content", htmlContent);
-		this.setOption("message.attachments", attachments);
-
-		this.setOption("message.parts", message?.parts || []);
-
-		return this;
-	}
-
-	/**
-	 * Handles the click event for an attachment download button.
-	 * @param {Event} event
-	 * @param {Object} part The attachment part data.
-	 */
-	onDownloadAttachmentClick(event, part) {
-		event.preventDefault();
-
-		if (part.content && part.filename && part.contentType) {
-			try {
-				// Assuming part.content is base64 encoded. Adjust if your content is raw binary.
-				const decodedContent = atob(part.content);
-				const uint8Array = new Uint8Array(decodedContent.length);
-				for (let i = 0; i < decodedContent.length; i++) {
-					uint8Array[i] = decodedContent.charCodeAt(i);
-				}
-				const blob = new Blob([uint8Array], { type: part.contentType });
-
-				const url = URL.createObjectURL(blob);
-				const a = document.createElement("a");
-				a.href = url;
-				a.download = part.filename;
-				document.body.appendChild(a);
-				a.click();
-				document.body.removeChild(a);
-				URL.revokeObjectURL(url);
-			} catch (e) {
-				console.error("Error downloading attachment:", e);
-				alert(
-					"Could not download file. Content might not be base64 or is corrupted.",
-				);
-			}
-		} else {
-			alert("Attachment content not available for download.");
-		}
-	}
-
-	/**
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-message-content";
-	}
-
-	/**
-	 * @return {MessageContent}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-	}
-
-	/**
-	 * @return {Array}
-	 */
-	static getCSSStyleSheet() {
-		return [MessageStyleSheet];
-	}
-
-	/**
-	 * Cleans up any resources when the element is removed from the DOM.
-	 * Note: This method relies on the CustomElement base class calling it.
-	 * If CustomElement does not have a disconnectedCallback equivalent,
-	 * manual cleanup or a different strategy will be needed.
-	 */
-	disconnectedCallback() {
-		super.disconnectedCallback?.(); // Call super's disconnectedCallback if it exists
-		this[embeddedImageUrlsSymbol].forEach((url) => URL.revokeObjectURL(url));
-		this[embeddedImageUrlsSymbol] = [];
-	}
+  constructor() {
+    super();
+    this[embeddedImageUrlsSymbol] = [];
+  }
+
+  /**
+   * This method is called by the `instanceof` operator.
+   * @return {symbol}
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for(
+      "@schukai/monster/components/content/viewer/message-content@@instance",
+    );
+  }
+
+  /**
+   * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+   * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+   *
+   * The individual configuration values can be found in the table.
+   *
+   * @property {Object} templates Template definitions
+   * @property {string} templates.main Main template
+   * @property {string} content The HTML string to be displayed.
+   * @property {Object} features Features to enable or disable specific functionalities.
+   * @property {boolean} features.sanitize Whether to sanitize the HTML content (removes scripts, etc.). Defaults to true.
+   * @property {object} sanitize Sanitization options.
+   * @property {function} sanitize.callback A callback function to sanitize the HTML content. Defaults to a built-in sanitizer. You can use libraries like DOMPurify for this purpose.
+   * @property {Object} message The message object containing email details.
+   * @property {Object} message.from The sender's information.
+   * @property {string|null} message.from.name The sender's name.
+   * @property {string|null} message.from.address The sender's email address.
+   * @property {Object} message.to The recipient's information.
+   * @property {string|null} message.to.name The recipient's name.
+   * @property {string|null} message.to.address The recipient's email address.
+   * @property {Array} message.cc An array of CC recipients.
+   * @property {string|null} message.subject The subject of the email.
+   * @property {string|null} message.date The date of the email, formatted as a string.
+   * @property {string|null} message.messageID The unique identifier of the email message.
+   * @property {Array} message.parts An array of parts of the email, which can include text, HTML, attachments, etc.
+   * @property {Array} message.attachments An array of attachments processed from the email parts.
+   * @property {Object} message.headers Additional headers of the email.
+   */
+  get defaults() {
+    return Object.assign({}, super.defaults, {
+      templates: {
+        main: getTemplate(),
+      },
+
+      templateFormatter: {
+        marker: {
+          open: null,
+          close: null,
+        },
+        i18n: true,
+      },
+
+      privacy: {
+        visible: true,
+      },
+
+      content: "",
+
+      features: {
+        sanitize: true,
+      },
+
+      sanitize: {
+        callback: sanitizeHtml.bind(this),
+      },
+
+      labels: getTranslations(),
+
+      message: {
+        from: {
+          name: null,
+          address: null,
+        },
+        to: {
+          name: null,
+          address: null,
+        },
+        cc: [],
+        subject: null,
+        date: null,
+        messageID: null,
+        parts: [],
+        attachments: [], // Added for processed attachments
+        headers: [],
+      },
+    });
+  }
+
+  /**
+   * Returns the updater transformer methods for this component.
+   * @returns {{sanitizeHtml: ((function(*): (*))|*)}}
+   */
+  [updaterTransformerMethodsSymbol]() {
+    return {
+      sanitizeHtml: (value) => {
+        if (this.getOption("features.sanitize")) {
+          return this.getOption("sanitize.callback")(value);
+        }
+        return value;
+      },
+    };
+  }
+
+  /**
+   * Sets the content of the MessageContent component.
+   * @param {Object} message The message object containing parts, headers, etc.
+   * @returns {MessageContent}
+   */
+  setMessage(message) {
+    const self = this;
+    if (!isObject(message)) {
+      throw new Error("message must be an object");
+    }
+
+    this[embeddedImageUrlsSymbol].forEach((url) => URL.revokeObjectURL(url));
+    this[embeddedImageUrlsSymbol] = [];
+
+    this.setOption("message.from.name", message?.from?.name || null);
+    this.setOption("message.from.address", message?.from?.address || null);
+    this.setOption("message.to.name", message?.to?.name || null);
+    this.setOption("message.to.address", message?.to?.address || null);
+
+    const dateTime = message?.date ? new Date(message.date) : null;
+    const localeDateTime = dateTime?.toLocaleString(navigator.language, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+
+    this.setOption("message.date", localeDateTime || null);
+    this.setOption("message.cc", message?.cc || []);
+    this.setOption("message.subject", message?.subject || null);
+    this.setOption("message.messageID", message?.messageID || null);
+
+    function escapeHTML(str) {
+      return str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+    }
+
+    const headers = [];
+    let mainMimeType = null;
+    for (const [key, value] of Object.entries(message?.headers || {})) {
+      if (key && value) {
+        let valueString = value;
+        if (isArray(valueString)) {
+          valueString = "<ul>";
+          for (const item of value) {
+            const escapedItem = escapeHTML(item);
+            valueString += `<li>${escapedItem}</li>`;
+          }
+          valueString += "</ul>";
+        }
+        if (key.toLowerCase() === "content-type") {
+          mainMimeType = valueString.split(";")[0].trim();
+        }
+
+        headers.push({
+          key: key,
+          value: valueString,
+        });
+      }
+    }
+
+    this.setOption("message.headers", headers || []);
+
+    let htmlContent = "";
+    let plainTextContent = "";
+    const attachments = [];
+    const embeddedImages = {};
+
+    let maxDepth = 10; // Max recursion depth to prevent infinite loops
+    const processParts = (parts, depth = 0) => {
+      if (depth > maxDepth) {
+        console.warn(
+          `Max recursion depth exceeded for parts: ${JSON.stringify(parts)}`,
+        );
+        return;
+      }
+
+      if (!parts || !Array.isArray(parts)) {
+        return;
+      }
+
+      for (const part of parts) {
+        try {
+          if (part.parts && part.parts.length > 0) {
+            processParts(part.parts, depth + 1);
+          } else if (
+            part.dispositionType === "attachment" &&
+            part.contentType
+          ) {
+            part["index"] = attachments.length; // Füge Index hinzu, um die Reihenfolge zu verfolgen
+            part["fileSize"] = part.content ? part.content.length : 0; // Dateigröße in Bytes
+            part["humanReadableSize"] = part.content
+              ? `${(part.content.length / 1024).toFixed(2)} KB`
+              : "0 KB"; // Menschlich lesbare Größe
+
+            attachments.push(part);
+          } else if (
+            part.contentType &&
+            part.contentType.toLowerCase().startsWith("text/html")
+          ) {
+            htmlContent = part.content;
+          } else if (
+            part.contentType &&
+            part.contentType.toLowerCase().startsWith("text/plain")
+          ) {
+            if (!htmlContent) {
+              plainTextContent = part.content;
+            }
+          } else if (
+            //            part.dispositionType === "inline" &&
+            part.contentType &&
+            part.contentType.toLowerCase().startsWith("image/")
+          ) {
+            const cid =
+              part?.["contentId"] ||
+              (part.filename
+                ? part.filename.split(".").slice(0, -1).join(".")
+                : null);
+
+            if (cid) {
+              embeddedImages[cid] = part;
+            } else {
+              console.warn(
+                "Inline image part found without Content-ID or filename:",
+                part,
+              );
+            }
+          }
+        } catch (e) {
+          console.error("Error processing part:", part, e);
+        }
+      }
+    };
+
+    if (message?.parts) {
+      processParts(message.parts);
+    }
+
+    if (!htmlContent && plainTextContent) {
+      htmlContent = plainTextContent.replace(/\n/g, "<br>");
+    }
+    for (const cid in embeddedImages) {
+      const imagePart = embeddedImages[cid];
+      if (imagePart.content && imagePart.contentType) {
+        try {
+          const base64ImageContent = imagePart.content.replace(/\s/g, "");
+          const imageContentType = imagePart.contentType;
+          let cleanCid = imagePart.contentId;
+
+          if (cleanCid) {
+            cleanCid = cleanCid.trim();
+            cleanCid = cleanCid.replace(/[\u0000-\u001F\u007F-\u009F]/g, ""); // Steuerzeichen entfernen
+          } else {
+            cleanCid = imagePart.filename
+              ? imagePart.filename.split(".").slice(0, -1).join(".")
+              : null;
+            if (!cleanCid) {
+              console.warn(
+                "Content-ID or filename not found for an image part. Cannot replace CID in HTML.",
+              );
+              continue; // Überspringe dieses Bild, wenn CID fehlt
+            }
+          }
+
+          const decodedContent = atob(base64ImageContent);
+          const uint8Array = new Uint8Array(decodedContent.length);
+          for (let i = 0; i < decodedContent.length; i++) {
+            uint8Array[i] = decodedContent.charCodeAt(i);
+          }
+
+          const blob = new Blob([uint8Array], { type: imageContentType });
+          const objectUrl = URL.createObjectURL(blob);
+          this[embeddedImageUrlsSymbol].push(objectUrl); // Speichern zur späteren Widerrufung
+
+          embeddedImages[cid].objectUrl = objectUrl;
+        } catch (e) {
+          console.error(
+            `Error processing embedded image with CID '${cid}':`,
+            e,
+          );
+        }
+      }
+    }
+
+    htmlContent = replaceCidImages.call(this, htmlContent, embeddedImages);
+
+    this[contentContainerElementSymbol].setOption("content", htmlContent);
+    this.setOption("message.attachments", attachments);
+
+    this.setOption("message.parts", message?.parts || []);
+
+    return this;
+  }
+
+  /**
+   * Handles the click event for an attachment download button.
+   * @param {Event} event
+   * @param {Object} part The attachment part data.
+   */
+  onDownloadAttachmentClick(event, part) {
+    event.preventDefault();
+
+    if (part.content && part.filename && part.contentType) {
+      try {
+        // Assuming part.content is base64 encoded. Adjust if your content is raw binary.
+        const decodedContent = atob(part.content);
+        const uint8Array = new Uint8Array(decodedContent.length);
+        for (let i = 0; i < decodedContent.length; i++) {
+          uint8Array[i] = decodedContent.charCodeAt(i);
+        }
+        const blob = new Blob([uint8Array], { type: part.contentType });
+
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = part.filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      } catch (e) {
+        console.error("Error downloading attachment:", e);
+        alert(
+          "Could not download file. Content might not be base64 or is corrupted.",
+        );
+      }
+    } else {
+      alert("Attachment content not available for download.");
+    }
+  }
+
+  /**
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-message-content";
+  }
+
+  /**
+   * @return {MessageContent}
+   */
+  [assembleMethodSymbol]() {
+    super[assembleMethodSymbol]();
+    initControlReferences.call(this);
+    initEventHandler.call(this);
+  }
+
+  /**
+   * @return {Array}
+   */
+  static getCSSStyleSheet() {
+    return [MessageStyleSheet];
+  }
+
+  /**
+   * Cleans up any resources when the element is removed from the DOM.
+   * Note: This method relies on the CustomElement base class calling it.
+   * If CustomElement does not have a disconnectedCallback equivalent,
+   * manual cleanup or a different strategy will be needed.
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback?.(); // Call super's disconnectedCallback if it exists
+    this[embeddedImageUrlsSymbol].forEach((url) => URL.revokeObjectURL(url));
+    this[embeddedImageUrlsSymbol] = [];
+  }
+}
+
+/**
+ * Replaces 'cid:' images in the HTML content with actual URLs.
+ * @private
+ */
+function replaceCidImages(htmlContent, replacements) {
+  const objectURLEmptyGif =
+    "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(htmlContent, "text/html");
+  const images = doc.querySelectorAll("img");
+  images.forEach((img) => {
+    const src = img.getAttribute("src");
+    if (src && src.toLowerCase().startsWith("cid:")) {
+      const cid = src.toLowerCase().substring(4);
+      if (replacements[cid]) {
+        img.setAttribute("src", replacements[cid].objectUrl);
+      }
+      return;
+    } else if (src && src.toLowerCase().startsWith("http")) {
+      const urlImage = new URL(src, document.location.href);
+      if (urlImage.origin !== document.location.origin) {
+        img.setAttribute("src", objectURLEmptyGif);
+        img.classList.add("privacyImage");
+        img.setAttribute("data-monster-privacy", "true");
+        img.setAttribute("data-monster-privacy_origin-url", src);
+
+        // If the src is an HTTP URL, we can keep it as is
+        img.setAttribute(
+          "title",
+          this.getOption("labels.privacyImageTitle") ||
+            "This image is from an external source and may not be safe to display.",
+        );
+      }
+      //
+      return;
+    }
+  });
+
+  // Serialize the modified document back to HTML
+  const serializer = new XMLSerializer();
+  return serializer.serializeToString(doc);
 }
 
 /**
@@ -433,136 +492,224 @@ class MessageContent extends CustomElement {
  * @return {MessageContent}
  */
 function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
+  if (!this.shadowRoot) {
+    throw new Error("no shadow-root is defined");
+  }
+
+  this[showPrivacyImagesSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=show-privacy-images]",
+  );
 
-	this[containerElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=container]",
-	);
+  this[containerElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=container]",
+  );
 
-	this[contentContainerElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=content-container]",
-	);
+  this[contentContainerElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=content-container]",
+  );
 
-	return this;
+  return this;
 }
 
 function getTranslations() {
-	const locale = getLocaleOfDocument();
-	switch (locale.language) {
-		case "de":
-			return {
-				content: "Inhalt",
-				headers: "Kopfzeilen",
-			};
-		case "es":
-			return {
-				content: "Contenido",
-				headers: "Encabezados",
-			};
-		case "zh":
-			return {
-				content: "内容",
-				headers: "标题",
-			};
-
-		case "hi":
-			return {
-				content: "सामग्री",
-				headers: "शीर्षक",
-			};
-
-		case "bn":
-			return {
-				content: "বিষয়বস্তু",
-				headers: "শিরোনাম",
-			};
-
-		case "pt": // Portuguese
-			return {
-				content: "Conteúdo",
-				headers: "Cabeçalhos",
-			};
-
-		case "ru": // Russian
-			return {
-				content: "Содержание",
-				headers: "Заголовки",
-			};
-
-		case "ja": // Japanese
-			return {
-				content: "コンテンツ",
-				headers: "ヘッダー",
-			};
-
-		case "pa": // Western Punjabi
-			return {
-				content: "ਸਮੱਗਰੀ",
-				headers: "ਸਿਰਲੇਖ",
-			};
-
-		case "mr": // Marathi
-			return {
-				content: "सामग्री",
-				headers: "शीर्षके",
-			};
-
-		case "fr": // French
-			return {
-				content: "Contenu",
-				headers: "En-têtes",
-			};
-
-		case "it": // Italian
-			return {
-				content: "Contenuto",
-				headers: "Intestazioni",
-			};
-
-		case "nl": // Dutch
-			return {
-				content: "Inhoud",
-				headers: "Headers",
-			};
-
-		case "sv": // Swedish
-			return {
-				content: "Innehåll",
-				headers: "Rubriker",
-			};
-
-		case "pl": // Polish
-			return {
-				content: "Zawartość",
-				headers: "Nagłówki",
-			};
-
-		case "da": // Danish
-			return {
-				content: "Indhold",
-				headers: "Overskrifter",
-			};
-
-		case "no": // Norwegian
-			return {
-				content: "Innhold",
-				headers: "Overskrifter",
-			};
-
-		case "cs": // Czech
-			return {
-				content: "Obsah",
-				headers: "Hlavičky",
-			};
-
-		default:
-			return {
-				content: "Content",
-				headers: "Headers",
-			};
-	}
+  const locale = getLocaleOfDocument();
+  switch (locale.language) {
+    case "de": // German
+      return {
+        content: "Inhalt",
+        headers: "Kopfzeilen",
+        privacyText:
+          "Diese Nachricht kann externe Inhalte enthalten, die nicht sicher angezeigt werden können.",
+        showImages: "Bilder anzeigen",
+        privacyImageTitle:
+          "Dieses Bild stammt von einer externen Quelle und kann unsicher sein.",
+      };
+
+    case "es": // Spanish
+      return {
+        content: "Contenido",
+        headers: "Encabezados",
+        privacyText:
+          "Este mensaje puede contener contenido externo que no es seguro mostrar.",
+        showImages: "Mostrar imágenes",
+        privacyImageTitle:
+          "Esta imagen proviene de una fuente externa y puede no ser segura para mostrar.",
+      };
+
+    case "hi": // Hindi
+      return {
+        content: "सामग्री",
+        headers: "शीर्षक",
+        privacyText:
+          "इस संदेश में बाहरी सामग्री हो सकती है जिसे सुरक्षित रूप से प्रदर्शित नहीं किया जा सकता।",
+        showImages: "छवियाँ दिखाएँ",
+        privacyImageTitle:
+          "यह छवि एक बाहरी स्रोत से है और इसे प्रदर्शित करना सुरक्षित नहीं हो सकता।",
+      };
+
+    case "bn": // Bengali
+      return {
+        content: "বিষয়বস্তু",
+        headers: "শিরোনাম",
+        privacyText:
+          "এই বার্তাটিতে এমন বাহ্যিক বিষয়বস্তু থাকতে পারে যা নিরাপদে প্রদর্শন করা যায় না।",
+        showImages: "ছবি দেখান",
+        privacyImageTitle:
+          "এই চিত্রটি একটি বাহ্যিক উৎস থেকে এসেছে এবং এটি প্রদর্শন করা নিরাপদ নাও হতে পারে।",
+      };
+
+    case "pt": // Portuguese
+      return {
+        content: "Conteúdo",
+        headers: "Cabeçalhos",
+        privacyText:
+          "Esta mensagem pode conter conteúdo externo que não pode ser exibido com segurança.",
+        showImages: "Mostrar imagens",
+      };
+
+    case "ru": // Russian
+      return {
+        content: "Содержание",
+        headers: "Заголовки",
+        privacyText:
+          "Это сообщение может содержать внешнее содержимое, которое небезопасно отображать.",
+        showImages: "Показать изображения",
+        privacyImageTitle:
+          "Это изображение из внешнего источника и может быть небезопасным для отображения.",
+      };
+
+    case "ja": // Japanese
+      return {
+        content: "コンテンツ",
+        headers: "ヘッダー",
+        privacyText:
+          "このメッセージには安全に表示できない外部コンテンツが含まれている可能性があります。",
+        showImages: "画像を表示",
+        privacyImageTitle:
+          "この画像は外部ソースからのものであり、安全に表示できない可能性があります。",
+      };
+
+    case "pa": // Western Punjabi
+      return {
+        content: "ਸਮੱਗਰੀ",
+        headers: "ਸਿਰਲੇਖ",
+        privacyText:
+          "ਇਸ ਸੁਨੇਹੇ ਵਿੱਚ ਬਾਹਰੀ ਸਮੱਗਰੀ ਹੋ ਸਕਦੀ ਹੈ ਜਿਸ ਨੂੰ ਸੁਰੱਖਿਅਤ ਤਰੀਕੇ ਨਾਲ ਨਹੀਂ ਦਿਖਾਇਆ ਜਾ ਸਕਦਾ।",
+        showImages: "ਤਸਵੀਰਾਂ ਵੇਖੋ",
+        privacyImageTitle:
+          "ਇਹ ਤਸਵੀਰ ਇੱਕ ਬਾਹਰੀ ਸਰੋਤ ਤੋਂ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਦਿਖਾਉਣਾ ਸੁਰੱਖਿਅਤ ਨਹੀਂ ਹੋ ਸਕਦਾ।",
+      };
+
+    case "mr": // Marathi
+      return {
+        content: "सामग्री",
+        headers: "शीर्षके",
+        privacyText:
+          "या संदेशात सुरक्षितपणे दाखवता न येणारी बाह्य सामग्री असू शकते.",
+        showImages: "प्रतिमा दाखवा",
+        privacyImageTitle:
+          "ही प्रतिमा बाह्य स्रोताकडून आहे आणि ती दाखवणे सुरक्षित नसू शकते.",
+      };
+
+    case "fr": // French
+      return {
+        content: "Contenu",
+        headers: "En-têtes",
+        privacyText:
+          "Ce message peut contenir du contenu externe qui ne peut pas être affiché de façon sécurisée.",
+        showImages: "Afficher les images",
+        privacyImageTitle:
+          "Cette image provient d'une source externe et peut ne pas être sécurisée à afficher.",
+      };
+
+    case "it": // Italian
+      return {
+        content: "Contenuto",
+        headers: "Intestazioni",
+        privacyText:
+          "Questo messaggio può contenere contenuti esterni che non possono essere visualizzati in modo sicuro.",
+        showImages: "Mostra immagini",
+        privacyImageTitle:
+          "Questa immagine proviene da una fonte esterna e potrebbe non essere sicura da visualizzare.",
+      };
+
+    case "nl": // Dutch
+      return {
+        content: "Inhoud",
+        headers: "Headers",
+        privacyText:
+          "Dit bericht kan externe inhoud bevatten die niet veilig kan worden weergegeven.",
+        showImages: "Afbeeldingen tonen",
+        privacyImageTitle:
+          "Deze afbeelding komt van een externe bron en is mogelijk niet veilig om weer te geven.",
+      };
+
+    case "sv": // Swedish
+      return {
+        content: "Innehåll",
+        headers: "Rubriker",
+        privacyText:
+          "Detta meddelande kan innehålla extern information som inte kan visas säkert.",
+        showImages: "Visa bilder",
+        privacyImageTitle:
+          "Denna bild kommer från en extern källa och kan vara osäker att visa.",
+      };
+
+    case "pl": // Polish
+      return {
+        content: "Zawartość",
+        headers: "Nagłówki",
+        privacyText:
+          "Ta wiadomość może zawierać zewnętrzne treści, których nie można bezpiecznie wyświetlić.",
+        showImages: "Pokaż obrazy",
+        privacyImageTitle:
+          "Ten obraz pochodzi z zewnętrznego źródła i może nie być bezpieczny do wyświetlenia.",
+      };
+
+    case "da": // Danish
+      return {
+        content: "Indhold",
+        headers: "Overskrifter",
+        privacyText:
+          "Denne besked kan indeholde eksternt indhold, der ikke kan vises sikkert.",
+        showImages: "Vis billeder",
+        privacyImageTitle:
+          "Dette billede kommer fra en ekstern kilde og kan være usikkert at vise.",
+      };
+
+    case "no": // Norwegian
+      return {
+        content: "Innhold",
+        headers: "Overskrifter",
+        privacyText:
+          "Denne meldingen kan inneholde eksternt innhold som ikke kan vises sikkert.",
+        showImages: "Vis bilder",
+        privacyImageTitle:
+          "Dette bildet kommer fra en ekstern kilde og kan være usikkert å vise.",
+      };
+
+    case "cs": // Czech
+      return {
+        content: "Obsah",
+        headers: "Hlavičky",
+        privacyText:
+          "Tato zpráva může obsahovat externí obsah, který nelze bezpečně zobrazit.",
+        showImages: "Zobrazit obrázky",
+        privacyImageTitle:
+          "Tento obrázek pochází z externího zdroje a nemusí být bezpečný k zobrazení.",
+      };
+
+    default: // English fallback
+      return {
+        content: "Content",
+        headers: "Headers",
+        privacyText:
+          "This message may contain external content that cannot be displayed securely.",
+        showImages: "Show images",
+        privacyImageTitle:
+          "This image is from an external source and may not be safe to display.",
+      };
+  }
 }
 
 /**
@@ -571,44 +718,44 @@ function getTranslations() {
  * @param attachments
  */
 function downloadAttachmentByIndex(index, attachments) {
-	const part = attachments[index];
-	if (!part) {
-		console.error(`Attachment mit Index ${index} nicht gefunden.`);
-		return;
-	}
-
-	const { filename, contentType, content } = part;
-
-	try {
-		let decodedContent;
-		if (contentType.startsWith("text/")) {
-			// Check if it's a text type
-			decodedContent = content; // Content is plain text
-		} else {
-			decodedContent = atob(content); // Assume base64 for other types
-		}
-
-		const len = decodedContent.length;
-		const bytes = new Uint8Array(len);
-		for (let i = 0; i < len; i++) {
-			bytes[i] = decodedContent.charCodeAt(i);
-		}
-
-		const blob = new Blob([bytes], { type: contentType });
-		const dataUrl = URL.createObjectURL(blob);
-
-		const a = document.createElement("a");
-		a.style.display = "none";
-		a.href = dataUrl;
-		a.download = filename;
-		document.body.appendChild(a);
-		a.click();
-		document.body.removeChild(a);
-
-		URL.revokeObjectURL(dataUrl);
-	} catch (e) {
-		console.error("Error downloading attachment:", e);
-	}
+  const part = attachments[index];
+  if (!part) {
+    console.error(`Attachment mit Index ${index} nicht gefunden.`);
+    return;
+  }
+
+  const { filename, contentType, content } = part;
+
+  try {
+    let decodedContent;
+    if (contentType.startsWith("text/")) {
+      // Check if it's a text type
+      decodedContent = content; // Content is plain text
+    } else {
+      decodedContent = atob(content); // Assume base64 for other types
+    }
+
+    const len = decodedContent.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+      bytes[i] = decodedContent.charCodeAt(i);
+    }
+
+    const blob = new Blob([bytes], { type: contentType });
+    const dataUrl = URL.createObjectURL(blob);
+
+    const a = document.createElement("a");
+    a.style.display = "none";
+    a.href = dataUrl;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+
+    URL.revokeObjectURL(dataUrl);
+  } catch (e) {
+    console.error("Error downloading attachment:", e);
+  }
 }
 
 /**
@@ -617,41 +764,81 @@ function downloadAttachmentByIndex(index, attachments) {
  * @returns {initEventHandler}
  */
 function initEventHandler() {
-	this[containerElementSymbol].addEventListener("click", (event) => {
-		const card = findTargetElementFromEvent(
-			event,
-			"data-monster-role",
-			"attachment",
-		);
-		if (card) {
-			const index = card.getAttribute("data-monster-index");
-			const attachments = this.getOption("message.attachments");
-			if (
-				index !== null &&
-				index !== undefined &&
-				attachments &&
-				Array.isArray(attachments)
-			) {
-				const parsedIndex = parseInt(index, 10);
-				if (
-					!isNaN(parsedIndex) &&
-					parsedIndex >= 0 &&
-					parsedIndex < attachments.length
-				) {
-					downloadAttachmentByIndex(parsedIndex, attachments);
-				} else {
-					this.dispatchEvent(
-						new CustomEvent("error", {
-							detail: {
-								message: `Invalid attachment index: ${index}. Must be a number between 0 and ${attachments.length - 1}.`,
-							},
-						}),
-					);
-				}
-			}
-		}
-	});
-	return this;
+  this[showPrivacyImagesSymbol].addEventListener("click", (event) => {
+    event.preventDefault();
+
+    const currentContent =
+      this[contentContainerElementSymbol].getOption("content");
+    if (!currentContent) {
+      console.warn("No content available to show privacy images.");
+      return;
+    }
+
+    const domParser = new DOMParser();
+    const doc = domParser.parseFromString(currentContent, "text/html");
+
+    doc.querySelectorAll("img[data-monster-privacy=true]").forEach((img) => {
+      const originalUrl = img.getAttribute("data-monster-privacy_origin-url");
+      if (originalUrl) {
+        img.setAttribute("src", originalUrl);
+        img.removeAttribute("data-monster-privacy");
+        img.removeAttribute("data-monster-privacy_origin-url");
+        img.removeAttribute("title");
+
+        img.classList.remove("privacyImage");
+        img.setAttribute(
+          "onerror",
+          "this.classList.add('notFoundImage'); this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';",
+        );
+
+        this.setOption("privacy.visible", false); // Hide the privacy text
+      }
+    });
+
+    this[contentContainerElementSymbol].setOption("features.sanitize", false);
+    setTimeout(() => {
+      this[contentContainerElementSymbol].setOption(
+        "content",
+        doc.documentElement.outerHTML,
+      );
+    }, 0);
+  });
+
+  this[containerElementSymbol].addEventListener("click", (event) => {
+    const card = findTargetElementFromEvent(
+      event,
+      "data-monster-role",
+      "attachment",
+    );
+    if (card) {
+      const index = card.getAttribute("data-monster-index");
+      const attachments = this.getOption("message.attachments");
+      if (
+        index !== null &&
+        index !== undefined &&
+        attachments &&
+        Array.isArray(attachments)
+      ) {
+        const parsedIndex = parseInt(index, 10);
+        if (
+          !isNaN(parsedIndex) &&
+          parsedIndex >= 0 &&
+          parsedIndex < attachments.length
+        ) {
+          downloadAttachmentByIndex(parsedIndex, attachments);
+        } else {
+          this.dispatchEvent(
+            new CustomEvent("error", {
+              detail: {
+                message: `Invalid attachment index: ${index}. Must be a number between 0 and ${attachments.length - 1}.`,
+              },
+            }),
+          );
+        }
+      }
+    }
+  });
+  return this;
 }
 
 /**
@@ -659,9 +846,8 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
-
+  // language=HTML
+  return `
         <template id="attachments">
             <div class="attachments">
                 <div class="attachment-card"
@@ -693,6 +879,10 @@ function getTemplate() {
                             class="reduced" data-monster-replace="path:message.from.address"></span></strong></div>
                     <div class="emailDate" data-monster-replace="path:message.date | default:—"></div>
                     <div class="emailSubject" data-monster-replace="path:message.subject | default:—"></div>
+                    <div data-monster-attributes="class path:privacy.visible | ?::hidden">
+                        <p data-monster-replace="path:labels.privacyText | default: "></p>
+                        <monster-button data-monster-role="show-privacy-images" data-monster-replace="path:labels.showImages"></monster-button>
+                    </div>
                 </div>
 
                 <monster-tabs>