Как отображать электронные письма в угловом приложении, как будто оно отображается в почтовом клиенте

Question

В настоящее время я пытаюсь разработать веб-приложение для отображения сообщений электронной почты пользователю.Для меня важно, чтобы электронные письма отображались так же, как в почтовом клиенте (например, в gmail).Я использую API Gmail для импорта электронной почты в свою базу данных, а затем получаю сообщения из электронных писем в свое угловое приложение.Проблема в том, что я не могу отобразить html-письма с соответствующим стилем.Кажется, что html-теги используются правильно, но первоначальная стилизация потеряна

Я использую угловую 7 и пружинную загрузку.Для сбора писем я использую API gmail и импортирую их в базу данных postgresql.Я пытался использовать iframes, чтобы стилизация моего приложения не мешала стилизации электронной почты, но отображалась одинаково.

Как я готовлю электронные письма

private String getMessageContent(Message message) {
        StringBuilder stringBuilder = new StringBuilder();
        try {
            if(message.getPayload().getParts() != null) {
                handleEmailMainContent(message.getPayload().getParts(), stringBuilder);
                byte[] bodyBytes = Base64.decodeBase64(stringBuilder.toString());
                return new String(bodyBytes, "UTF-8");
            } else {
                return "";
            }
        } catch (UnsupportedEncodingException e) {
           System.out.println("UnsupportedEncoding: " + e.toString());
            return message.getSnippet();
        }
    }

    private void handleEmailMainContent(List<MessagePart> messageParts, StringBuilder stringBuilder) {
        for (MessagePart messagePart : messageParts) {
            switch (messagePart.getMimeType()) {
                case "text/plain":
                    handleMimeTypeTextPlain(messagePart, stringBuilder);
                    break;
                case "text/html":
                    handleMimeTypeTextHtml(messagePart, stringBuilder);
                    break;
                default:
                    break;
            }
        }
    }

Примечание:selectedEmail.mainContent - это строка, которую я строю выше

Пример

Содержимое внутри mainContent - это фишинговые электронные письма, которые я пытаюсь собрать и отобразить.Примером является электронное письмо, которое я пытаюсь отобразить.Я опустил ссылки и большую часть содержания спама.

---------- Пересылаемое сообщение --------- Фон: адрес электронной почты Дата: Пт., 10. Май 2019 гм 22:06 Uhr Тема: Имя, Дай мамеподарки, которые она хочет Кому: адрес электронной почты

image Станьте частью семьи Хили по ссылке Facebook !- ДАВАЙТЕ ГОВОРИТЬ Праздничная мама ... Мамы правят миромОни буквально дают нам жизнь, выполняют одну из самых сложных ролей и делают все это без конца их рабочему дню или любому выходному.Хотя мама заслуживает того, чтобы ее отмечали круглый год, День матери - это особое время, чтобы убедиться, что они знают, что их любят и ценят.УЗНАТЬ БОЛЬШЕ ссылка

Ищете только товары CBD?Промо-код: SAVECBD20 ссылка CBD 20% скидка ссылка Дарите маме подарки, которые она действительно хочет.Покупайте на рынке

спам-спам-

Вы получаете это электронное письмо, потому что вы или ваш поставщик медицинских услуг зарегистрировали учетную запись Heally.Ссылка для отмены подписки Copyright (C) 2019 Heally Inc. Все права защищены.Отказаться от подписки

own Пример

Я попытался отправить мне минималистичное письмо в формате html, содержащее следующее содержание:

*dummy*
<div dir="ltr"><i>dummy</i></div>

, и оно работало просто отлично.Может быть, проблема в том, что внешний класс не отображается / загружается и / или не экспортируется через gmail api

Как я пытался его отобразить

<mat-card>
  <mat-card-title>
    Current Email
  </mat-card-title>
  <mat-card-content [innerHTML]="selectedEmail.mainContent">
  </mat-card-content>
</mat-card>

Я хочу отображать сообщения электронной почты каквместо этого они отображаются в Gmail, а я могу отображать только простой текст и основные стили с помощью HTML-тегов.Я не понимаю, на каком из моих шагов стили теряются или я неправильно отображаю электронные письма.

Answer 1

Угловая защита Блокирует динамический рендеринг HTML и других скриптов. Вам нужно обойти их, используя DOM Sanitizer.

Подробнее здесь: Угловая защита

НЕ СЛЕДУЕТ вносить изменения в ваш код:

    // in your component.ts file

    //import this 
    import { DomSanitizer } from '@angular/platform-browser';

    export class TestComponent{

    public htmlData :any ; 
    // in constructor create object 

    constructor( 
    ...
    private sanitizer: DomSanitizer

    ...
    ){

    }

    someMethod(){

      /* this method must be called after getting the value of selectedEmail.mainContent 
   from service  */


     this.htmlData = this.sanitizer.bypassSecurityTrustHtml(selectedEmail.mainContent); // this line bypasses angular security
    }
}

А в compoenent.html

<div [innerHtml]="htmlData"> </div>

Вот рабочий StackBlitz: Рабочая демоверсия