एनगुलर 1.2+ में एनजी-बाइंड-एचटीएमएल-असुरक्षित को दोहराने के लिए आप $ sce.trustAsHtml (स्ट्रिंग) का उपयोग कैसे करते हैं

Question

ng-bind-html-unsafe कोणीय 1.2 में हटा दिया गया था

मैं कुछ को लागू करने की कोशिश कर रहा हूं जहां मुझे उपयोग करने की आवश्यकता है ng-bind-html-unsafe। डॉक्स में और गितुब कमिट पर वे कहते हैं:

एनजी-बाइंड-html एनजी-एचटीएमएल-बाइंड-असुरक्षित व्यवहार की तरह प्रदान करता है (आंतरिक एचटीएमएल बिना स्वच्छता के परिणाम) जब $ sce.trustAsHtml (स्ट्रिंग) के परिणाम के लिए बाध्य होता है।

आप यह कैसे करते हैं?

Comments

HTML

— kontur

Answer 1

होना चाहिए:

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

Comments

किसी फ़ंक्शन द्वारा लौटाए गए मान के साथ आप ऐसा कैसे कर सकते हैं? <p ng-bind-html = ""> {{वर्णन (श्रेणी

— .id

यकीन नहीं होता है कि मैं तुम्हें सही है, लेकिन: <p ng-bind-html="trustedHtml"></p> और$scope.trustedHtml = $sce.trustAsHtml(description(category.id));

— नेनाद

मैं आपको जवाब देने के लिए प्यार करता हूँ! जाहिरा तौर पर मुद्दा मुझे 1.0.8 का उपयोग कर रहा था। मेरे पास डायनामिक सेक्शन के साथ एक फॉर्म है इसलिए बदलाव पर मैं उचित विवरण दिखाना चाहता था। <p ng-bind-html="description(category.id)"></p>तब समारोह की अंतिम पंक्ति:return $sce.trustAsHtml(value);

— dasper

लेकिन ... var x = sce.trustAsHtml ('foo'); var y = sce.trustAsHtml ('foo'); एक्स == y; झूठी ... तो क्या यह एक अनन्त डाइजेस्ट लूप नहीं बनाना चाहिए क्योंकि आपका फ़ंक्शन एक नई वस्तु देता है?

— 20

इसके अलावा उल्लेख के लायक $ sce नियंत्रक में पारित करने की जरूरत है या आप $ sce परिभाषित नहीं है

— isimmons है

Answer 2

फ़िल्टर

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

प्रयोग

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

Comments

आपको ngSanitizeयहाँ की आवश्यकता क्यों है ?

@OliverJosephAsh क्योंकि $ sce सेवा को ngSanitize में परिभाषित किया गया है। उन्होंने मुख्य कार्यक्षमता को तोड़ दिया इसलिए हम कोणीय का उपयोग थोड़े से कर सकते हैं और हमेशा पूरे ढांचे का उपयोग नहीं करना चाहिए।

— क्रिस Sattinger

मैं सोच रहा था कि ऐसा कुछ होने के सुरक्षा निहितार्थ क्या हो सकते हैं? मैंने एक अलग प्रश्न में अधिक स्पष्टीकरण के लिए कहा है । सभी इनपुट की सराहना की!

— फिलिप बुल्ले

संस्करण 1.2 में @ फेलिक्स (जब उन्होंने इसे जोड़ा) यह डिफ़ॉल्ट रूप से कोर के भाग के रूप में सक्षम है, नहीं ngSanitize, इसलिए इसके लिए कोई आवश्यकता नहीं हैngSanitize

— TheSharpieOne

यह कोणीय टीम द्वारा किया गया एक डिज़ाइन निर्णय है - कि कैसे फ़िल्टर लागू किया जाना चाहिए - यदि आप इसे अन्यथा करते हैं, तो वे काम नहीं करेंगे। फ़ंक्शन को वापस करने का कारण यह है कि कोणीय प्रसंस्करण में देरी कर सकता है जब तक कि यह 'सही क्षण नहीं पाता'। अन्यथा फ़िल्टर को कॉल करने पर फ्रेमवर्क पर कोई प्रभाव नहीं पड़ेगा। यह अच्छा और बुरा दोनों है, लेकिन जहाँ तक मैं बता सकता हूँ - यह कोणीय प्रसंस्करण के साथ सामना करने के लिए आवश्यक है। यहाँ अधिक जानकारी: docs.angularjs.org/api/ng/provider/$filterProvider

— क्रिस

Answer 3

व्यक्तिगत रूप से मैं डेटाबेस में जाने से पहले कुछ 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);
}]);

Comments

