AngularJS and IFrame srcdoc

Question

I parsed a bunch of email messages from a server, and I would now like to display them on a webpage. I got their HTML contents and I figured an IFrame was the easiest way to show the emails as they were meant to be shown.

However,

<iframe srcdoc="{{ email.html }}" frameborder="0"></iframe>

Gives me the following AngularJS error:

Error: [$interpolate:interr] Can't interpolate: {{ email.html }}
Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

I have been searching for a way to do this, tried disabling $sce as a test, but that didn't work either. It's just a test project and the data I'm getting is safe, I just need it for a POC.

I did this now in my controller:

var iframeDocument = document.querySelector('#myiframe').contentWindow.document;
var content = $scope.email.html;
iframeDocument.open('text/html', 'replace');
iframeDocument.write(content);
iframeDocument.close();

That works, but I'd still prefer to do it through data-binding, if there's a solution? Thanks.

Answer 1

Add a filter to make a value trusted:

angular.module('app').filter('toTrusted', ['$sce', function($sce) {
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]);

And then apply the filter:

<iframe srcdoc="{{email.html | toTrusted}}" frameborder="0"></iframe>

Complete code: http://jsfiddle.net/2bvktbLr/1/

Answer 2

try to add ngSanitize as a dependency in your app.

here your have more information : http://docs.angularjs.org/api/ngSanitize