信件內嵌圖檔與 Outlook 讀信自動下載外部圖檔行為

2023-03-11 09:08 AM

HTML 格式已是當今 Email 格式主流，幾乎各家郵件軟體都支援，寫信時將重點文字改粗體，強調部分上顏色，再插幾張圖片做到圖文並茂，已是再平常不過的事。

若是由程式發信，程式庫一般也都支援 HTML 格式，但講到在在內文嵌入圖檔，則有些注意事項。以廣告行銷信為例，假設活動邀請信想附上會場地圖，從網頁開發者思維，將地圖的圖檔放在網站，信件內文加個 <img src="https://www.my-company.com/images/map.png" alt="會場地圖" /> 似乎就行了，比起每封信夾帶圖檔當附件，能省下可觀的傳輸流量。但老鳥都知道，這個想法實際運作會有點問題：基於安全考量，郵件軟體通常不自動下載外部圖片，使用者打開信件會先看到無法顯示的叉燒包圖示，需點擊相關提示才會下載圖檔正常顯示。

那我們平常用 Gmail、Outlook 寫信，信件內文可以內嵌圖片沒問題，收信者可以直接看到呀？那是透過內含附件(Inline Attachment)形式實現的。這裡來說說在 Email 內嵌圖檔的幾種方法，借用之前 EWS 收發信範例，我建立了一封 HTML 格式信件使用 EWS 送出，HTML 有包含圖檔，分別用 Inline Attachment + ContentId、Data URI 跟 src 指向外部網站三種做法：

static async Task<int> Main(string[] args)
{
    var ews = InitEws();

    var message = new EWS.EmailMessage(ews);
    message.Sender = new EWS.EmailAddress(Settings.Email);
    message.ToRecipients.Add(Settings.Recipient);
    message.Subject = $"內嵌及外部圖檔測試 - {DateTime.Now:HH:mm:ss}";
    var cid = Guid.NewGuid().ToString();
    var pngData = File.ReadAllBytes("icon180.png");
    var html =$@"
        <style>img {{margin:6px;}}</style>
        <dl>
            <dt>內嵌圖檔(ContentId)</dt>
            <dd><img src=""cid:{cid}"" /></dd>
            <dt>內嵌圖檔(Data URI)</dt>
            <dd><img src=""data:image/png;base64,{Convert.ToBase64String(pngData)}"" width=""180"" height=""180"" /></dd>
            <dt>外部圖檔</dt>
            <dd><img src=""https://blog.darkthread.net/img/icon180x180.png"" /></dd>
        </dl>";
    message.Body = new EWS.MessageBody(html) { BodyType = EWS.BodyType.HTML };
    message.Attachments.AddFileAttachment("icon180.png", pngData);
    message.Attachments[0].IsInline = true; //設為 Inline 附件
    message.Attachments[0].ContentId = cid; //指定 ContentId，對映 HTML 中的 cid:... URI
    await message.SendAndSaveCopy();
    return 0;
}

使用 Outlook 收信，Inline Attachment 跟 Data URI 有顯示，指向網站的外部圖檔呈現叉燒包，上方則有提示：為了保護隱私，Outlook 不會自動下載郵件的某些圖片，要按一下才會下載：

這裡說的保護隱私是防止寄信者在 HTML 圖檔 URL 夾帶識別收信者身份的參數 (例如：https://web-server/some-img.png?recipient=jeffrey)，若 Outlook 在預覽或讀取時未經同意即直接下載，對方便能掌握收信者何時讀信、所在 IP 位置等資訊，這些未必是使用者想提供的，故 Outlook 預設不自動下載圖片。

Outlook 的自動下載設定在 Outlook 選項 / 信任中心 / 信任中心設定：