एनजी-बाइंड-एचटीएमएल-असुरक्षित हटाए जाने के साथ, मैं HTML को कैसे इंजेक्ट कर सकता हूं?


265

मैं अपने नियंत्रक को HTML को DIV में इंजेक्ट करने की अनुमति देने के लिए $sanitizeप्रदाता और ng-bind-htm-unsafeनिर्देश का उपयोग करने की कोशिश कर रहा हूं ।

हालाँकि, मैं इसे काम नहीं कर सकता।

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

मुझे पता चला कि यह इसलिए है क्योंकि इसे एंगुलरजेएस (धन्यवाद) से हटा दिया गया था।

लेकिन बिना ng-bind-html-unsafe, मुझे यह त्रुटि मिलती है:

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


1.2.23+ के लिए एक सरल समाधान है, पोस्ट देखें
जॉन

जवाबों:


123
  1. आपको यह सुनिश्चित करने की आवश्यकता है कि sanitize.js लोड किया गया है। उदाहरण के लिए, इसे https://ajax.googleapis.com/ajax/libs/angularjs/ http : //LAST_VERSIONiding/angular-sanitize.min.js से लोड करें
  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>में काम करेगा।

3
यह सुरक्षित रूप से करने के लिए सबसे साफ विकल्प है। यह अधिक निर्भरता के साथ आया था लेकिन यह सुरक्षा के बारे में है इसलिए कोई हिचकिचाहट नहीं है!
पियरे मौई

आयनिक 1.0.0-Beta.13 के साथ इसका उपयोग करना
jasonflaherty

3
यह कुछ टैग के साथ काम नहीं करता है, जैसे इनपुट। बेशक इस के आसपास पाने का कोई आसान तरीका नहीं है। वास्तव में निराशा होती है।
केसी

सबसे आम और सुरक्षित तरीका। इसे रोकें यदि आप अलग-अलग विचारों में बाइंड-html के उपयोग की योजना बनाएंगे।
एडुआर्डोबर्सा

350

एलेक्स द्वारा सुझाए गए अनुसार अपने कार्यक्षेत्र में एक समारोह घोषित करने के बजाय, आप इसे एक साधारण फ़िल्टर में बदल सकते हैं:

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/


3
मेरे पास जीथब पर कोणीय के लिए उपयोगी उपकरणों का एक छोटा सा संग्रह है , मैं उन उपकरणों में इस फ़िल्टर को शामिल करूंगा यदि आपको कोई आपत्ति नहीं होगी। जब आप html पर भरोसा करते हैं तो यह IMHO सबसे अच्छा समाधान है।
कैपज

@ कापज कोई समस्या नहीं है, लेकिन अगर आप इस उत्तर के लिए एक कड़ी जोड़ते हैं तो यह बहुत सराहना की जाएगी। :-) stackoverflow.com/a/21254635
Leeroy Brun

बहुत अच्छा। यह नेस्टेड रिपीट पर एक आकर्षण की तरह काम करता है!
जेले वेरजिडेन

यह प्रत्येक नियंत्रक के लिए कोडिंग की तुलना में MUCH बेहतर समाधान की तरह लगता है। बस एक त्वरित फिल्टर और किया! मैंने इसे दोहराते हुए तालिका पंक्तियों के साथ प्रयोग किया, पाई के रूप में सरल .... <td ng-bind-html="representative.primary | to_trusted"></td>
फिल निकोलस

2
angular.module ('myApp')। फ़िल्टर ('TrustAsHtml', ['$ sce'), फ़ंक्शन ($ sce) {$ sce.trustAsHtml}];
19

275

आपने संकेत दिया कि आप कोणीय 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 पर ठीक से काम करने से रोकता है।)


2
मैंने उपरोक्त का उपयोग करने की कोशिश की, लेकिन इससे मेरा कोड टूट गया। लगता है कि आपको फ़ंक्शन परिभाषा से पहले '$ स्कोप' को प्रस्तुत करने की आवश्यकता है - शायद यह एक समय में "समझा" गया था, लेकिन अब नहीं। निम्नलिखित कार्य करना चाहिए:myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
१६:३६ पर डेक्सिजन

4
आप जिज्ञासा को आगे बढ़ाने के लिए $ sce के बारे में अधिक जानकारी यहाँ देख सकते हैं! ;)
जेनुफ्फा

5
ध्यान दें कि इससे आपके कोड में XSS सुरक्षा समस्या हो सकती है। वैकल्पिक, सुरक्षित निर्धारण के लिए ngSanitizeनीचे दिए गए सुझाव ( stackoverflow.com/a/25679834/22227 ) देखें ।
मार्टिन प्रोब्स्ट

यह एक बुरा विचार क्यों है: docs.google.com/pretation/d/…
user857990

trustAsHtmlयह क्या कहता है, यह किसी भी आने वाले HTML कोड पर भरोसा करता है , जिसके परिणामस्वरूप क्रॉस-साइट स्क्रिप्टिंग (XSS) हमले हो सकते हैं
अलेक्सी सोलोवी

112

मेरे लिए, सबसे सरल और सबसे लचीला समाधान है:

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

और अपने नियंत्रक में फ़ंक्शन जोड़ें:

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

$sceअपने कंट्रोलर के इनिशियलाइज़ेशन के लिए मत भूलना ।


नियंत्रक के लिए और अधिक सरल लगता है में $ गुंजाइश भरोसा एचटीएमएल लौटे
meffect

1
यह $ sce पर अनंत लूप फेंक सकता है, कुछ ऐसा करें: $ गुंजाइश। सौंप दिया = {}; $ गुंजाइश.to_trusted = function (html_code) {$ $ गुंजाइश। सौंप दिया [html_code] || ($ गुंजाइश। सौंप दिया [html_code] = $ sce.trustAsHtml (html_code)); };
AO_

