Angular:我可以完全禁用消毒吗?

Tom*_*mas 19 javascript angularjs

是否可以完全禁用HTML的清理?

我想要实现的是在我的控制器中:

$scope.greeting = '<h2>Hello World</h2>'
Run Code Online (Sandbox Code Playgroud)

在我看来

{{greeting}}
Run Code Online (Sandbox Code Playgroud)

我不能(也不想)使用ng-bind-html等,我想一起禁用消毒.

只是为了给出一些更多的上下文 - 我正在准备简单的"框架环绕"来开发特定系统的模板.

当您为此系统开发模板时,他们有预先定义的片段,您可以通过编写"{{something}}"来放置在页面上,但它不是在角度上运行(可能是小胡子或其他东西).

现在模板只能在线开发,这是非常用户不友好的过程.因此,我设置了角度与相应路线等的简单项目,因此每个人都可以在他们的机器上开发模板,然后只需将其复制到系统.

这就是为什么在模板文件中它不应该以角度完成它,它只是尽可能接近它们的系统.

最后一点 - 我尝试过:

myApp.config(['$sceProvider',function($sceProvider){
    $sceProvider.enabled(false);
}]);
Run Code Online (Sandbox Code Playgroud)

没有为我做任何事

Dav*_*ich 9

是的,您可以关闭SCE,但这不会导致您的字符串插入到HTML中

使用您的场景:

  $scope.movie = {title:"<h1>Egghead.io AngularJS, Binding</h1>",
 src:"http://www.youtube.com/embed/Lx7ycjC8qjE"};
Run Code Online (Sandbox Code Playgroud)

并直接插入标题而不使用 ng-bind-html="movie.title"

<p>{{movie.title}}</p>
Run Code Online (Sandbox Code Playgroud)

会产生这个

<h1>Egghead.io AngularJS Binding</h1>
Run Code Online (Sandbox Code Playgroud)

直插值似乎已经消毒,但实际上并没有编译.

除非在指令中编译,否则带有HTML的插值字符串将被视为字符串.

其他框架倾向于"基于字符串"(它们直接提供浏览器),而AngularJS是"基于DOM的",它编译HTML并使用范围和观察事件积极地管理它.Martin Fowler将此称为模板视图与转换视图.

HTML可以在Directives中编译,但只能在标记和控制器中进行插值


我创建了2个试图访问"不安全网址"的掠夺者,这意味着我插入了一个网址ng-src而不使用$sce.trustAs

图表1: 配置期间禁用了Plunker 1 SCE

标记插入"不安全的网址":

    <p>{{movie.title}}</p>
    <iframe class="youtube-player" type="text/html" width="640" height="385" ng-src="{{movie.src}}" allowfullscreen frameborder="0">
</iframe>
Run Code Online (Sandbox Code Playgroud)

应用程序禁用 $sceProvider

var app = angular.module('plunker', ['ngSanitize']);
app.config(['$sceProvider',function($sceProvider){
    $sceProvider.enabled(false);
}]);
app.controller('MainCtrl', function($scope, $sce) {

  $scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});
Run Code Online (Sandbox Code Playgroud)

插入"不安全"URL时没有错误.显示视频.


图表2:Plunker 2 app.config使用默认SCE设置注释掉了

var app = angular.module('plunker', ['ngSanitize']);
//app.config(['$sceProvider',function($sceProvider){
//    $sceProvider.enabled(false);
//}]);
app.controller('MainCtrl', function($scope, $sce) {

  $scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});
Run Code Online (Sandbox Code Playgroud)

错误:

错误:[$ interpolate:interr]无法插值:{{movie.src}}错误:[$ sce:insecurl]阻止从$ sceDelegate策略允许的url加载资源.网址:http://www.youtube.com/embed/Lx7ycjC8qjE