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.

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.

• javascript
• angularjs
• iframe

• @dandavis An HTML document containing the actual email contents – Joris Ooms Commented Jan 9, 2014 at 2:36
• trying turning the doc into a string first, eventually setting the srcDoc to the html string. – dandavis Commented Jan 9, 2014 at 2:38
• @dandavis Could you elaborate? The email contents is one large HTML string. I just want to dump the whole email in an IFrame but Angular won't let me. I tried something like this: $('#myiframe').attr('srcdoc', $scope.email.html); but that didn't really work out either. – Joris Ooms Commented Jan 9, 2014 at 2:51
• 1 I'm not 100% sure, but I don't think Angular supports this currently. I believe you'd need to do $scope.emailHtml = $sce.trustAsHtml($scope.email.html), but there is no ng-srcdoc-bind-html which I think is the other piece of this puzzle (checkout ng-bind-html) – Matt Greer Commented Jan 9, 2014 at 2:59
• Another possibility is to disable SCE, See this: docs.angularjs/api/… – Matt Greer Commented Jan 9, 2014 at 14:24

2 Answers 2

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/2bvktbLr/1/

try to add ngSanitize as a dependency in your app.

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