Como você usa $ sce.trustAsHtml (string) para replicar ng-bind-html-unsafe no Angular 1.2+

ng-bind-html-unsafe foi removido no Angular 1.2

Estou tentando implementar algo em que preciso usar ng-bind-html-unsafe. Nos documentos e no github, eles dizem:

ng-bind-html fornece um comportamento semelhante a ng-html-bind-inseguro (innerHTML é o resultado sem higienização) quando associado ao resultado de $ sce.trustAsHtml (string).

Como você faz isso?

Isso deve ser:

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

mais no seu controlador:

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

em vez da sintaxe antiga, onde você pode fazer referência $scope.htmldiretamente à variável:

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

Como vários comentadores apontaram, $scedeve ser injetado no controlador, caso contrário, você receberá um $sce undefinederro.

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

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

Filtro

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

Uso

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

Pessoalmente, desinfecto todos os meus dados com algumas bibliotecas PHP antes de entrar no banco de dados, para que não haja necessidade de outro filtro XSS para mim.

From 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 desativar $sce:

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

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

1. use filtro

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

usando (html):

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

2. use ngSanitize: mais seguro

incluir angular-sanitize.js

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

adicionar ngSanitizeaplicativo angular raiz

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

usando (html):

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

Simplesmente criar um filtro fará o truque. (Respondido para Angular 1.6)

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

E use isso da seguinte forma no html.

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

Se você deseja a diretiva antiga de volta, pode adicioná-la ao seu aplicativo:

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>

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

Javascript

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

HTML

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

Para Rails (pelo menos no meu caso), se você estiver usando a gem angularjs-rails , lembre-se de adicionar o módulo sanitize

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

E carregue-o no seu aplicativo ...

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

Então você pode fazer o seguinte:

No modelo:

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

E eventualmente:

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

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>

$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>