如何从JSON载荷在Pug中正确渲染iframe？

嘿，我一眼就瞅出问题所在了——你现在是把Pug标签语法当成普通字符串直接传给模板，但Pug默认会自动转义所有传入的内容，它不会去解析这个字符串里的Pug代码，只会把整个内容当成纯文本输出，所以iframe就变成文字显示啦。

给你两种靠谱的解决办法：

方法一：直接传递HTML字符串，关闭转义 #

把后端构造的内容改成标准的HTML iframe标签，而非Pug语法：

// 构造完整的HTML iframe标签
var iframeHtml = '<iframe id="dash" class="embedf" src="' + BASE_URL + '/' + token + '"></iframe>';
// 传递到模板
res.render("pages/sponsorship", {frame: iframeHtml});

然后在Pug模板里，用!{frame}来输出内容（!{}是Pug里的语法，告诉它不要转义，直接渲染HTML）：

#container
  !{frame}

方法二：只传递必要参数，在模板里写Pug标签（更推荐） #

这种方式更符合模板的职责，也更安全（Pug会自动帮你处理属性的转义，避免XSS风险）：
首先后端只传递iframe的src地址：

var iframeSrc = BASE_URL + '/' + token;
res.render("pages/sponsorship", {iframeSrc: iframeSrc});

然后在Pug模板里直接写iframe的Pug标签：

#container
  iframe#dash.embedf(src=iframeSrc)

额外提醒 #

第一种方法里如果你的BASE_URL或者token包含特殊字符（比如引号），直接拼接HTML可能会导致语法错误或者XSS漏洞，所以更推荐第二种方法，让Pug来处理属性的转义工作，既安全又省心。

内容的提问来源于stack exchange，提问作者Jamal