ng-bind-html-unsafe 在 Angular 1.2 中被删除
我正在尝试实现一些我需要使用ng-bind-html-unsafe 的东西。在文档和 github 提交中，他们说：
ng-bind-html 提供类似 ng-html-bind-unsafe 的行为（innerHTML 的结果没有 sanitization) 绑定到 $sce.trustAsHtml(string) 的结果时。
你是怎么做到的？
【问题讨论】：
标签： angularjs
$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>
【讨论】：
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>
【讨论】：
只需创建一个过滤器就可以了。 （针对 Angular 1.6 回答）
.filter('trustHtml', [
'$sce',
function($sce) {
return function(value) {
return $sce.trustAs('html', value);
}
}
]);
并在 html 中按如下方式使用。
<h2 ng-bind-html="someScopeValue | trustHtml"></h2>
【讨论】：
应该是：
<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]
}]);
【讨论】：
{{description(category.id)}}
<p ng-bind-html="trustedHtml"></p> 和 $scope.trustedHtml = $sce.trustAsHtml(description(category.id));
<p ng-bind-html="description(category.id)"></p> 然后函数的最后一行：return $sce.trustAsHtml(value);
我个人在进入数据库之前会使用一些 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);
}]);
【讨论】：
<script>System.out.printIn("Hello World!");</script> 会起作用，我没有亲自尝试过，因为我的 PHP 从用户输入中删除了所有 JS。我删除了我的第二个示例，因为 Angular 的原生示例在各方面都非常出色，只需使用该示例即可。
var line = "<label onclick="alert(1)">aaa</label>";
app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
使用（html）：
<span ng-bind-html="line | unsafe"></span>
==>click `aaa` show alert box
包括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
【讨论】：
JavaScript
$scope.get_pre = function(x) {
return $sce.trustAsHtml(x);
};
HTML
<pre ng-bind-html="get_pre(html)"></pre>
【讨论】：
对于 Rails（至少在我的情况下），如果您使用 angularjs-rails gem，请记得添加清理模块
//= 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 '';
}
【讨论】：
过滤器
app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
用法
<ANY ng-bind-html="value | unsafe"></ANY>
【讨论】：
ngSanitize？
ngSanitize，因此不需要ngSanitize
如果您想恢复旧指令，可以将其添加到您的应用中：
指令：
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>
【讨论】：