How to set HTML in srcdoc iframe attribute?

Question

<div id="email_content"> <iframe srcdoc="{$email_content}"></iframe> </div> 

As shown in the image below, I use the iframe inside the div#email_content to accurately view the contents of the email. I am trying to use the srcdoc attribute to load email content in an iframe. Here, the email content may be plain text or HTML content developed through CkEditor. I tried using escape, htmlentities, etc. But the srcdoc attribute breaks because the attribute value contains pure HTML code and quotation marks.

Any work will be accepted.

Thanks!

Note. I do not want to use the src attribute here.

Answer 1

You need to use htmlentities method in php

 <?php $str = '<a href="https://www.tarunlalwani.com">Go to tarunlalwani.com</a>'; echo htmlentities($str); ?> 

And then assign it srcdoc . It works as shown below. Jsfiddle

https://jsfiddle.net/zpx8qw1b/1/

Answer 2

According to the HTML5 specification for <iframe> we need to replace the quotation marks and ampersands in the srcdoc line with the HTML objects:

In HTML syntax, authors only need to remember the "" (U + 0022) characters to wrap the attribute contents, and then exit all the "" "(U + 0022) and U + 0026 AMPERSAND (&) characters and specify the sandbox attribute to ensure safe embed content.

Please note that quotation marks must be escaped (otherwise the srcdoc attribute will end prematurely), and also that raw ampersands (for example, in URLs or prose) mentioned in isolated content must be escaped twice - once, the ampersand is saved when initial analysis of the srcdoc attribute and again to prevent the ampersand from being misinterpreted when analyzing isolated content.

We can achieve this in PHP with str_replace() :

 $srcdoc = '<div id="foo">"Contains quoted text."</div>'; $escaped = str_replace([ '"', '&' ], [ '&quot;', '&amp;amp;' ], $srcdoc); 

The ampersand shown above is not a typo. This code produces:

 <div id=&quot;foo&quot;>&quot;Contains quoted text.&quot;</div> 

Then we can use the escaped value for the srcdoc attribute srcdoc :

 <div id="email_content"> <iframe sandbox srcdoc="<div id=&quot;foo&quot;>&quot;Contains quoted text.&quot;</div>"></iframe> </div> 

Please note that HTML5 srcdoc is not yet available in Internet Explorer or Edge. Support in email clients will be even lower.