如何在iframe的"srcdoc"属性中设置HTML代码？

Question

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

如下图所示我在内部使用iframe div#email_content来显示电子邮件内容的准确预览.我正在尝试使用srcdoc属性来加载iframe中的电子邮件内容.这里的电子邮件内容可能是通过CkEditor设计的纯文本或HTML内容.我尝试使用转义,htmlentities等.但srcdoc属性中断,因为属性值包含纯HTML代码和引号.

任何解决方案都将被接受.

谢谢!

注意:我不想在src这里使用属性.

Answer 1

按照HTML5规范<iframe>,我们需要更换引号和&符号在srcdoc字符串与HTML实体:

在HTML语法中,作者只需记住使用""(U + 0022)字符来包装属性内容,然后转义所有"""(U + 0022)和U + 0026 AMPERSAND(&)字符,并且指定沙箱属性,以确保安全嵌入内容.

注意引号必须被转义的方式(否则srcdoc属性会过早地结束),并且沙箱内容中提到的原始&符号(例如在URL或散文中)的方式必须被双重转义 - 一次以便保留&符号最初解析srcdoc属性时,再一次防止在解析沙盒内容时误差被误解.

我们可以使用以下方法在PHP中实现str_replace():

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

上面显示的&符号替换不是拼写错误.此代码生成:

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

然后,我们可以使用转义值作为srcdoc属性值:

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

请注意,HTML5 srcdoc 尚未在Internet Explorer或Edge中提供.电子邮件客户端的支持将更低.

Answer 2

你需要使用htmlentitiesphp中的方法

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

然后将其分配给srcdoc. 它的工作原理如下 JSFiddle 所示

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