在 AngularJS 中禁用严格上下文转义 (SCE)

Question

我正试图在 AngularJS 中禁用 SCE。根据 documentation 这是需要做的：

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

这是我的 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>'

        };


    }

]);

我仍然收到错误消息：

[$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.

导致错误的 html 模板：

 <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>

我觉得我遗漏了一些简单的语法错误。请帮忙！

Answer 1

首先你应该检查这个，来自 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.

好吧，我认为在这种情况下您不需要禁用 SCE，而且，例如，如果您使用 ngBindHtml 来渲染一些 HTML, AngularJS 将抛出错误，除非分配给 ngBindHtml 的范围变量被 $sce.trustAsHtml.

包裹

但是，让我们回到错误，这不言而喻：

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

你只需要以正确的方式连接它，就像这样：

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

希望对您有所帮助！！

Answer 2

我找到了 this。显然，这不是 SCE 问题。这是 Angular 如何与 Html5 视频相处的问题来源：标签。

如果只有一个视频源，则 HTML 看起来像这样：

<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>

而不是这个：

<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>

问题解决。

当然，@developer033 是正确的，我最初的连接是错误的。

在 AngularJS 中禁用严格上下文转义 (SCE)

Disabling Strict Contextual Escaping (SCE) in AngularJS

javascript

syntax

angularjs

angularjs-config

Can I disable SCE completely?