1
हर समाधान जिसमें HTML को आशीर्वाद देना शामिल है जैसा कि विश्वसनीय XSS भेद्यता का परिचय देता है। कृपया सुरक्षित समाधान के लिए नीचे दिए गए जवाब को देखें।
मिशेल स्पेग्नोलो

65

मेरी राय में इसका सबसे अच्छा समाधान यह है:

  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अपने कार्य के भाग के रूप - थोड़ा Daft मुझे लगता है कि यह नहीं है लगता है

वैसे भी - यही तरीका है कि मैं इसे करता हूं - 67% समय, यह कभी भी काम करता है।


आप एक खोजने और बदलने के लिए निम्न regex का उपयोग कर सकते हैं: regex: ng-bind-html-unsafe - "((?: (? !??")।) *) "प्रतिस्थापन: ng-bind-html =" ($ 1) | html "उपरोक्त फिल्टर के साथ।
जॉर्ज डनव

2
हर समाधान जिसमें HTML को आशीर्वाद देना शामिल है जैसा कि विश्वसनीय XSS भेद्यता का परिचय देता है। कृपया सुरक्षित समाधान के लिए नीचे दिए गए जवाब को देखें।
मिशेल स्पेग्नोलो

7

यदि आप उपयोगकर्ता इनपुट का उपयोग करते हैं तो आप अपना स्वयं का सरल असुरक्षित HTML बाइंडिंग बना सकते हैं, यह एक सुरक्षा जोखिम हो सकता है।

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

क्या यह निर्देश भी उपयोग नहीं किया जा सकता है $sce.trustAsHtml?
kontur

5

आपको ng-bind-html-असुरक्षित के अंदर {{}} का उपयोग करने की आवश्यकता नहीं है:

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

यहाँ एक उदाहरण है: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

{{}} संचालक अनिवार्य रूप से एनजी-बिंद के लिए केवल एक आशुलिपि है, इसलिए आप एक बंधन के अंदर एक बंधन के लिए कितनी मात्रा में प्रयास कर रहे थे, जो काम नहीं करता है।


हालांकि, अगर मैं इसे हटा देता हूं, तो मुझे कुछ भी नहीं मिलता है। और डॉक्स अत्यधिक भ्रमित कर रहे हैं, एक एकल} डॉक्स-angularjs-org-dev.appspot.com/api/…-
मेटलौरिएट

बहुत अजीब। मैंने सिर्फ यह सुनिश्चित करने के लिए परीक्षण किया है और मेरे लिए यह उम्मीद के मुताबिक काम किया है। मैं मानता हूं कि एकल {} डॉक्स में थोड़ा भ्रमित हैं, लेकिन वे एक अभिव्यक्ति के प्रतिनिधित्व के रूप में हैं, न कि स्ट्रिंग में शाब्दिक के रूप में। मैंने अपना जवाब एक काम कर रहे प्लंक के साथ अपडेट किया है।
ksimons

इसके अलावा, अगर आप पहले से ही 1.2.0 का उपयोग कर रहे हैं, तो एनजी- बिंद
ksimons

2
मैं 1.2 का उपयोग कर रहा हूं। :( Grrr! असुरक्षित HTML को कैसे इंजेक्ट किया जा सकता है? मुझे इसके बिना यह त्रुटि मिलती है: त्रुटियों .angularjs.org
$

{{}}ऑपरेटर बंधन में नाकाम रहने, संकेत के लिए धन्यवाद के साथ मेरी समस्या का कारण था!
कैम्पबेलन

2

मुझे भी इसी तरह की समस्या हुई है। अभी भी मेरे मार्कडाउन की सामग्री को github पर होस्ट नहीं किया जा सका।

App.js में $ sceDelegateProvider के लिए एक श्वेतसूची (अतिरिक्त github डोमेन के साथ) स्थापित करने के बाद यह एक आकर्षण की तरह काम करता है।

विवरण: यदि आप किसी भिन्न यूआरएल से सामग्री लोड करते हैं, तो भरोसेमंद रूप से लपेटने के बजाय एक श्वेतसूची का उपयोग करना।

डॉक्स: $ sceDelegateProvider और ngInclude (प्राप्त करने के लिए, संकलन और बाहरी HTML अंश सहित)


2

सख्त प्रासंगिक एस्केपिंग को पूरी तरह से अक्षम किया जा सकता है, जिससे आप 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);
});

उपरोक्त कॉन्फिग सेक्शन को अपने ऐप में संलग्न करने से आप html को इंजेक्ट कर सकते हैं ng-html-bind, लेकिन डॉक्स टिप्पणी के रूप में:

SCE आपको छोटे कोडिंग ओवरहेड के लिए बहुत सारे सुरक्षा लाभ देता है। SCE अक्षम एप्लिकेशन को लेने के लिए यह बहुत कठिन होगा और या तो इसे अपने आप सुरक्षित करें या बाद के चरण में SCE को सक्षम करें। यह उन मामलों के लिए SCE को निष्क्रिय करने के लिए समझ में आता है, जहां आपके पास बहुत से मौजूदा कोड हैं जो SCE के शुरू होने से पहले लिखे गए थे और आप उन्हें एक समय में एक मॉड्यूल भेज रहे हैं।


के बारे में पता करने के लिए अच्छा है, लेकिन निश्चित रूप से कुछ है कि देखभाल के साथ नियंत्रित किया जाना चाहिए।
iconoclast

2

आप इस तरह से फिल्टर का उपयोग कर सकते हैं

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 और यहाँ घोषित अन्य प्रकारों के लिए स्रोत लिंक

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.