Ich versuche derzeit eine Web-App zu entwickeln, um dem Benutzer E-Mails anzuzeigen. Wichtig ist mir, dass die E-Mails wie in einem E-Mail-Client (zB gmail) angezeigt werden. Ich verwende die Gmail-API, um E-Mails in meine Datenbank zu importieren, dann bekomme ich die Nachrichtenteile aus den E-Mails in meine Winkel-App. Das Problem ist, dass ich HTML-E-Mails nicht mit dem richtigen Styling anzeigen kann. Es scheint, als würden HTML-Tags richtig verwendet, aber das ursprüngliche Styling scheint verloren zu sein
Ich verwende eckige 7 und Spring Boot. Um die E-Mails zu sammeln, verwende ich die gmail-API und importiere sie in eine Postgresql-Datenbank. Ich habe versucht, iframes zu verwenden, damit mein App-Styling dem E-Mail-Styling nicht im Weg steht, aber es wird auf die gleiche Weise angezeigt.
Wie bereite ich die E-Mails vor
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;
}
}
}
Hinweis: selectedEmail.mainContent ist der String, den ich oben erstellt habe
Der Inhalt in mainContent sind Phishing-E-Mails, die ich versuche zu sammeln und anzuzeigen. Das Beispiel ist eine HTML-E-Mail, die ich versuche anzuzeigen. Ich habe die Links und die meisten Spam-Inhalte weggelassen.
---------- Weitergeleitete Nachricht --------- Von: emailaddress Datum: Fr., 10. Mai 2019 um 22:06 Uhr Betreff: Name, Gib Mama was sie will An: E-Mail-Addresse
image Werde Teil der Heally-Familie auf Facebook- Link! - LASSEN SIE UNS SPRECHEN Mutter feiern ... Mütter regieren die Welt. Sie geben uns buchstäblich Leben, schlüpfen in eine der härtesten Rollen und tun dies alles ohne Ende ihres Arbeitstages oder ihrer Freizeit. Während Mütter es verdienen, das ganze Jahr über gefeiert zu werden, ist der Muttertag eine besondere Zeit, um sicherzustellen, dass sie wissen, dass sie geliebt und geschätzt werden. MEHR ERFAHREN-Link
Auf der Suche nach reinen CBD-Produkten? PROMO-CODE: SAVECBD20 link CBD 20% RABATT link Schenken Sie Mama Geschenke, die sie wirklich will. Shoppen auf dem Marktplatz
-ausgelassener SPAM-
Sie erhalten diese E-Mail, weil Sie oder Ihr Arzt sich für ein Heally-Konto registriert haben. Link zum Abbestellen Copyright (C) 2019 Heally Inc. Alle Rechte vorbehalten. Abmelden
Ich habe versucht, mir eine minimalistische HTML-E-Mail mit diesem Inhalt zu senden:
*dummy*
<div dir="ltr"><i>dummy</i></div>
und es hat prima funktioniert. Möglicherweise liegt das Problem an einer externen Klasse, die von der Google Mail-API nicht angezeigt/geladen und/oder nicht exportiert wird
<mat-card>
<mat-card-title>
Current Email
</mat-card-title>
<mat-card-content [innerHTML]="selectedEmail.mainContent">
</mat-card-content>
</mat-card>
Ich möchte E-Mails so anzeigen, wie sie in Google Mail angezeigt werden, stattdessen konnte ich nur Klartext und grundlegendes Styling über HTML-Tags anzeigen. Ich verstehe nicht, bei welchem meiner Schritte das Styling verloren geht oder ob ich die E-Mails nicht richtig zeige.
Angular-Sicherheit Blockiert dynamisches Rendering von HTML und anderen Skripten. Sie müssen sie mit DOM Sanitizer umgehen.
Lesen Sie hier mehr: Winkelsicherheit
Führen Sie die folgenden Änderungen in Ihrem Code durch:
// 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
}
}
Und in compoenent.html
<div [innerHtml]="htmlData"> </div>
Hier ist der Arbeits StackBlitz: Working Demo
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen