Với ng-bind-html-không an toàn bị xóa, làm cách nào để tôi thêm HTML?

Tôi đang cố gắng sử dụng $sanitizenhà cung cấp và ng-bind-htm-unsafechỉ thị để cho phép bộ điều khiển của tôi đưa HTML vào DIV.

Tuy nhiên, tôi không thể làm cho nó hoạt động.

<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>

Tôi phát hiện ra rằng đó là vì nó đã bị xóa khỏi AngularJS (cảm ơn).

Nhưng không có ng-bind-html-unsafe, tôi nhận được lỗi này:

http://errors.angularjs.org/undained/$sce/unsafe

1. Bạn cần đảm bảo rằng sanitize.js đã được tải. Ví dụ: tải nó từ https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION[/angular-sanitize.min.js
2. bạn cần bao gồm ngSanitizemô-đun trên app ví dụ:var app = angular.module('myApp', ['ngSanitize']);
3. bạn chỉ cần liên kết với nội dung ng-bind-htmlban đầu html. Không cần phải làm bất cứ điều gì khác trong bộ điều khiển của bạn. Việc phân tích cú pháp và chuyển đổi được tự động thực hiện bởi ngBindHtmlchỉ thị. (Đọc How does it workphần này: $ sce ). Vì vậy, trong trường hợp của bạn <div ng-bind-html="preview_data.preview.embed.html"></div>sẽ làm việc.

Thay vì khai báo một hàm trong phạm vi của bạn, như được đề xuất bởi Alex, bạn có thể chuyển đổi nó thành một bộ lọc đơn giản:

angular.module('myApp')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

Sau đó, bạn có thể sử dụng nó như thế này:

<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>

Và đây là một ví dụ hoạt động: http://jsfiddle.net/leeroy/6j4Lg/1/

Bạn đã chỉ ra rằng bạn đang sử dụng Angular 1.2.0 ... là một trong những ý kiến ​​khác được chỉ ra, ng-bind-html-unsafeđã không được chấp nhận.

Thay vào đó, bạn sẽ muốn làm một cái gì đó như thế này:

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

Trong bộ điều khiển của bạn, tiêm $scedịch vụ và đánh dấu HTML là "đáng tin cậy":

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
  // ...
  $scope.preview_data.preview.embed.htmlSafe = 
     $sce.trustAsHtml(preview_data.preview.embed.html);
}

Lưu ý rằng bạn sẽ muốn sử dụng 1.2.0-rc3 hoặc mới hơn. (Họ đã sửa một lỗi trong RC3 khiến "người theo dõi" không thể hoạt động chính xác trên HTML đáng tin cậy.)

Đối với tôi, giải pháp đơn giản và linh hoạt nhất là:

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

Và thêm chức năng vào bộ điều khiển của bạn:

$scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);
}

Đừng quên thêm $scevào khởi tạo bộ điều khiển của bạn.

Theo tôi, giải pháp tốt nhất cho vấn đề này là:

1. Tạo một bộ lọc tùy chỉnh có thể có trong tệp common.module.js - được sử dụng thông qua ứng dụng của bạn:

   var app = angular.module('common.module', []);
   
   // html filter (render text as html)
   app.filter('html', ['$sce', function ($sce) { 
       return function (text) {
           return $sce.trustAsHtml(text);
       };    
   }])

2. Sử dụng:

   <span ng-bind-html="yourDataValue | html"></span>

Bây giờ - tôi không hiểu tại sao lệnh ng-bind-htmlkhông phải trustAsHtmllà một phần của chức năng của nó - có vẻ hơi khó hiểu với tôi rằng nó không

Dù sao đi nữa - đó là cách tôi làm - 67% thời gian, nó hoạt động mọi lúc.

Bạn có thể tạo ràng buộc html không an toàn đơn giản của riêng bạn, tất nhiên nếu bạn sử dụng đầu vào của người dùng thì đó có thể là một rủi ro bảo mật.

App.directive('simpleHtml', function() {
  return function(scope, element, attr) {
    scope.$watch(attr.simpleHtml, function (value) {
      element.html(scope.$eval(attr.simpleHtml));
    })
  };
})

Bạn không cần sử dụng {{}} bên trong ng-bind-html-không an toàn:

<div ng-bind-html-unsafe="preview_data.preview.embed.html"></div>

Dưới đây là một ví dụ: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

Toán tử {{}} về cơ bản chỉ là một tốc ký cho ng-bind, vì vậy những gì bạn đã cố gắng tạo ra một ràng buộc bên trong một ràng buộc, không hoạt động.

Tôi đã có một vấn đề tương tự. Vẫn không thể lấy nội dung từ các tệp markdown của tôi được lưu trữ trên github.

Sau khi thiết lập danh sách trắng (có thêm tên miền github) vào $ sceDelegateProvider trong app.js, nó hoạt động như một bùa mê.

Mô tả: Sử dụng danh sách trắng thay vì gói như tin cậy nếu bạn tải nội dung từ một url khác.

Tài liệu: $ sceDelegateProvider và ngInclude (để tìm nạp, biên dịch và bao gồm cả đoạn HTML bên ngoài)

Hoàn toàn thoát khỏi bối cảnh có thể bị vô hiệu hóa hoàn toàn, cho phép bạn tiêm html bằng cách sử dụng ng-html-bind. Đây là một tùy chọn không an toàn, nhưng hữu ích khi thử nghiệm.

Ví dụ từ tài liệu AngularJS về$sce :

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects.
  $sceProvider.enabled(false);
});

Đính kèm phần cấu hình ở trên vào ứng dụng của bạn sẽ cho phép bạn đưa html vào ng-html-bind, nhưng như tài liệu nhận xét:

SCE cung cấp cho bạn rất nhiều lợi ích bảo mật cho ít chi phí mã hóa. Sẽ khó khăn hơn nhiều khi lấy một ứng dụng bị vô hiệu hóa SCE và tự bảo mật nó hoặc bật SCE ở giai đoạn sau. Có thể có ý nghĩa để vô hiệu hóa SCE trong trường hợp bạn có nhiều mã hiện có được viết trước khi SCE được giới thiệu và bạn đang di chuyển chúng một mô-đun tại một thời điểm.

Bạn có thể sử dụng bộ lọc như thế này

angular.module('app').filter('trustAs', ['$sce', 
    function($sce) {
        return function (input, type) {
            if (typeof input === "string") {
                return $sce.trustAs(type || 'html', input);
            }
            console.log("trustAs filter. Error. input isn't a string");
            return "";
        };
    }
]);

sử dụng

<div ng-bind-html="myData | trustAs"></div>

nó có thể được sử dụng cho các loại tài nguyên khác, ví dụ liên kết nguồn cho iframe và các loại khác được khai báo ở đây