0

I am making a simple email client in angular.

I am using $sce to inject email html into my view in a div. I used the information in this SO question to set this up.

I have a service that retrieves an email and provides data a la (in the message service):

message.trustedHtml = $sce.trustAsHtml(message.html);

Then in my controller this:

vm.currentMessageHtml = message.trustedHtml;

Then I bind it and voila, everything seems to work.

<div ng-bind-html="vm.currentMessageHtml"></div>

Except that now my menu links are styled funny (decorators have been added). When I inspect the menu items (which are links, I see this):

a:link, span.MsoHyperlink
{
    mso-style-priority: 99;
    color: blue;
    text-decoration: underline;
}

Where in the heck did that MsoHyperlink class come from???

Well, when I inspect the html injected into the view via the ng-bind-html I see this:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="Generator" content="Microsoft Word 15 (filtered medium)"><style><!--/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.EmailStyle18
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle19
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle20
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle21
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle22
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle23
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle24
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle25
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle26
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle27
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle28
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle29
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle30
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle31
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle32
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle33
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle34
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
-->
</style>
</head>
<body lang="EN-US" link="#0563C1" vlink="#954F72">
<div class="WordSection1"><p class="MsoNormal"><span     style="color:#1f497d">18</span><b><span style="color:#1f497d"> </span></b>This     is the message body!</p><p class="MsoNormal"> </p></div></body></html>

So there are the styles...but first, they are commented out...and second, how are they styling my app.

And third and most important...how do I fix this?

My question boils down to...how do I safely display html emails in my angular view without the styling affecting my application?

Community
  • 1
  • 1
richard
  • 12,263
  • 23
  • 95
  • 151
  • They're not commented out. they're styling your menus because they overwrite some of your own CSS rules. That's a hard problem to solve: you should NOT trust this external HTML. Gmail itself, for example, doesn't render the HTML in email as is. – JB Nizet Mar 10 '15 at 08:19
  • Thanks JB Nizet...2 questions - it looks commented out...why do you say it isn't? Also, I agree, I don't want to trust this external html, but what can I do to sanitize it or make sure it displays safely but correctly? What does gmail do? – richard Mar 10 '15 at 08:36
  • Don't know exactly what it does and how it does it. I just know that if I want an HTML email to look fine in gmail, it's hard. Regarding your first question, read http://stackoverflow.com/questions/4447531/what-is-the-usage-of-comment-notations-in-style-tag – JB Nizet Mar 10 '15 at 10:38

0 Answers0