Question

我收到此错误是因为其中一位用户在帖子中添加了<3

错误：[$ sanitize：badparse]清理程序无法解析以下html块：＆lt; 3

我编写了ng-bind-html ="Detail.details"

的代码

我希望他只被<a>标记并标记为<br />

这可能吗？

谢谢！

Answer 1

您可以创建过滤器来清理您的HTML。

我在其中使用了strip_tags函数 http://phpjs.org/functions/strip_tags/

angular.module('filters', []).factory('truncate', function () {
    return function strip_tags(input, allowed) {
      allowed = (((allowed || '') + '')
        .toLowerCase()
        .match(/<[a-z][a-z0-9]*>/g) || [])
        .join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
      var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
        commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
      return input.replace(commentsAndPhpTags, '')
        .replace(tags, function($0, $1) {
          return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
        });
    }
});

控制器：

angular.module('myApp', ['filters'])
.controller('IndexController', ['$scope', 'truncate', '$sce', function($scope, truncate, $sce){
  $scope.text="";

  $scope.$watch('text', function(){
    $scope.sanitized = $sce.trustAsHtml(truncate($scope.text, '<a><br>'));
  });
}]);

视图：

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

http://plnkr.co/edit/qOuvpSMvooC6jR0HxCNT?p=preview

Answer 2

要保留现有的ng-bind-html行为而不会崩溃，您可以捕获$sanitize:badparse例外。

ngBindHtml component内部使用ngSanitize service。将$sanitize注入控制器并捕获它。

这与$sce.trustAsHtml方法的优势在于$sanitize不会引入任何潜在的安全漏洞（例如，javascript注入）。

控制器（注入$sanitize）：

$scope.clean = function (string) {
    $scope.clean = function(string) {
        try {
            return $sanitize(string);
        } catch(e) {
            return;
        }
    };
};

可以使用最后已知良好值的缓存来改进此方法。

查看：

<div ng-bind-html="clean(body)"></div>

angularJS如何忽略某些HTML标记？

2 个答案: