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

Question

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

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

任何解决方法都将被接受。

谢谢！

注意：我不想在此处使用src属性。

Answer 1

根据HTML5 specification for <iframe>，我们需要使用HTML实体替换 srcdoc 字符串中的引号和＆符号： / p>

  

在HTML语法中，作者只需要记住使用“”（U + 0022）字符来包装属性内容，然后转义所有“”“（U + 0022）和U + 0026 AMPERSAND（＆amp;）字符，并指定沙盒属性，以确保安全嵌入内容。

     

注意必须转义引号的方式（否则srcdoc属性会过早结束），并且沙盒内容中提到的原始＆符号（例如在URL或散文中）的方式必须 加倍 转义 - 一次以便在最初解析srcdoc属性时保留＆符号，并在解析沙盒内容时再次防止＆符号被错误解释。

我们可以使用str_replace()：

在PHP中实现这一点

$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>

请注意，Internet Explorer或Edge中的HTML5 srcdoc为not yet available。电子邮件客户端的支持将更低。

Answer 2

你需要在php中使用htmlentities方法

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

然后将其分配给srcdoc。它的工作方式如下面的JSFiddle

所示

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