ejemplos - instalar angularjs
¿Cómo se usa $ sce.trustAsHtml(cadena) para replicar ng-bind-html-unsafe en Angular 1.2+ (9)
ng-bind-html-unsafe
se eliminó en Angular 1.2
Estoy tratando de implementar algo donde necesito usar ng-bind-html-unsafe
. En los documentos y en el compromiso de github dicen:
ng-bind-html proporciona un comportamiento similar a ng-html-bind-unsafe (innerHTML es el resultado sin saneamiento) cuando se vincula con el resultado de $ sce.trustAsHtml (cadena).
¿Cómo haces esto?
Eso debería ser:
<div ng-bind-html="trustedHtml"></div>
más en su controlador:
$scope.html = ''<ul><li>render me please</li></ul>'';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
en lugar de la sintaxis antigua, donde podría hacer referencia directamente a la variable $scope.html
:
<div ng-bind-html-unsafe="html"></div>
Como varios comentaristas señalaron, $sce
debe ser inyectado en el controlador, de lo contrario obtendrá $sce undefined
error $sce undefined
.
var myApp = angular.module(''myApp'',[]);
myApp.controller(''MyController'', [''$sce'', function($sce) {
// ... [your code]
}]);
JavaScript
$scope.get_pre = function(x) {
return $sce.trustAsHtml(x);
};
HTML
<pre ng-bind-html="get_pre(html)"></pre>
Para los rieles (al menos en mi caso) si está utilizando la gema angularjs-rails , recuerde agregar el módulo de desinfección
//= require angular
//= require angular-sanitize
Y luego cargarlo en su aplicación ...
var myDummyApp = angular.module(''myDummyApp'', [''ngSanitize'']);
Entonces puedes hacer lo siguiente:
En la plantilla:
%span{"ng-bind-html"=>"phone_with_break(x)"}
Y eventualmente:
$scope.phone_with_break = function (x) {
if (x.phone != "") {
return x.phone + "<br>";
}
return '''';
}
Personalmente, desinfecto todos mis datos con algunas bibliotecas de PHP antes de ingresar a la base de datos, por lo que no necesito otro filtro XSS para mí.
Desde 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 || '''');
});
}
}]);
Usar:
<div ng-bind-html-unsafe="group.description"></div>
Para deshabilitar $sce
:
app.config([''$sceProvider'', function($sceProvider) {
$sceProvider.enabled(false);
}]);
Si desea recuperar la directiva anterior, puede agregar esto a su aplicación:
Directiva:
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);
});
}
};
}]);
Uso
<div ng-bind-html-unsafe="group.description"></div>
Simplemente creando un filtro hará el truco. (Respondido para Angular 1.6)
.filter(''trustHtml'', [
''$sce'',
function($sce) {
return function(value) {
return $sce.trustAs(''html'', value);
}
}
]);
Y usa esto como sigue en el html.
<h2 ng-bind-html="someScopeValue | trustHtml"></h2>
var line = "<label onclick="alert(1)">aaa</label>";
1. usar filtro
app.filter(''unsafe'', function($sce) { return $sce.trustAsHtml; });
utilizando (html):
<span ng-bind-html="line | unsafe"></span>
==>click `aaa` show alert box
2. use ngSanitize: más seguro
incluye angular-sanitize.js
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
añadir ngSanitize
en la aplicación angular de la raíz
var app = angular.module("app", ["ngSanitize"]);
utilizando (html):
<span ng-bind-html="line"></span>
==>click `aaa` nothing happen
Filtrar
app.filter(''unsafe'', function($sce) { return $sce.trustAsHtml; });
Uso
<ANY ng-bind-html="value | unsafe"></ANY>
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>