angularjs $http document load into an iFrame

Question

I have read through two dozen references trying to get $http.get to pull a document from my server and load it into an iFrame. The call to the document works and its all stored in data - and I can see the HTML rendered in the Preview tab of Chrome's Devtools network section. The page data/html is there, but I can't get it to render in the iFrame.

App config:

.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://api.example.com/v1/**'
  ]) ;
})

In the Service:

.factory("eventService",function($http) {

  var headers = {
    'Pragma' : 'no-cache', 
    'Expires' : -1, 
    'Cache-Control' : 'no-cache,must-revalidate', 
    'Content-Type' : 'application/json',        
    'X-Requested-With' : 'com.example',
    Authorization : 'Token ' +clientToken[0]
  } ;

  function eventShow(dataObj) {
    //dataObj[0].fullVer = appVersion.replaceAll(".","") ;   
    var baseUrl = "https://api.example.com/v1/events/eventsPage.html?e="+dataObj.e ;
    
    var req = {
      method: 'GET',
      url: baseUrl,
      timeout:30,
      headers: headers
    }

    return $http(req)
    .then(function(response){
      if (response.status == 200) {
        return {"success":true,data:response.data} ;
      } else {
        // received an improper response
        return {"success":false,error:response.status} ;
      }
    }
   });
  }

  return {
    eventShow(eventID) {
      console.log("tBuy: "+eventID) ;
      var dataObj = [{"e":eventID}] ;
      return eventShow(dataObj) ;
  }
})

In the Controller:

  eventService.eventShow($scope.club.ceID)
  .then(function(res) {
    if (res.success == true) {
      console.log(res.data) ;
      $scope.eventItem.url = $sce.trustAsHtml(res.data);
      //$scope.eventItem.url = "data:text/html;charset=utf-8," + escape(res.data);
      $scope.eventItem.isLogin = 1 ;        
    }
  }) ; 

The template HTML:

  <iframe id="eventIframe" ng-src="{{eventItem.url}}" style="width:100%;height:100%;"</iframe>

In the controller, the console.log prints the entire requested page - so I know its loaded to this point, but I can't get it to display/render in the iframe.

In the controller, when using $scope.eventItem.url = $sce.trustAsHtml(res.data); - nothing loads into the iFrame, there is no error produced, but behind the scenes I see my entire app reload with every JS file (app JS and plugin JS) as well as all my Templates load again and the app functionally crashes.

And when I change the controller to use $scope.eventItem.url = "data:text/html;charset=utf-8," + escape(res.data); - I get this error: Blocked loading resource from url not allowed by $sceDelegate policy - but the URL I am passing into the $http call is listed in my $sceDelegate

Answer 1

It took me a while to find, everything was correct except how I was attaching the HTML document to the iFrame:

I changed my iframe from:

  <iframe id="eventIframe" ng-src="{{eventItem.url}}" style="width:100%;height:100%;"</iframe>

To:

  <iframe id="eventIframe" ng-attr-srcdoc="{{eventItem.url}}" style="width:100%;height:100%;"</iframe>

And everything worked perfectly