एनजी-बाँध-एचटीएमएल src

Question

मैं इस तरह इस

<div id="{{item.id}}" ng-repeat="item in itemList"> 
     <div ng-bind-html="item.html"></div> 
</div> 

की तरह एक साधारण प्रस्तुति item.html एचटीएमएल शामिल है छवि को लोड नहीं करता है:

<a href="http://www.youtube.com"><img src="icons/youtube.png" alt="Youtube"/></a> 

हालांकि, जिसके परिणामस्वरूप एचटीएमएल नहीं है छवि को लोड:

<a href="http://www.youtube.com"><img alt="Youtube"/></a> 

कुछ खोज के बाद, AngularJS इस क्रॉस-साइट स्क्रिप्टिंग से बचने के लिए करता है की तरह लग रहा है, लेकिन मैं अब था यूट्यूब से सीधे एक छवि लोड करने के लिए ले।

<a href="http://www.youtube.com"><img src="http://img.youtube.com/vi/9bZkp7q19f0/0.jpg" alt="Youtube"/></a> 

इसके अलावा अधिक, मैं एनजी-बाँध एचटीएम्एल असुरक्षित का उपयोग करके सभी छवियों को लोड करने में सक्षम था।

<div id="{{item.id}}" ng-repeat="item in itemList"> 
     <div ng-bind-html-unsafe="item.html"></div> 
    </div> 

अगर मैं एनजी-बाँध एचटीएम्एल असुरक्षित उपयोग करते हैं, मैं ngSanitize मॉड्यूल अब, की जरूरत नहीं है, जिसका अर्थ है मेरी कोड कम सुरक्षित है? मैंने ऐसे मामलों का उपयोग किया है जहां मैं बाहरी स्रोतों से छवियों को लोड करता हूं।

अपने सवालों के आ रहा है:

1. क्या एनजी-बाँध-एचटीएमएल और अलग मैं क्या ऊपर उल्लेख किया है से एनजी-बाँध एचटीएम्एल असुरक्षित के बीच अंतर है। क्या इसके बारे में कोई दस्तावेज है? मुझे कोई नहीं मिला।

2. मैं होस्ट सर्वर और बाहरी सर्वर से लोडिंग छवियों को कैसे पूरा कर सकता हूं, और असुरक्षित निर्देश का उपयोग नहीं कर रहा हूं?

धन्यवाद!

Answer 1

1. आपने जो कहा है उसे जोड़ने के लिए और कुछ भी नहीं है।

   ng-bind-html आपको एचटीएमएल सामग्री को आपके एंजुलर ऐप में लोड करने की अनुमति देता है ($sanitise सेवा का उपयोग करके)। दूसरी ओर, ng-bind-html-unsafe आपको बिना किसी स्वच्छता के HTML सामग्री लोड करने की अनुमति देता है।

   स्वच्छता प्रक्रिया प्रदान की गई HTML सामग्री के प्रत्येक तत्व को अच्छी तरह से ज्ञात HTML टैग/तत्वों की सूची के साथ जांचने पर होती है। किसी भी टैग/तत्व जो सूची में नहीं है उसे हटा दिया जाता है। इसके अलावा विशिष्ट HTML विशेषताओं (जैसे src) पर कुछ और सत्यापन हैं।

   आपके मामले में तत्व <img src="icons/youtube.png" alt="Youtube"/> क्योंकि यह AngularJS 'URI regexp मेल नहीं खाता एक वैध src विशेषता नहीं है: /^((ftp|https?):\/\/|mailto:|tel:|#)/

   अधिक जानकारी के लिए ngBindHtml, ngBindHtmlUnsafe और $sanitize (और AngularJS source code)

2. मेरा मानना ​​है कि वहां नहीं है ... विशेष रूप से यदि आप उस HTML को नियंत्रित नहीं करते हैं जिसमें आप लोड हो रहे हैं।

   आप केवल अगर ngBindHtml निर्देश भी प्रतिबंधक है इस निर्देश का उपयोग करना चाहिए और जब आप पूरी तरह से सामग्री आप के लिए बाध्य कर रहे हैं के स्रोत पर विश्वास: ngBindHtmlUnsafe प्रलेखन पर कहा गया है।

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

Answer 2

Nenad हाल ही में इस तरह के एक प्रश्न का उत्तर दिया। $ Sce.trustAsHtml ($ scope.html) का आह्वान करके आप HTML को मान्य के रूप में चिह्नित करने में सक्षम होंगे ताकि ng-bind-html इसे स्वीकार कर सके। यहां तक ​​कि जब img src सापेक्ष है और इसलिए अन्यथा अमान्य के रूप में चिह्नित किया जाएगा।

You can find his post here