Mixing
How to display iframe in lightning by direct-loading content (without a src: url)
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
4
down vote
favorite
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:
- Direct setting, e.g.,
iframe[0].contentDocument.write(html). The wrapper object api doesn't expose contentDocument. 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 thedata:scheme (per the error message when I tried).blob:url, creating the Blob in js using the email body. No CSP error, and if I debug theblob: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 myblob: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?
lightning-components
asked 4 hours ago
Jason Clark
6,03322967
add a comment |Â
up vote
4
down vote
favorite
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:
- Direct setting, e.g.,
iframe[0].contentDocument.write(html). The wrapper object api doesn't expose contentDocument. 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 thedata:scheme (per the error message when I tried).blob:url, creating the Blob in js using the email body. No CSP error, and if I debug theblob: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 myblob: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?
lightning-components
asked 4 hours ago
Jason Clark
6,03322967
3
Have you tried aura:unescapedHtml?
– sfdcfox
4 hours ago
Is srcdoc exposed? goes to check
– Mark Masterson
4 hours ago
1
The 'srcdoc' attribute is not supported for 'iframe' - that's a no
– Mark Masterson
4 hours ago
@JasonClark sure thing. One moment.
– sfdcfox
1 hour ago
add a comment |Â
up vote
4
down vote
favorite
up vote
4
down vote
favorite
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:
- Direct setting, e.g.,
iframe[0].contentDocument.write(html). The wrapper object api doesn't expose contentDocument. 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 thedata:scheme (per the error message when I tried).blob:url, creating the Blob in js using the email body. No CSP error, and if I debug theblob: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 myblob: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?
lightning-components
asked 4 hours ago
Jason Clark
6,03322967
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:
- Direct setting, e.g.,
iframe[0].contentDocument.write(html). The wrapper object api doesn't expose contentDocument. 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 thedata:scheme (per the error message when I tried).blob:url, creating the Blob in js using the email body. No CSP error, and if I debug theblob: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 myblob: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?
lightning-components
lightning-components
asked 4 hours ago
Jason Clark
6,03322967
asked 4 hours ago
Jason Clark
6,03322967
asked 4 hours ago
Jason Clark
6,03322967
asked 4 hours ago
Jason Clark
6,03322967
asked 4 hours ago
Jason Clark
6,03322967
6,03322967
3
Have you tried aura:unescapedHtml?
– sfdcfox
4 hours ago
Is srcdoc exposed? goes to check
– Mark Masterson
4 hours ago
1
The 'srcdoc' attribute is not supported for 'iframe' - that's a no
– Mark Masterson
4 hours ago
@JasonClark sure thing. One moment.
– sfdcfox
1 hour ago
add a comment |Â
3
Have you tried aura:unescapedHtml?
– sfdcfox
4 hours ago
Is srcdoc exposed? goes to check
– Mark Masterson
4 hours ago
1
The 'srcdoc' attribute is not supported for 'iframe' - that's a no
– Mark Masterson
4 hours ago
@JasonClark sure thing. One moment.
– sfdcfox
1 hour ago
3
3
Have you tried aura:unescapedHtml?
– sfdcfox
4 hours ago
Have you tried aura:unescapedHtml?
– sfdcfox
4 hours ago
Is srcdoc exposed? goes to check
– Mark Masterson
4 hours ago
Is srcdoc exposed? goes to check
– Mark Masterson
4 hours ago
1
1
The 'srcdoc' attribute is not supported for 'iframe' - that's a no
– Mark Masterson
4 hours ago
The 'srcdoc' attribute is not supported for 'iframe' - that's a no
– Mark Masterson
4 hours ago
@JasonClark sure thing. One moment.
– sfdcfox
1 hour ago
@JasonClark sure thing. One moment.
– sfdcfox
1 hour ago
add a comment |Â
2 Answers
2
active
oldest
votes
up vote
3
down vote
accepted
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.
answered 59 mins ago
sfdcfox
232k10178394
1
This worked perfectly, and eliminated the need for the iframe. Looking at the rendered html, it has automatically removed thehtml,head, andbodytags, and moved themetaandstyletags fromheadinto the rendered content -stylebeing the important bit for my use case.
– Jason Clark
57 mins ago
add a comment |Â
up vote
0
down vote
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;
answered 3 hours ago
ransommule
433313
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
3 hours ago
add a comment |Â
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
3
down vote
accepted
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.
answered 59 mins ago
sfdcfox
232k10178394
1
This worked perfectly, and eliminated the need for the iframe. Looking at the rendered html, it has automatically removed thehtml,head, andbodytags, and moved themetaandstyletags fromheadinto the rendered content -stylebeing the important bit for my use case.
– Jason Clark
57 mins ago
add a comment |Â
up vote
3
down vote
accepted
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.
answered 59 mins ago
sfdcfox
232k10178394
1
This worked perfectly, and eliminated the need for the iframe. Looking at the rendered html, it has automatically removed thehtml,head, andbodytags, and moved themetaandstyletags fromheadinto the rendered content -stylebeing the important bit for my use case.
– Jason Clark
57 mins ago
add a comment |Â
up vote
3
down vote
accepted
up vote
3
down vote
accepted
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.
answered 59 mins ago
sfdcfox
232k10178394
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.
answered 59 mins ago
sfdcfox
232k10178394
answered 59 mins ago
sfdcfox
232k10178394
answered 59 mins ago
sfdcfox
232k10178394
answered 59 mins ago
sfdcfox
232k10178394
232k10178394
1
This worked perfectly, and eliminated the need for the iframe. Looking at the rendered html, it has automatically removed thehtml,head, andbodytags, and moved themetaandstyletags fromheadinto the rendered content -stylebeing the important bit for my use case.
– Jason Clark
57 mins ago
add a comment |Â
1
This worked perfectly, and eliminated the need for the iframe. Looking at the rendered html, it has automatically removed thehtml,head, andbodytags, and moved themetaandstyletags fromheadinto the rendered content -stylebeing the important bit for my use case.
– Jason Clark
57 mins ago
1
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
57 mins ago
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
57 mins ago
add a comment |Â
up vote
0
down vote
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;
answered 3 hours ago
ransommule
433313
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
3 hours ago
add a comment |Â
up vote
0
down vote
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;
answered 3 hours ago
ransommule
433313
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
3 hours ago
add a comment |Â
up vote
0
down vote
up vote
0
down vote
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;
answered 3 hours ago
ransommule
433313
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;
answered 3 hours ago
ransommule
433313
edited 3 hours ago
answered 3 hours ago
ransommule
433313
answered 3 hours ago
ransommule
433313
answered 3 hours ago
ransommule
433313
433313
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
3 hours ago
add a comment |Â
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
3 hours ago
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
3 hours ago
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
3 hours ago
add a comment |Â
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f235507%2fhow-to-display-iframe-in-lightning-by-direct-loading-content-without-a-src-url%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
3
Have you tried aura:unescapedHtml?
– sfdcfox
4 hours ago
Is srcdoc exposed? goes to check
– Mark Masterson
4 hours ago
1
The 'srcdoc' attribute is not supported for 'iframe' - that's a no
– Mark Masterson
4 hours ago
@JasonClark sure thing. One moment.
– sfdcfox
1 hour ago