คุณใช้ $ sce.trustAsHtml (สตริง) เพื่อทำซ้ำ ng-bind-html-unsafe ใน Angular 1.2+ อย่างไร

ng-bind-html-unsafe ถูกลบใน Angular 1.2

ng-bind-html-unsafeฉันพยายามที่จะดำเนินการบางสิ่งบางอย่างที่ฉันจำเป็นต้องใช้ ในเอกสารและ GitHub กระทำพวกเขาพูดว่า:

ng-bind-html ให้ ng-html-bind-unsafe เช่นพฤติกรรม (innerHTML ของผลลัพธ์โดยไม่มีการฆ่าเชื้อ) เมื่อถูกผูกไว้กับผลลัพธ์ของ $ sce.trustAsHtml (สตริง)

คุณจะทำสิ่งนี้ได้อย่างไร

นั่นควรจะเป็น:

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

บวกในตัวควบคุมของคุณ:

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

แทนไวยากรณ์เก่าที่คุณสามารถอ้างอิง$scope.htmlตัวแปรได้โดยตรง:

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

ในฐานะที่เป็นผู้แสดงความคิดเห็นหลายคนชี้ให้เห็น$sceจะต้องถูกฉีดเข้าไปในตัวควบคุมมิฉะนั้นคุณจะได้รับ$sce undefinedข้อผิดพลาด

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

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

กรอง

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

การใช้

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

โดยส่วนตัวแล้วฉันจะทำความสะอาดข้อมูลทั้งหมดของฉันด้วยห้องสมุด PHP ก่อนที่จะเข้าไปในฐานข้อมูลดังนั้นฉันไม่จำเป็นต้องใช้ตัวกรอง XSS อื่นอีก

จาก 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 || '');
        });
    }
}]);

ใช้:

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

วิธีปิดใช้งาน$sce:

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

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

1. ใช้ตัวกรอง

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

ใช้ (html):

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

2. ใช้ ngSanitize: ปลอดภัยยิ่งขึ้น

ประกอบด้วย angular-sanitize.js

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

เพิ่มngSanitizeในแอปเชิงมุมรูต

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

ใช้ (html):

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

เพียงสร้างตัวกรองจะทำเคล็ดลับ (ตอบสำหรับ Angular 1.6)

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

และใช้สิ่งนี้ตามใน html

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

หากคุณต้องการคำสั่งเก่าคุณสามารถเพิ่มสิ่งนี้ลงในแอพของคุณ:

Directive:

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

การใช้

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

แหล่งที่มา - 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>

สำหรับRails (อย่างน้อยในกรณีของฉัน) ถ้าคุณใช้อัญมณี angularjs-railsโปรดอย่าลืมเพิ่มโมดูล sanitize

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

จากนั้นโหลดขึ้นมาในแอพของคุณ ...

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

จากนั้นคุณสามารถทำสิ่งต่อไปนี้:

บนเทมเพลต:

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

และในที่สุด:

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