Posts Tagged ‘Strict Contextual Escaping’
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