ด้วยการลบ ng-bind-html-unsafe ฉันจะฉีด HTML ได้อย่างไร

ฉันพยายามใช้$sanitizeผู้ให้บริการและng-bind-htm-unsafeคำสั่งเพื่อให้ตัวควบคุมของฉันแทรก HTML ลงใน DIV

อย่างไรก็ตามฉันไม่สามารถใช้งานได้

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

ฉันค้นพบว่าเป็นเพราะมันถูกลบออกจาก AngularJS (ขอบคุณ)

แต่ถ้าไม่มีng-bind-html-unsafeฉันจะได้รับข้อผิดพลาดนี้:

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

1. คุณต้องตรวจสอบให้แน่ใจว่าโหลด sanitize.js แล้ว ตัวอย่างเช่นโหลดจากhttps://ajax.googleapis.com/ajax/libs/angularjs/ [คัดลอกอย่างรวดเร็ว _ ย้อนกลับไปยังด้านบนสุดของหน้า / นาที]
2. คุณต้องรวมngSanitizeโมดูลไว้กับคุณapp เช่น:var app = angular.module('myApp', ['ngSanitize']);
3. คุณเพียงแค่ต้องผูกกับเนื้อหาng-bind-htmlต้นฉบับ htmlไม่จำเป็นต้องทำอะไรอย่างอื่นในคอนโทรลเลอร์ของคุณ การแยกและการแปลงจะทำโดยอัตโนมัติโดยngBindHtmlคำสั่ง (อ่านHow does it workหัวข้อนี้: $ sce ) ดังนั้นในกรณีของคุณ<div ng-bind-html="preview_data.preview.embed.html"></div>จะทำงาน

แทนที่จะประกาศฟังก์ชั่นในขอบเขตของคุณตามที่ Alex แนะนำคุณสามารถแปลงเป็นตัวกรองอย่างง่าย:

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

จากนั้นคุณสามารถใช้สิ่งนี้:

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

และนี่คือตัวอย่างการทำงาน: http://jsfiddle.net/leeroy/6j4Lg/1/

คุณระบุว่าคุณกำลังใช้ Angular 1.2.0 ... เป็นหนึ่งในความคิดเห็นอื่น ๆ ที่ระบุว่าng-bind-html-unsafeเลิกใช้แล้ว

คุณจะต้องทำสิ่งนี้แทน:

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

ในตัวควบคุมของคุณฉีด$sceบริการและทำเครื่องหมาย HTML เป็น "เชื่อถือได้":

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

โปรดทราบว่าคุณจะต้องใช้ 1.2.0-rc3 หรือใหม่กว่า (พวกเขาแก้ไขข้อผิดพลาดใน rc3 ที่ทำให้ "ผู้เฝ้าดู" ทำงานไม่ถูกต้องบน HTML ที่เชื่อถือได้)

สำหรับฉันทางออกที่ง่ายและยืดหยุ่นที่สุดคือ:

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

และเพิ่มฟังก์ชั่นให้กับคอนโทรลเลอร์ของคุณ:

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

อย่าลืมเพิ่มลง$sceในการเริ่มต้นของคอนโทรลเลอร์

ทางออกที่ดีที่สุดสำหรับสิ่งนี้ในความคิดของฉันคือ:

1. สร้างตัวกรองที่กำหนดเองซึ่งสามารถอยู่ในไฟล์ common.module.js ตัวอย่างเช่นใช้ผ่านแอพของคุณ:

   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. การใช้งาน:

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

ตอนนี้ - ฉันไม่เห็นว่าทำไมคำสั่งng-bind-htmlไม่ได้trustAsHtmlเป็นส่วนหนึ่งของฟังก์ชั่นของมัน - ดูเหมือนจะบ้าสำหรับฉันที่มันไม่ได้

อย่างไรก็ตาม - นั่นคือวิธีที่ฉันทำ - 67% ของเวลาใช้งานได้ตลอดเวลา

คุณสามารถสร้างการผูก HTML ที่ไม่ปลอดภัยแบบง่ายของคุณเองได้แน่นอนถ้าคุณใช้การป้อนข้อมูลผู้ใช้อาจมีความเสี่ยงด้านความปลอดภัย

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

คุณไม่จำเป็นต้องใช้ {{}} ภายใน ng-bind-html-unsafe:

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

นี่คือตัวอย่าง: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

ตัวดำเนินการ {{}} เป็นเพียงชวเลขสำหรับ ng-bind ดังนั้นสิ่งที่คุณพยายามที่จะรวมเข้าไปในการรวมภายในซึ่งไม่ได้ผล

ฉันมีปัญหาที่คล้ายกัน ยังไม่สามารถรับเนื้อหาจากไฟล์มาร์กอัปของฉันที่โฮสต์บน Github

หลังจากตั้งค่ารายการที่อนุญาต (พร้อมโดเมน github ที่เพิ่ม) ให้กับ $ sceDelegateProvider ใน app.js มันทำงานได้อย่างมีเสน่ห์

คำอธิบาย: การใช้รายการที่อนุญาตแทนการตัดคำที่เชื่อถือได้หากคุณโหลดเนื้อหาจาก URL อื่น

เอกสาร: $ sceDelegateProviderและngInclude (สำหรับการดึงการรวบรวมและการรวมส่วน HTML ภายนอก)

การปิดการใช้งานบริบทอย่างเข้มงวดสามารถปิดใช้งานได้ทั้งหมดช่วยให้คุณสามารถใช้ html ng-html-bindได้ นี่เป็นตัวเลือกที่ไม่ปลอดภัย แต่มีประโยชน์เมื่อทำการทดสอบ

ตัวอย่างจากเอกสารประกอบ AngularJS เมื่อ$sce :

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

แนบส่วนการตั้งค่าด้านบนเพื่อ app ของคุณจะช่วยให้คุณสามารถฉีดเข้าไปใน HTML ng-html-bindแต่เป็นข้อสังเกตเอกสาร:

SCE มอบสิทธิประโยชน์ด้านความปลอดภัยมากมายสำหรับค่าใช้จ่ายในการเข้ารหัสเล็กน้อย จะยากกว่ามากหากจะปิดใช้งานแอปพลิเคชัน SCE และอาจทำให้ปลอดภัยด้วยตัวคุณเองหรือเปิดใช้งาน SCE ในภายหลัง มันอาจสมเหตุสมผลที่จะต้องปิดการใช้งาน SCE สำหรับกรณีที่คุณมีรหัสที่มีอยู่จำนวนมากซึ่งเขียนขึ้นก่อนที่ SCE จะเปิดตัวและคุณกำลังโยกย้ายโมดูลในแต่ละครั้ง

คุณสามารถใช้ตัวกรองแบบนี้

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

การใช้

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

สามารถใช้สำหรับทรัพยากรประเภทอื่น ๆ เช่นลิงค์แหล่งข้อมูลสำหรับ iframes และประเภทอื่น ๆ ที่ประกาศไว้ที่นี่