Error: [$interpolate:interr] http://errors.angularjs.org/1.3.15/$interpolate/interr? and $sce

Problem:
 When trying to load an iframe with url value fetched from controller, interpolate error occured as follows,


Error: [$interpolate:interr] http://errors.angularjs.org/1.3.15/$interpolate/interr?p0=%7B%7BembedUrl%7D…%2Finsecurl%3Fp0%3Dhttps%253A%252F%252Faishwaryavaishno.wordpress.com%252F
  at Error (native)
  at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js:6:417
  at v (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js:88:110)
  at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js:109:321
  at Object. (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js:107:493)
  at n.$digest (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js:123:221)
  at n.$apply (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js:126:293)
  at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js:17:479
  at Object.e [as invoke] (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js:36:315)
  at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js:17:400)


Reasoning:
 Interpolate means , to alter/corrupt by adding something new. Angular assumed url loaded in iframe to be a corrupt one.

Solution:
 This problem can be solved by using $sce service(Strict Contextual Escaping) with which we can mark the object(url) as safe.


app.controller("DemoController", function ($scope,$sce) {
   url='https://aishwaryavaishno.wordpress.com/'
   $scope.embedUrl=$sce.trustAsResourceUrl(url)
})


  In the above code, url that has to be fetched in iframe is passed through $sce.trustAsResourceUrl(url). It returns an object that is trusted by angular which can further be used in ng-src.

 Did you know that, the above problem can also be solved by whitelisting url.

Reference:
https://docs.angularjs.org/api/ng/service/$sce

Advertisements