IFrame Not Being Rendered In ng-bind-html

angularjs ng-bind-html
eat-sleep-code picture eat-sleep-code · Jul 6, 2015 · Viewed 11.2k times · Source

I have a datasource that is used to render blog articles on a page. One of the entries contains an IFRAME. I see the IFRAME being returned in the datasource but it is never rendered to the page in the ng-bind-html.

This is my code:

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

If I switch this to the following, I see the IFRAME tag rendered out, but of course now it is RAW HTML.

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

How can I get this IFRAME to be rendered to the page.

Answer

Daniel Beck picture Daniel Beck · Jul 6, 2015

The best approach here is to refactor your data source to only contain the URL, rather than the full iframe tag, and use <iframe ng-src="entry.content"></iframe>.

ng-bind-html isn't working for you because the sanitizer is protecting you from potential XSS attacks.

If you don't control the data source, but trust it completely, you can look into using e.g. scope.trustedContent = $sce.trustAsHtml(entry.content); in your directive, and <div ng-bind-html="trustedContent"></div> in the DOM.

(Not controlling it but trusting it completely is, of course, a contradiction in terms, so you may be better off parsing the data source inside your directive to extract the url, rather than trusting the entire string.)

Related questions

AngularJS and AngularUI: mask or format a phone number when binding

I am using AngularUI to format or "masking" a phone number input, and it works fine with a ng-model: <input ng-model="emer.phone" ui-mask="{{'(999) 999-9999'}}" type="text"/> Question: But now how can I apply the same …

Read More
Angular sanitize / ng-bind-html not working?

I've got a repeater set up and can get data to display as long as there is no html within it. I've included angular-sanitize.js and have tried using ng-bind-html But nothing is displayed within the span, only within the …

Read More
insert an iframe into page dynamically in AngularJS

I am trying to dynamically insert an iframe into a page with Angular 1.2. Here is the code: html: <div id="player_wrapper" ng-cloak> <div ng-bind-html="player"></div> </div> js: $http({method: 'GET', …

Read More