Disabling Strict Contextual Escaping (SCE) in AngularJS

Question

I'm trying to disable SCE in AngularJS. According to the documentation this is what needs to be done:

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects.
  $sceProvider.enabled(false);
});

This is my app.config.js:

angular.module('yapoApp').config(['$sceProvider', '$locationProvider', '$routeProvider',  '$httpProvider',
    function config($sceProvider, $locationProvider, $routeProvider,  $httpProvider) {

        // disable SCE completely (https://docs.angularjs.org/api/ng/service/$sce)
        $sceProvider.enabled(false);

        $locationProvider.hashPrefix('!');

        $routeProvider.when('/actors', {
            template: '<actor-list></actor-list>'
        }).when('/actors/:actorId', {
            template: '<actor-detail></actor-detail>'
        }).when('/movies/', {
            template: '<movie-list></movie-list>'
        }).when('/movies/:movieId', {
            template: '<movie-detail></movie-detail>'
        }).otherwise('/'), {
            template: '<br><br><br><br><h1> This is temp index</h1>'

        };


    }

]);

And I'm still getting an error:

[$interpolate:noconcat] Error while interpolating: /static/movies/{{ $ctrl.movie.id }}/sample/sample.mp4 Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required.

The html template causing the error:

 <video width="{{ $ctrl.videoWidth }}px" controls>
        <source ng-src="/static/movies/{{ $ctrl.movie.id }}/sample/sample.mp4">

        Your browser does not support the video tag.
    </video>

I feel like I'm missing some simple syntax error. Please help!

Answer 1

First you should check this, from doc:

Can I disable SCE completely?

Yes, you can. However, this is strongly discouraged. SCE gives you a lot of security benefits for little coding overhead. It will be much harder to take an SCE disabled application and either secure it on your own or enable SCE at a later stage. It might make sense to disable SCE for cases where you have a lot of existing code that was written before SCE was introduced and you're migrating them a module at a time.

Well, I don't think you need to disable SCE in this case, and also, for example, if you use ngBindHtml to render some HTML, AngularJS will throw an error unless the scope variable assigned to ngBindHtml is wrapped with $sce.trustAsHtml.

But, let's back to the error, which one speaks for itself:

Error while interpolating: /static/movies/{{ $ctrl.movie.id }}/sample/sample.mp4

You just need to concatenate it in the right way, like this:

<source ng-src="{{'/static/movies/' + $ctrl.movie.id + '/sample/sample.mp4'}}">

Hope it helps!!

Answer 2

I found this. Apparently, it's not an SCE issue. It's an issue with how Angular gets along with Html5 Video "source: tag.

If there is only one video source, having the HTML look like this:

<video src="ng-src="{{'/static/movies/' + $ctrl.movie.id +  '/sample/sample.mp4'}}" width="{{ $ctrl.videoWidth }}px" controls>    
        Your browser does not support the video tag.
</video>

Instead of this:

<video width="{{ $ctrl.videoWidth }}px" controls>
        <source ng-src="{{'/static/movies/' + $ctrl.movie.id +  '/sample/sample.mp4'}}">

        Your browser does not support the video tag.
</video>

Solves the problem.

Of course, @developer033 was correct, and my initial concatenation was wrong.