如何在Angular 1.2+中使用$ sce.trustAsHtml(string)复制ng-bind-html-unsafe


226

ng-bind-html-unsafe 已在Angular 1.2中删除

我正在尝试实现需要使用的东西ng-bind-html-unsafe。在文档和github上,他们说:

绑定到$ sce.trustAsHtml(string)的结果时,ng-bind-html提供类似ng-html-bind-unsafe的行为(innerHTML的结果不进行消毒)。

你怎么做到这一点?


Answers:


245

应该是:

<div ng-bind-html="trustedHtml"></div>

加在您的控制器中:

$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

而不是旧的语​​法,您可以在其中$scope.html直接引用变量:

<div ng-bind-html-unsafe="html"></div>

正如一些评论者所指出的那样,$sce必须将其注入控制器中,否则会$sce undefined出现错误。

 var myApp = angular.module('myApp',[]);

 myApp.controller('MyController', ['$sce', function($sce) {
    // ... [your code]
 }]);

10
如何使用函数返回的值来执行此操作?<p ng-bind-html =“”> {{description(category.id)}} </ p>
dasper 2013年

2
不知道我是否正确,但是: <p ng-bind-html="trustedHtml"></p>$scope.trustedHtml = $sce.trustAsHtml(description(category.id));
Nenad

1
我爱你的回应!显然问题是我使用1.0.8。我有一个带有动态部分的表格,所以在更改时我想显示正确的描述。<p ng-bind-html="description(category.id)"></p>那么函数的最后一行:return $sce.trustAsHtml(value);
dasper

2
但是... var x = sce.trustAsHtml('foo'); var y = sce.trustAsHtml('foo'); x == y; false ...因此这不应该创建一个无限的摘要循环,因为您的函数返回了一个新对象?
2013年

25
还值得一提的是,需要将$ sce传递到控制器中,否则您将获得未定义的$ sce
isimmons 2013年

633

过滤

app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

用法

<ANY ng-bind-html="value | unsafe"></ANY>

1
为什么需要ngSanitize在这里?

2
@OliverJosephAsh,因为$ sce服务是在ngSanitize中定义的。它们分解了主要功能,因此我们仅需一点点使用角度,而不必总是使用整个框架。
克里斯·萨丁格

1
我一直在想这样的事情可能会对安全产生什么影响?我已经在另一个问题上要求进一步澄清。所有输入表示赞赏!
菲利普·布利2014年

9
@felix在1.2版中(当他们添加此功能时)默认情况下是作为核心(而不是)的一部分启用的ngSanitize,因此不需要ngSanitize
TheSharpieOne 2014年

2
这是角度小组的设计决定-这就是过滤器的实现方式-否则,它们将无法工作。之所以必须返回一个函数,是因为角度会延迟处理,直到“找到合适的时刻”。否则,框架将不会对何时调用过滤器产生任何影响。这是好事,也有坏事,但是据我所知-有必要应对角度的棘手处理。此处的更多信息:docs.angularjs.org/api/ng/provider/$filterProvider
克里斯(Chris)

16

就我个人而言,在进入数据库之前,我会使用一些PHP库对所有数据进行清理,因此不需要我使用另一个XSS过滤器。

从AngularJS 1.0.8

directives.directive('ngBindHtmlUnsafe', [function() {
    return function(scope, element, attr) {
        element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe);
        scope.$watch(attr.ngBindHtmlUnsafe, function ngBindHtmlUnsafeWatchAction(value) {
            element.html(value || '');
        });
    }
}]);

使用方法:

<div ng-bind-html-unsafe="group.description"></div>

禁用$sce

app.config(['$sceProvider', function($sceProvider) {
    $sceProvider.enabled(false);
}]);

我不清楚两个示例之间有什么区别。我们的团队成员之一遇到一个问题,即他们拥有System.out.println(&quot; Hello World!&rdquo;);。在数据库中。她正在使用<div data-ng-bind-html =“ text”> </ div>,它在页面上显示为:System.out.println('Hello World!'rdquo;);。您是说使用ngBindHtmlUnsafe指令可以解决此问题吗?
Alan2 2013年

@Alan我相信,如果可以的话,它会起作用<script>System.out.printIn("Hello World!");</script>,还没有亲自尝试过,因为我的PHP从用户输入中删除了所有JS。我删除了我的第二个示例,因为Angular的本机示例在各个方面都比使用该示例优越。
Michael J. Calkins 2013年

如何为summernote编辑器执行此操作,最初,我将从服务器获取json数据(包含html),在summernote中,我正在使用ng-model。如何使代码可信地显示在summernote编辑器中
codelearner16

8

var line = "<label onclick="alert(1)">aaa</label>";

