javascript - 在 iframe 中渲染电子邮件时如何处理 cid 图像源

标签 javascript email iframe exchangewebservices embedded-resource

我们有一个用 Angular4+ 编写的网络电子邮件客户端。 我们从 Exchange Web 服务加载电子邮件。

传入的邮件经过清理,然后呈现为 ​​iframe 的源。 即使图像也可以正常工作,除非它们是像这样嵌入的

<img width="486" height="572" id="Grafik_x0020_2" src="cid:image002.jpg@01D39103.BD805530">

有没有办法在渲染电子邮件时显示图像? 我们也可以下载附件。

谢谢并致以最诚挚的问候 克里斯托夫

最佳答案

因为我们已经下载了附件,所以我编写了一个管道来解决问题:

import { Pipe, PipeTransform } from '@angular/core';
import { TrusthtmlPipe } from 'app/crm-modules/core/pipes/trusthtmlPipe';
import { DomSanitizer } from '@angular/platform-browser';
import { SafeHtml } from '@angular/platform-browser/src/security/dom_sanitization_service';
import { AttachmentInfo } from 'app/crm-modules/email/models/attachment-info';

import * as _ from 'lodash';

@Pipe({
  name: 'cidToBase64'
})

export class CidToBase64Pipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
    this.sanitizer = sanitizer;
  }

  transform(html: any, attachments: Array<AttachmentInfo> = []): SafeHtml {
    let htmlToParse;
    if (typeof html === 'string') {
      htmlToParse = html;
    } else if (html instanceof Object && html.hasOwnProperty('changingThisBreaksApplicationSecurity')) {
      htmlToParse = (html.changingThisBreaksApplicationSecurity !== null || html.changingThisBreaksApplicationSecurity !== undefined)
        ? html.changingThisBreaksApplicationSecurity
        : '';
    } else {
      htmlToParse = '';
    }

    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlToParse, 'text/html');

    if (attachments !== null && attachments !== undefined && attachments.length > 0 && htmlToParse.length > 0) {
      const imageLinks = doc.getElementsByTagName('img');
      for (let i = 0; i < imageLinks.length; i++) {
        const imageLink = imageLinks[i];
        const src = imageLink.getAttribute('src');
        if (src !== null && src !== undefined && _.includes(src, 'cid:')) {

          let cidInfo;
          let fileName;
          let fileIndex;
          let useImage = true;

          cidInfo = src.split('cid:');
          useImage = cidInfo.length === 2;

          if (useImage) {
            fileName = cidInfo[1].split('@')[0];
            fileIndex = _.findIndex(attachments, { 'name': fileName, 'inline': true });
            useImage = fileIndex > -1;
          }

          if (useImage) {
            imageLink.setAttribute('src', 'data:image/png;base64,' + attachments[fileIndex].content);
          } else {
            // @todo: show placeholder or remove the node...
          }
        }
      }
    }

    const trustHtmlPipe = new TrusthtmlPipe(this.sanitizer);
    return trustHtmlPipe.transform(doc.documentElement.innerHTML);
  }
}

也许有帮助。

最诚挚的问候 克里斯托夫

关于javascript - 在 iframe 中渲染电子邮件时如何处理 cid 图像源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48342439/

相关文章:

javascript - react : is this a good way to implement a shared state subscription?

c# - 在应用程序池中运行我的邮件队列是否错误?

php - Heroku 上的基本 Node.js 应用程序 - 免费发送电子邮件的方式?

javascript - 试图利用分享社交按钮的值(value)来进行操纵

javascript - 如何列出 iframe 请求的资源

asp.net-mvc-2 - 仅当调试器运行时防伪 token 异常

javascript - 获取 ul 的所有值到变量中

javascript - 如何使用 OpenLayers 创建圆形图标图像?

javascript - 使用 html-javascript 从 2 个列表的输入中打印一个电子邮件 ID 列表

php - 密码加密,在 session 中存储密码