10
<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.

enter image description here

aagjalpankaj
  • 1,160
  • 1
  • 15
  • 25
  • Posted something but if it breaks for your html then you need to provide a sample HTML where it breaks – Tarun Lalwani Nov 25 '17 at 05:26
  • 1
    Avoid `htmlentities`! It's slower and the output will be larger because you don't need to replace *every* special character for srcdoc, just quotes. The other answer using `str_replace` is *much* more efficient. – mr_carrera Nov 26 '17 at 10:00
  • `htmlentities()` also doesn't address the need to *double* escape ampersands (&) in the srcdoc string. – Cy Rossignol Nov 27 '17 at 03:54

2 Answers2

7

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.

Cy Rossignol
  • 16,216
  • 4
  • 57
  • 83
  • 2
    Today, srcdoc is Supported in Microsoft Edge (Chromium) https://developer.microsoft.com/en-us/microsoft-edge/status/iframesrcdocattribute/ – Sarah Trees Nov 25 '20 at 10:35
  • Using this replacement code didn't quite work for me as it added two double quotes for some reason, although it can be seen from srcdoc that only one should be included. This was especially annoying inside of `src` and `href` attributes as it would mess the path. --- What worked for me was to use single quotes for html element attributes inside of srcdoc, eg. ` – ado387 Sep 02 '21 at 13:16
5

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/

Tarun Lalwani
  • 142,312
  • 9
  • 204
  • 265