6

I have read Is it possible to add iFrame directly in Lightning Components, this is not a duplicate. I need to display an iframe, but I cannot supply a src url.

Briefly, I need to display EmailMessage.htmlBody within my component, but the emails are coming from Outlook (via 3rd party syncing tool), so the email content includes html, head, and style tags. The client wants to keep the formatting, so I don't want to strip out the style. Both lightning:formattedRichText and ui:outputRichText strip out a number of tags including html, head, and style. Further, the way they strip them out leaves some of the xmlns:xxx attributes from the html tag present in the display, so they won't work.

I've looked at how the OOB EmailMessage view page in LEX works, and it's showing the email body inside an iframe... complete with all of the outlook-generated tags inside the iframe. But, there's no src tag on the iframe, so I assume they are loading the iframe from JS.

I've tried the following:

  1. Direct setting, e.g., iframe[0].contentDocument.write(html). The wrapper object api doesn't expose contentDocument.
  2. data: url, with the email body base64 encoded. CSP restriction doesn't allow Data urls. The CSP settings in SF allow for additional urls, but do not support the data: scheme (per the error message when I tried).
  3. blob: url, creating the Blob in js using the email body. No CSP error, and if I debug the blob: url and paste it in the browser, I see the email body. But when I set it in the iframe in the page, I get a blank iframe. Inspecting the iframe content in chrome dev tools shows a simple empty html doc that isn't the content I put in my blob: url.

So I'm stuck. How can I render the full html which I have as an object property, but not as an url, inside an iframe, in a Ltng Component?

  • 3
    Have you tried aura:unescapedHtml? – sfdcfox Oct 10 '18 at 16:38
  • Is srcdoc exposed? goes to check – Mark Masterson Oct 10 '18 at 16:46
  • 1
    The 'srcdoc' attribute is not supported for 'iframe' - that's a no – Mark Masterson Oct 10 '18 at 16:49
  • @JasonClark sure thing. One moment. – sfdcfox Oct 10 '18 at 19:51
  • I am also looking for same thing, but aura:unescapedHtml breaks the page like picaso sometime, on most of times its working fine but it breaks on few occasions. Can you tell me workaround for this, please – Krishna Bidwai Feb 14 at 14:36
5

You can use aura:unescapedHtml to inject almost any kind of HTML. As usual in this case, make sure that you trust the source code to avoid injection attacks, or at least do some minimal scrubbing of potentially dangerous tags.

| improve this answer | |
  • 1
    This worked perfectly, and eliminated the need for the iframe. Looking at the rendered html, it has automatically removed the html, head, and body tags, and moved the meta and style tags from head into the rendered content - style being the important bit for my use case. – Jason Clark Oct 10 '18 at 19:56
  • @JasonClark could you post sample code in a fiddle? I am attempting the same test and would appreciate it. – Geo Jan 30 '19 at 18:00
  • 1
    @Geo Not sure I could make a working fiddle with aura code, but it's literally just <aura:unescapedHtml value="{!v.note.body}" />, where note.body is a string loaded directly from a RichText sobject field. I stuck that tag inside a div with display: block; styling and was done. – Jason Clark Jan 30 '19 at 18:08
  • Very nice solution; however, the lightening styling might overwrite the styling of whatever is places in "aura:unescapedHtml". Is there any solution to prevent lightning from overwriting aura:unescapedHtml style? – Cuban coffee Jan 14 at 11:31
  • 1
    @Cubancoffee I didn't run into an issue with lightning styles affecting my rendered html, but if you do, I'd try adding "css reset" styles (a set of CSS rules meant to clear or "reset" browser styles), plus whatever styles you want to use, to the div containing the aura:unescapedHtml component. A quick google search will show you some options for CSS reset styles. You may need to tweak a bit to undo specific SLDS styles that aren't accounted for by a CSS Reset. – Jason Clark Jan 14 at 13:40
0

Have you tried to bind an aura attribute to the source of the iframe. When the attribute change, so the iframe source.

<aura:attribute name="vfHost"           type="String" default="" />

<iframe aura:id="vfFrame" src="{! v.vfHost }"/>

Although, if you have the content of the email in a JS var, why do you need to put it in an iframe. You can render inside a lighting component in a DIV

<div id="divEmailText"></div>

renderHTML : function(strHTML) { 
 document.getElementById('divEmailText').innerHTML = strHTML; 
}
| improve this answer | |
  • I couldn't bind to src as I don't have an url for the email body, just a property from my model object. And I wanted the iframe so that I wouldn't have to modify the html body (remove html, head, body tags, move style tag into the rendered output) before rendering. – Jason Clark Oct 10 '18 at 17:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.