Làm thế nào để bạn sử dụng $ sce.trustAsHtml (chuỗi) để sao chép ng-bind-html-không an toàn trong Angular 1.2+

ng-bind-html-unsafe đã bị xóa trong Angular 1.2

Tôi đang cố gắng thực hiện một cái gì đó mà tôi cần sử dụng ng-bind-html-unsafe. Trong các tài liệu và trên github cam kết họ nói:

ng-bind-html cung cấp hành vi giống như ng-html-bind-không an toàn (bên trongHTML là kết quả mà không cần khử trùng) khi bị ràng buộc với kết quả của $ sce.trustAsHtml (chuỗi).

Làm thế nào để bạn làm điều này?

Đó phải là:

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

cộng trong bộ điều khiển của bạn:

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

thay vì cú pháp cũ, nơi bạn có thể tham chiếu $scope.htmlbiến trực tiếp:

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

Như một số bình luận đã chỉ ra, $scephải được đưa vào bộ điều khiển, nếu không bạn sẽ gặp $sce undefinedlỗi.

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

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

Bộ lọc

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

Sử dụng

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

Cá nhân tôi vệ sinh tất cả dữ liệu của mình với một số thư viện PHP trước khi đi vào cơ sở dữ liệu để không cần bộ lọc XSS khác cho tôi.

Từ 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 || '');
        });
    }
}]);

Để sử dụng:

<div ng-bind-html-unsafe="group.description"></div>

Để tắt $sce:

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

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

1. sử dụng bộ lọc

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

sử dụng (html):

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

2. sử dụng ngSanitize: an toàn hơn

bao gồm angular-sanitize.js

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

thêm ngSanitizevào ứng dụng góc gốc

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

sử dụng (html):

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

Đơn giản chỉ cần tạo một bộ lọc sẽ thực hiện các mẹo. (Đã trả lời cho góc 1.6)

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

Và sử dụng như sau trong html.

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

Nếu bạn muốn quay lại chỉ thị cũ, bạn có thể thêm nó vào ứng dụng của mình:

Chỉ thị:

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);
            });
        }
    };
}]);

Sử dụng

<div ng-bind-html-unsafe="group.description"></div>

Nguồn - 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>

Đối với Rails (ít nhất là trong trường hợp của tôi) nếu bạn đang sử dụng đá quý angularjs-rails , hãy nhớ thêm mô-đun khử trùng

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

Và sau đó tải nó lên trong ứng dụng của bạn ...

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

Sau đó, bạn có thể làm như sau:

Trên mẫu:

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

Và cuối cùng:

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