IFrame 未在 ng-bind-html 中呈现

Question

我有一个用于在页面上呈现博客文章的数据源。其中一个条目包含 IFRAME。我看到数据源中返回了 IFRAME，但它从未呈现到 ng-bind-html.

中的页面

这是我的代码：

<div class="blog-post-content" ng-bind-html="entry.content" itemprop="text">
</div>

如果我将其切换为以下内容，我会看到呈现出的 IFRAME 标签，但当然现在它是 RAW HTML。

<div class="blog-post-content" itemprop="text">
    {{entry.content}}
</div>

如何让这个 IFRAME 呈现到页面。

Answer 1

此处最好的方法是重构您的数据源以仅包含 URL，而不是完整的 iframe 标记，并使用 <iframe ng-src="entry.content"></iframe>.

ng-bind-html 对您不起作用，因为消毒剂正在保护您免受潜在的 XSS 攻击。

如果您无法控制数据源，但完全信任它，您可以考虑使用例如scope.trustedContent = $sce.trustAsHtml(entry.content); 在你的指令中， <div ng-bind-html="trustedContent"></div> 在 DOM 中。

（不控制它但完全信任它当然是一种自相矛盾的说法，因此您最好解析指令中的数据源以提取 url，而不是信任整个指令字符串。)

IFrame Not Being Rendered In ng-bind-html