1.使用过滤器

app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

使用(html):

<span ng-bind-html="line | unsafe"></span>
==>click `aaa` show alert box

2.使用ngSanitize:更安全

包括 angular-sanitize.js

<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

添加ngSanitize根角度应用程序

var app = angular.module("app", ["ngSanitize"]);

使用(html):

<span ng-bind-html="line"></span>
==>click `aaa` nothing happen

如何为summernote编辑器执行此操作,最初,我将从服务器获取json数据(包含html),在summernote中,我正在使用ng-model。如何使代码可信地显示在summernote编辑器中
codelearner16

7

只需创建过滤器就可以解决问题。(为Angular 1.6提供了答案)

.filter('trustHtml', [
        '$sce',
        function($sce) {
            return function(value) {
                return $sce.trustAs('html', value);
            }
        }
    ]);

并在html中使用它,如下所示。

<h2 ng-bind-html="someScopeValue | trustHtml"></h2>

这可以通过以下方式解决错误:未知提供者:eProvider <-e <-unsafeFilter”
Valera

3

如果您希望恢复旧的指令,可以将其添加到您的应用中:

指示:

directives.directive('ngBindHtmlUnsafe', ['$sce', function($sce){
    return {
        scope: {
            ngBindHtmlUnsafe: '=',
        },
        template: "<div ng-bind-html='trustedHtml'></div>",
        link: function($scope, iElm, iAttrs, controller) {
            $scope.updateView = function() {
                $scope.trustedHtml = $sce.trustAsHtml($scope.ngBindHtmlUnsafe);
            }

            $scope.$watch('ngBindHtmlUnsafe', function(newVal, oldVal) {
                $scope.updateView(newVal);
            });
        }
    };
}]);

用法

<div ng-bind-html-unsafe="group.description"></div>

来源-https://github.com/angular-ui/bootstrap/issues/813


表现不一样。
Casey 2014年

如何为summernote编辑器执行此操作,最初,我将从服务器获取json数据(包含html),在summernote中,我正在使用ng-model。如何使代码可信地显示在summernote编辑器中
codelearner

3

的JavaScript

$scope.get_pre = function(x) {
    return $sce.trustAsHtml(x);
};

的HTML

<pre ng-bind-html="get_pre(html)"></pre>

如何为summernote编辑器执行此操作,最初,我将从服务器获取json数据(包含html),在summernote中,我正在使用ng-model。如何使代码可信地显示在summernote编辑器中
codelearner16

1

对于Rails(至少在我来说是这样),如果您使用的是angularjs-rails gem,请记住要添加sanitize模块

//= require angular
//= require angular-sanitize

然后将其加载到您的应用中...

var myDummyApp = angular.module('myDummyApp', ['ngSanitize']);

然后,您可以执行以下操作:

在模板上:

%span{"ng-bind-html"=>"phone_with_break(x)"}

最后:

$scope.phone_with_break = function (x) {
  if (x.phone != "") {
   return x.phone + "<br>";
  }
  return '';
}

如何为summernote编辑器执行此操作,最初,我将从服务器获取json数据(包含html),在summernote中,我正在使用ng-model。如何使代码可信地显示在summernote编辑器中
codelearner


0
my helpful code for others(just one aspx to do text area post)::

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication45.WebForm1" %>

<!DOCTYPE html>

    enter code here

<html ng-app="htmldoc" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="angular.min.js"></script>
    <script src="angular-sanitize.min.js"></script>
    <script>
        angular.module('htmldoc', ['ngSanitize']).controller('x', function ($scope, $sce) {
            //$scope.htmlContent = '<script> (function () { location = \"http://moneycontrol.com\"; } )()<\/script> In last valid content';
            $scope.htmlContent = '';
            $scope.withoutSanitize = function () {
                return $sce.getTrustedHtml($scope.htmlContent);
            };
            $scope.postMessage = function () {
                var ValidContent = $sce.trustAsHtml($scope.htmlContent);

                //your ajax call here
            };
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        Example to show posting valid content to server with two way binding
        <div ng-controller="x">
            <p ng-bind-html="htmlContent"></p>
            <textarea ng-model="htmlContent" ng-trim="false"></textarea>
            <button ng-click="postMessage()">Send</button>
        </div>
    </form>
</body>
</html>

0
$scope.trustAsHtml=function(scope)
{
    return $sce.trustAsHtml(scope);
}
<p class="card-text w-100" ng-bind-html="trustAsHtml(note.redoq_csd_product_lead_note)"></p>

3
请不要仅将代码发布为答案,还应提供解释,说明您的代码的作用以及如何解决问题。带有解释的答案通常质量较高,并且更有可能吸引投票。
Mark Rotteveel
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.