How to set HTML code in "srcdoc" attribute of iframe?

Question

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

As shown in below picture I am using iframe inside div#email_content to show exact preview of email content. I am trying to use srcdoc attribute to load email content in the iframe. Here the email content might be a plain text or HTML content designed through CkEditor. I tried using escape, htmlentities, etc. But the srcdoc attribute breaks because the attribute value contains pure HTML code and quotes.

Any work-around will be accepted.

Thanks!

Note: I don't want to use src attribute here.

Answer 1

According to the HTML5 specification for <iframe>, we need to replace the quotes and ampersands in the srcdoc string with HTML entities:

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

Notice the way that quotes have to be escaped (otherwise the srcdoc attribute would end prematurely), and the way raw ampersands (e.g. in URLs or in prose) mentioned in the sandboxed content have to be doubly escaped — once so that the ampersand is preserved when originally parsing the srcdoc attribute, and once more to prevent the ampersand from being misinterpreted when parsing the sandboxed content.

We can achieve this in PHP using str_replace():

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

The ampersand replacement 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 value:

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

Note that the HTML5 srcdoc feature is not available in Internet Explorer. Edge supports srcdoc as of version 79 (January 2020). Support in email clients will be even lower.

Answer 2

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 that to srcdoc. It works as shown in below JSFiddle

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