fix: block additional external image sources

CHANGELOG.md

@@ -10,6 +10,8 @@
 
 ### Features
 
+- feat: |Frontend| 外观设置新增“自动加载外部图片”开关，关闭后邮件 HTML 中的外链图片默认以占位图显示，并可在单封邮件中手动加载（issue #1073）
+
 ### Bug Fixes
 
 - fix: |AI 提取| HTML-only 邮件在发送给 Workers AI 前会先压缩为可读文本，避免样式模板过长导致验证码位于 4000 字截断之后而无法识别

CHANGELOG_EN.md

@@ -10,6 +10,8 @@
 
 ### Features
 
+- feat: |Frontend| Add an Appearance toggle for automatically loading external images; when disabled, HTML mail shows blocked-image placeholders by default with a per-mail manual load action (issue #1073)
+
 ### Bug Fixes
 
 - fix: |AI Extract| Convert HTML-only mail bodies into compact readable text before sending them to Workers AI, preventing long templates from pushing verification codes past the 4000-character truncation window

frontend/src/components/MailContentRenderer.vue

@@ -1,14 +1,15 @@
 <script setup>
-import { ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { useScopedI18n } from '@/i18n/app'
 import { CloudDownloadRound, ReplyFilled, ForwardFilled, FullscreenRound } from '@vicons/material'
 import ShadowHtmlComponent from "./ShadowHtmlComponent.vue";
 import AiExtractInfo from "./AiExtractInfo.vue";
 import { getDownloadEmlUrl } from '../utils/email-parser';
+import { applyExternalImagePolicy } from '../utils/mail-html';
 import { utcToLocalDate } from '../utils';
 import { useGlobalState } from '../store';
 
-const { preferShowTextMail, useIframeShowMail, useUTCDate, isDark } = useGlobalState();
+const { preferShowTextMail, useIframeShowMail, useUTCDate, isDark, autoLoadExternalImages } = useGlobalState();
 
 const { t } = useScopedI18n('components.MailContentRenderer')
 
@@ -57,6 +58,13 @@ const showAttachments = ref(false);
 const curAttachments = ref([]);
 const attachmentLoding = ref(false);
 const showFullscreen = ref(false);
+const loadExternalImagesForCurrentMail = ref(false);
+const shouldLoadExternalImages = computed(() => autoLoadExternalImages.value || loadExternalImagesForCurrentMail.value);
+const mailHtmlContent = computed(() => applyExternalImagePolicy(props.mail.message, shouldLoadExternalImages.value));
+
+watch(() => props.mail.id, () => {
+  loadExternalImagesForCurrentMail.value = false;
+});
 
 const handleDelete = () => {
   props.onDelete();
@@ -149,6 +157,11 @@ const handleSaveToS3 = async (filename, blob) => {
         </template>
         {{ t('fullscreen') }}
       </n-button>
+
+      <n-button v-if="!showTextMail && !shouldLoadExternalImages" size="small" tertiary type="info"
+        @click="loadExternalImagesForCurrentMail = true">
+        {{ t('loadExternalImages') }}
+      </n-button>
     </n-space>
 
     <!-- AI 提取信息 -->
@@ -157,9 +170,9 @@ const handleSaveToS3 = async (filename, blob) => {
     <!-- 邮件内容 -->
     <div class="mail-content" :class="{ 'dark-mode': isDark }">
       <pre v-if="showTextMail" class="mail-text">{{ mail.text }}</pre>
-      <iframe v-else-if="useIframeShowMail" :srcdoc="mail.message" class="mail-iframe">
+      <iframe v-else-if="useIframeShowMail" :srcdoc="mailHtmlContent" class="mail-iframe">
       </iframe>
-      <ShadowHtmlComponent v-else :key="mail.id" :htmlContent="mail.message" :isDark="isDark" class="mail-html" />
+      <ShadowHtmlComponent v-else :key="mail.id" :htmlContent="mailHtmlContent" :isDark="isDark" class="mail-html" />
     </div>
   </div>
 
@@ -167,10 +180,14 @@ const handleSaveToS3 = async (filename, blob) => {
     style="height: 100vh;">
     <n-drawer-content :title="mail.subject" closable>
       <div class="fullscreen-mail-content" :class="{ 'dark-mode': isDark }">
+        <n-button v-if="!showTextMail && !shouldLoadExternalImages" size="small" tertiary type="info"
+          @click="loadExternalImagesForCurrentMail = true">
+          {{ t('loadExternalImages') }}
+        </n-button>
         <pre v-if="showTextMail" class="mail-text">{{ mail.text }}</pre>
-        <iframe v-else-if="useIframeShowMail" :srcdoc="mail.message" class="mail-iframe">
+        <iframe v-else-if="useIframeShowMail" :srcdoc="mailHtmlContent" class="mail-iframe">
         </iframe>
-        <ShadowHtmlComponent v-else :key="mail.id" :htmlContent="mail.message" :isDark="isDark" class="mail-html" />
+        <ShadowHtmlComponent v-else :key="mail.id" :htmlContent="mailHtmlContent" :isDark="isDark" class="mail-html" />
       </div>
     </n-drawer-content>
   </n-drawer>

frontend/src/i18n/locales/source/de.ts

@@ -178,6 +178,7 @@ export const deMessages = {
   "views.admin.SenderAccess.disable": "Deaktivieren",
   "views.Admin.loginViaDisabledCheck": "Passwortprüfung deaktiviert",
   "views.common.Appearance.preferShowTextMail": "Text-Mail standardmäßig anzeigen",
+  "views.common.Appearance.autoLoadExternalImages": "Externe Bilder automatisch laden",
   "views.admin.AccountSettings.domain_list": "Domain-Liste (optional)",
   "views.admin.AccountSettings.source_patterns_tip": "Die Domain-Liste filtert nach Empfängeradresse, die Quell-Regex nach Absenderadresse. Für die Weiterleitung müssen beide Bedingungen erfüllt sein (UND-Logik). Leer lassen, um den jeweiligen Filter zu überspringen.",
   "views.admin.UserManagement.domains": "Domains",
@@ -237,6 +238,7 @@ export const deMessages = {
   "views.admin.AccountSettings.forward_address_required": "Eine Weiterleitungsadresse ist erforderlich",
   "views.admin.AccountSettings.forward_placeholder": "forward@example.com",
   "components.MailContentRenderer.fullscreen": "Vollbild",
+  "components.MailContentRenderer.loadExternalImages": "Externe Bilder laden",
   "views.common.Login.generateName": "Zufälligen Namen erzeugen",
   "views.admin.Telegram.globalMailPushList": "Globale Mail-Push-Chat-ID-Liste",
   "views.common.Appearance.globalTabplacement": "Globale Tab-Position",

frontend/src/i18n/locales/source/es.ts

@@ -178,6 +178,7 @@ export const esMessages = {
   "views.admin.SenderAccess.disable": "Deshabilitar",
   "views.Admin.loginViaDisabledCheck": "Comprobación de contraseña deshabilitada",
   "views.common.Appearance.preferShowTextMail": "Mostrar correo en texto por defecto",
+  "views.common.Appearance.autoLoadExternalImages": "Cargar imágenes externas automáticamente",
   "views.admin.AccountSettings.domain_list": "Lista de dominios (opcional)",
   "views.admin.AccountSettings.source_patterns_tip": "La lista de dominios filtra por destinatario y la regex de origen por remitente. Ambas condiciones deben cumplirse para reenviar (lógica AND). Deja alguna vacía para omitirla.",
   "views.admin.UserManagement.domains": "Dominios",
@@ -237,6 +238,7 @@ export const esMessages = {
   "views.admin.AccountSettings.forward_address_required": "La dirección de reenvío es obligatoria",
   "views.admin.AccountSettings.forward_placeholder": "forward@example.com",
   "components.MailContentRenderer.fullscreen": "Pantalla completa",
+  "components.MailContentRenderer.loadExternalImages": "Cargar imágenes externas",
   "views.common.Login.generateName": "Generar nombre aleatorio",
   "views.admin.Telegram.globalMailPushList": "Lista global de chat ID para envío de correos",
   "views.common.Appearance.globalTabplacement": "Posición global de pestañas",

frontend/src/i18n/locales/source/ja.ts

@@ -178,6 +178,7 @@ export const jaMessages = {
   "views.admin.SenderAccess.disable": "無効化",
   "views.Admin.loginViaDisabledCheck": "パスワードチェックを無効化",
   "views.common.Appearance.preferShowTextMail": "既定でテキストメールを表示",
+  "views.common.Appearance.autoLoadExternalImages": "外部画像を自動で読み込む",
   "views.admin.AccountSettings.domain_list": "ドメイン一覧（任意）",
   "views.admin.AccountSettings.source_patterns_tip": "ドメイン一覧は受信先アドレスで、送信元正規表現は送信者アドレスでフィルタします。転送には両方の条件を満たす必要があります（AND）。どちらかを空欄にするとその条件は無視されます。",
   "views.admin.UserManagement.domains": "ドメイン",
@@ -237,6 +238,7 @@ export const jaMessages = {
   "views.admin.AccountSettings.forward_address_required": "転送先アドレスは必須です",
   "views.admin.AccountSettings.forward_placeholder": "forward@example.com",
   "components.MailContentRenderer.fullscreen": "全画面",
+  "components.MailContentRenderer.loadExternalImages": "外部画像を読み込む",
   "views.common.Login.generateName": "ランダム名を生成",
   "views.admin.Telegram.globalMailPushList": "グローバルメール通知 Chat ID 一覧",
   "views.common.Appearance.globalTabplacement": "全体タブ位置",

frontend/src/i18n/locales/source/ptBR.ts

@@ -178,6 +178,7 @@ export const ptBRMessages = {
   "views.admin.SenderAccess.disable": "Desativar",
   "views.Admin.loginViaDisabledCheck": "Verificação de senha desativada",
   "views.common.Appearance.preferShowTextMail": "Exibir e-mail em texto por padrão",
+  "views.common.Appearance.autoLoadExternalImages": "Carregar imagens externas automaticamente",
   "views.admin.AccountSettings.domain_list": "Lista de domínios (opcional)",
   "views.admin.AccountSettings.source_patterns_tip": "A lista de domínios filtra pelo destinatário e o regex de origem filtra pelo remetente. Ambas as condições precisam corresponder para encaminhar (lógica AND). Deixe qualquer uma vazia para ignorá-la.",
   "views.admin.UserManagement.domains": "Domínios",
@@ -237,6 +238,7 @@ export const ptBRMessages = {
   "views.admin.AccountSettings.forward_address_required": "O endereço de encaminhamento é obrigatório",
   "views.admin.AccountSettings.forward_placeholder": "forward@example.com",
   "components.MailContentRenderer.fullscreen": "Tela cheia",
+  "components.MailContentRenderer.loadExternalImages": "Carregar imagens externas",
   "views.common.Login.generateName": "Gerar nome aleatório",
   "views.admin.Telegram.globalMailPushList": "Lista global de chat ID para envio de e-mails",
   "views.common.Appearance.globalTabplacement": "Posição global das abas",

frontend/src/i18n/message-registry.ts

@@ -186,6 +186,10 @@ export const MESSAGE_REGISTRY = {
       "en": "Fullscreen",
       "zh": "全屏"
     },
+    "loadExternalImages": {
+      "en": "Load External Images",
+      "zh": "加载外部图片"
+    },
     "reply": {
       "en": "Reply",
       "zh": "回复"
@@ -2114,6 +2118,10 @@ export const MESSAGE_REGISTRY = {
       "en": "Display text Mail by default",
       "zh": "默认以文本显示邮件"
     },
+    "autoLoadExternalImages": {
+      "en": "Automatically load external images",
+      "zh": "自动加载外部图片"
+    },
     "right": {
       "en": "right",
       "zh": "右侧"

frontend/src/store/index.js

@@ -90,6 +90,7 @@ export const useGlobalState = createGlobalState(
         const mailboxSplitSize = useStorage('mailboxSplitSize', 0.25);
         const useIframeShowMail = useStorage('useIframeShowMail', false);
         const preferShowTextMail = useStorage('preferShowTextMail', false);
+        const autoLoadExternalImages = useStorage('autoLoadExternalImages', true);
         const userJwt = useStorage('userJwt', '');
         const preferredLocale = useStorage('preferredLocale', '');
         const userTab = useSessionStorage('userTab', 'address_management');
@@ -162,6 +163,7 @@ export const useGlobalState = createGlobalState(
             mailboxSplitSize,
             useIframeShowMail,
             preferShowTextMail,
+            autoLoadExternalImages,
             userJwt,
             preferredLocale,
             userTab,

frontend/src/utils/mail-html.js

@@ -0,0 +1,97 @@
+const EXTERNAL_IMAGE_PLACEHOLDER = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="80" viewBox="0 0 320 80">
+  <rect width="320" height="80" rx="8" fill="#f3f4f6"/>
+  <text x="160" y="45" text-anchor="middle" font-family="sans-serif" font-size="14" fill="#6b7280">External image blocked</text>
+</svg>
+`)}`;
+
+const isExternalImageUrl = (value) => {
+    if (!value) return false;
+    const normalized = value.trim().toLowerCase();
+    return normalized.startsWith('http://')
+        || normalized.startsWith('https://')
+        || normalized.startsWith('//');
+};
+
+const srcsetHasExternalUrl = (value) => {
+    if (!value) return false;
+    return value.split(',').some((item) => isExternalImageUrl(item.trim().split(/\s+/)[0]));
+};
+
+const blockSourceSet = (element) => {
+    const srcset = element.getAttribute('srcset') || '';
+    if (!srcsetHasExternalUrl(srcset)) return;
+
+    element.setAttribute('data-blocked-srcset', srcset);
+    element.setAttribute('srcset', `${EXTERNAL_IMAGE_PLACEHOLDER} 1x`);
+};
+
+const blockStyleExternalImages = (element) => {
+    const style = element.getAttribute('style') || '';
+    if (!/url\(\s*(['"]?)(https?:|\/\/)/i.test(style)) return;
+
+    element.setAttribute('data-blocked-style', style);
+    element.removeAttribute('style');
+};
+
+const blockExternalHref = (element) => {
+    const href = element.getAttribute('href') || element.getAttribute('xlink:href') || '';
+    if (!isExternalImageUrl(href)) return;
+
+    element.setAttribute('data-blocked-href', href);
+    element.removeAttribute('href');
+    element.removeAttribute('xlink:href');
+};
+
+export const applyExternalImagePolicy = (html, autoLoadExternalImages) => {
+    if (autoLoadExternalImages || !html) {
+        return html || '';
+    }
+
+    if (typeof DOMParser !== 'function') {
+        return html;
+    }
+
+    const hasDocumentShell = /<!doctype|<html[\s>]/i.test(html);
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+
+    for (const base of doc.querySelectorAll('base')) {
+        base.remove();
+    }
+
+    for (const source of doc.querySelectorAll('source[srcset]')) {
+        blockSourceSet(source);
+    }
+
+    for (const element of doc.querySelectorAll('[style]')) {
+        blockStyleExternalImages(element);
+    }
+
+    for (const element of doc.querySelectorAll('image[href], image[xlink\\:href], use[href], use[xlink\\:href]')) {
+        blockExternalHref(element);
+    }
+
+    for (const image of doc.querySelectorAll('img')) {
+        const src = image.getAttribute('src') || '';
+
+        blockSourceSet(image);
+
+        if (!isExternalImageUrl(src) && !image.getAttribute('data-blocked-srcset')) {
+            continue;
+        }
+
+        if (src) image.setAttribute('data-blocked-src', src);
+        image.setAttribute('src', EXTERNAL_IMAGE_PLACEHOLDER);
+        image.setAttribute('loading', 'lazy');
+        image.style.maxWidth = '100%';
+        image.style.height = 'auto';
+        image.style.border = '1px solid #d1d5db';
+        image.style.borderRadius = '8px';
+    }
+
+    if (hasDocumentShell) {
+        return `<!doctype html>\n${doc.documentElement.outerHTML}`;
+    }
+
+    return doc.body.innerHTML;
+};

frontend/src/views/common/Appearance.vue

@@ -12,7 +12,7 @@ const props = defineProps({
 
 const {
     mailboxSplitSize, useIframeShowMail, preferShowTextMail, configAutoRefreshInterval,
-    globalTabplacement, useSideMargin, useUTCDate, useSimpleIndex
+    globalTabplacement, useSideMargin, useUTCDate, useSimpleIndex, autoLoadExternalImages
 } = useGlobalState()
 const isMobile = useIsMobile()
 
@@ -43,6 +43,9 @@ const { t } = useScopedI18n('views.common.Appearance')
             <n-form-item-row :label="t('useIframeShowMail')">
                 <n-switch v-model:value="useIframeShowMail" :round="false" />
             </n-form-item-row>
+            <n-form-item-row :label="t('autoLoadExternalImages')">
+                <n-switch v-model:value="autoLoadExternalImages" :round="false" />
+            </n-form-item-row>
             <n-form-item-row :label="t('useUTCDate')">
                 <n-switch v-model:value="useUTCDate" :round="false" />
             </n-form-item-row>