ng-bind-html-unsafe在Angular 1.2中被移除
我试图实现的东西,我需要使用ng-bind-html-不安全。在文档和github提交中,他们说:
ng-bind-html提供了ng-html-bind-不安全的行为(innerHTML的结果没有 当绑定到$sce.trustAsHtml(string)的结果时,sanitization)。
怎么做呢?
ng-bind-html-unsafe在Angular 1.2中被移除
我试图实现的东西,我需要使用ng-bind-html-不安全。在文档和github提交中,他们说:
ng-bind-html提供了ng-html-bind-不安全的行为(innerHTML的结果没有 当绑定到$sce.trustAsHtml(string)的结果时,sanitization)。
怎么做呢?
当前回答
$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>
其他回答
JavaScript
$scope.get_pre = function(x) {
return $sce.trustAsHtml(x);
};
HTML
<pre ng-bind-html="get_pre(html)"></pre>
这应该是:
<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]
}]);
$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>
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>
在angular的根应用中添加ngSanitize
var app = angular.module("app", ["ngSanitize"]);
使用(html):
<span ng-bind-html="line"></span>
==>click `aaa` nothing happen
就我个人而言,在进入数据库之前,我会用一些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);
}]);