मैं स्पष्ट नहीं हूं कि दोनों उदाहरणों में क्या अंतर है। हमारी टीम के सदस्यों में से एक को एक समस्या है जहां उनके पास System.out.println (& ldquo; हैलो वर्ल्ड और rdquo;) है। डेटाबेस में। वह <div data-ng-bind-html = "text"> </ div> का उपयोग कर रही है और यह पृष्ठ पर इस प्रकार दिखाई देता है: System.out.println (& ldquo; हैलो वर्ल्ड! & Rdquo;;); क्या आप कह रहे हैं कि आपके ngBindHtmlUnsafe निर्देश का उपयोग करने से यह समस्या ठीक हो जाएगी?

— एलन 2

@ मुझे विश्वास है कि यह काम करेगा अगर यह <script>System.out.printIn("Hello World!");</script>व्यक्तिगत रूप से कोशिश नहीं की थी , क्योंकि मेरे PHP ने सभी जेएस को उपयोगकर्ता इनपुट से हटा दिया था। मैंने अपने दूसरे उदाहरण को हटा दिया क्योंकि एंगुलर का मूल निवासी हर तरह से बेहतर है, बस उस एक का उपयोग करें।

— माइकल जे। कल्किंस

गर्मियों के संपादक के लिए यह कैसे करना है, शुरू में मुझे सर्वर से json डेटा (जिसमें html) होता है, गर्मियों में मैं एनजी-मॉडल का उपयोग कर रहा हूं। कोड को ग्रीष्मकालीन संपादक में प्रदर्शित करने के लिए कैसे विश्वसनीय बनाया जाए

— कोडेलनर

Answer 4

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

Comments

गर्मियों के संपादक के लिए यह कैसे करना है, शुरू में मुझे सर्वर से json डेटा (जिसमें html) होता है, गर्मियों में मैं एनजी-मॉडल का उपयोग कर रहा हूं। कोड को ग्रीष्मकालीन संपादक में प्रदर्शित करने के लिए कैसे विश्वसनीय बनाया जाए

— कोडेलनर

Answer 5

बस एक फिल्टर बनाने की चाल होगी। (कोणीय 1.6 के लिए उत्तर दिया गया)

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

और html में follow के रूप में इस का उपयोग करें।

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

Comments

यह एक त्रुटिहीनता के साथ त्रुटि को ठीक करता है: "अज्ञात प्रदाता: eProvider <- e <- असुरक्षित"

— Valera

Answer 6

यदि आप पुराना निर्देश वापस चाहते हैं, तो आप इसे अपने ऐप में जोड़ सकते हैं:

निर्देशक:

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

Comments

एक जैसा व्यवहार नहीं करता है।

— केसी

ग्रीष्मकालीन संपादक के लिए यह कैसे करना है, शुरू में मुझे सर्वर से json डेटा (जिसमें html) होता है, गर्मियों के दिनों में मैं एनजी-मॉडल का उपयोग कर रहा हूं। कोड को ग्रीष्मकालीन संपादक में प्रदर्शित करने के लिए कैसे विश्वसनीय बनाया जाए

— कोडेलनर

Answer 7

जावास्क्रिप्ट

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

एचटीएमएल

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

Comments

गर्मियों के संपादक के लिए यह कैसे करना है, शुरू में मुझे सर्वर से json डेटा (जिसमें html) होता है, गर्मियों में मैं एनजी-मॉडल का उपयोग कर रहा हूं। कोड को ग्रीष्मकालीन संपादक में प्रदर्शित करने के लिए कैसे विश्वसनीय बनाया जाए

— कोडेलनर

Answer 8

के लिए रेल यदि आप उपयोग कर रहे हैं (मेरे मामले में कम से कम) AngularJS-रेल मणि , कृपया स्वच्छ मॉड्यूल जोड़ने के लिए याद

//= 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 '';
}

Comments

ग्रीष्मकालीन संपादक के लिए यह कैसे करना है, शुरू में मुझे सर्वर से json डेटा (जिसमें html) होता है, गर्मियों के दिनों में मैं एनजी-मॉडल का उपयोग कर रहा हूं। कोड को ग्रीष्मकालीन संपादक में प्रदर्शित करने के लिए कैसे विश्वसनीय बनाया जाए

— कोडेलनर

इसे देखें: github.com/summernote/summernote/issues/…

— SomeDudeSomewhere

Answer 9

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>

Answer 10

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

Comments

कृपया केवल एक उत्तर के रूप में कोड को पोस्ट न करें, लेकिन एक स्पष्टीकरण भी शामिल करें कि आपका कोड क्या करता है और यह प्रश्न की समस्या को कैसे हल करता है। स्पष्टीकरण के साथ उत्तर आम तौर पर उच्च गुणवत्ता के होते हैं, और upvotes को आकर्षित करने की अधिक संभावना होती है।

— मार्क रोटेटेवेल