Displaying HTML in a modal

bensnape · August 29, 2019, 9:01am

I’ve developed an app and it’s in the app stores and everything works as expected, however, I have come across a slight issue.

In the app, the user can view their emails (called via an api) and at the moment, I am displaying these emails in a modal popup using <div [innerHtml]=“email”>

This works fine but if one of the emails is a fully formatted html email, with styles etc, when you view it, those styles interfere with the apps UI. For example the app header disappears and padding etc is all messed up.

I’m assuming that the css styles are overwriting the main app styles somehow.

To get around this I tried displaying the html email in an iframe using the srcdoc attribute, but I can’t get that working on IOS devices.

I’m now stumped. Any ideas?

bensnape · August 29, 2019, 9:12am

Forgot to mention, it’s an ionic 4 app using cordova

crmontiel · August 29, 2019, 4:08pm

Hello, you need to use DomSanitizer to be able to do a css bypass

Generate a pipe

ionic g pipe safeHtml

Replace all code inside file pipe for this

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from "@angular/platform-browser";

/**
 * Generated class for the SafeHtmlPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }

}

One more thing, add your pipe to app/app.module.ts under declarations

@NgModule({
  declarations: [
    MyApp,
    ...
    SafeHtmlPipe,
],

And last thing to do is to head over to your html file where you are using innerHTML tag and add your pipe

<div [innerHTML]="email| safeHtml"></div>

I createdd a example for you at stackBlitz

rapropos · August 29, 2019, 4:22pm

I would be pretty concerned about blindly trusting HTML that comes from such an untrusted source as emails.

bensnape · August 29, 2019, 4:33pm

I have tried that via a pipe but the CSS in the email screws the app ui…

crmontiel · August 29, 2019, 4:43pm

Can you share a little about the code you receive in the email variable?

bensnape · August 29, 2019, 4:54pm

It’s a full html email with head, body tags and inline CSS etc

crmontiel · August 29, 2019, 4:56pm

It works perfectly for me on android and ios the pipe that I shared.
That’s why I wanted to see the code to test on my devices

bensnape · August 30, 2019, 9:25am

Here’s an example html email…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; margin: 0; padding: 0;">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body bgcolor="#f6f6f6" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; margin: 0; padding: 0;">
    <!-- body -->
    <table class="body-wrap" bgcolor="#f6f6f6" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; width: 100%; margin: 0; padding: 20px;">
        <tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; margin: 0; padding: 0;">
            <td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; margin: 0; padding: 0;"></td>
            <td class="container" bgcolor="#FFFFFF" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto; padding: 20px; border: 1px solid #f0f0f0;">
                <!-- content -->
                <div class="content" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; max-width: 600px; display: block; margin: 0 auto; padding: 0;">
                    <table style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; width: 100%; margin: 0; padding: 0;">
                        <tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; margin: 0; padding: 0;">
                            <td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; margin: 0; padding: 0;">

                                {date}

                                <h1 style="font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 22px; line-height: 1.2; color: #2076B3; font-weight: 200; margin: 40px 0 10px; padding: 0;">{intro}</h1>

                                <p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6; font-weight: normal; margin: 0 0 10px; padding: 0;">{details}</p>

                                <p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6; font-weight: normal; margin: 0 0 10px; padding: 0;">{link}</p>

                            </td>
                        </tr>
                    </table>
                </div>
                <!-- /content -->

            </td>
            <td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; margin: 0; padding: 0;"></td>
        </tr>
    </table>
    <!-- /body --><!-- footer -->
    <table class="footer-wrap" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; width: 100%; clear: both !important; margin: 0; padding: 0;">
        <tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; margin: 0; padding: 0;">
            <td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; margin: 0; padding: 0;"></td>
            <td class="container" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto; padding: 0;">

                <!-- content -->
                <div class="content" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; max-width: 600px; display: block; margin: 0 auto; padding: 0;">
                    <table style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; width: 100%; margin: 0; padding: 0;">
                        <tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; margin: 0; padding: 0;">
                            <td align="center" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; margin: 0; padding: 0;">
                                <p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.6; color: #666; font-weight: normal; margin: 0 0 10px; padding: 0;">

                                    <a href="{webAddress}" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; color: #999; margin: 0; padding: 0;">{unsubscribe}

                                </p>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- /content -->

            </td>
            <td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6; margin: 0; padding: 0;"></td>
        </tr>
    </table><!-- /footer -->
</body>
</html>

crmontiel · August 30, 2019, 4:39pm

Your HTML code works for me at stackBlitz with a safe pipe.
The only thing is that the variables have to be implemented differently, so they can be visualized

See the example

crmontiel · August 30, 2019, 4:45pm

bensnape · August 30, 2019, 4:51pm

Hi, yes it works fine on a Web browser but not when you run the app on an iOS device (iPhone)

crmontiel · August 30, 2019, 4:52pm

Ok give me a few minutes compiled the app on a device

Topic		Replies	Views
Trouble displaying HTML emails in an Ionic App ionic-v1	5	892	October 21, 2015
Rendering Html Code in Ionic 3 ionic-v3	3	8132	July 19, 2021
Did Pipe functionality change in 2.2.0? Trying to safely emit HTML in code ionic-v3	0	458	March 11, 2017
Background image with https ionic-v3	0	644	January 12, 2017
SanitizeHtml Pipe not working ionic-v3	14	9789	July 17, 2017

Displaying HTML in a modal

Related topics