यूआईबी-पॉपओवर-एचटीएमएल मेरी एचटीएमएल स्ट्रिंग

Question

स्वीकार नहीं करेगा मैं कोणीय-UI-बूटस्ट्रैप के 0.14.2 के सत्यापन का उपयोग करता हूं। मैं पॉपओवर में लाइन रिटर्न प्रदर्शित करने में असमर्थ था। मैं पॉपओवर-एचटीएमएल निर्देश है, और एक स्ट्रिंग का उपयोग इस तरह के रूप

Limite inférieure<br>Limite supérieure 

यह निम्न त्रुटि देता है:

Lexer Error: Unexpected next character at columns 41-41 [é] in expression [<div>Approchant des limites<br>Limite supérieure: 34:12<br>Limite inférieure: -34:12</div>]. 

मैं एक $ sce.trustAsHtml कॉल में मेरी स्ट्रिंग लपेटकर की कोशिश की है, लेकिन यह नहीं था एक चीज़ नहीं बदलो

यहाँ एक plunker मुझे नीचे के रूप में प्रयोग करने के लिए $sce.trustAsHtml http://plnkr.co/edit/3JSly1anPBUiGyqBcsD1

Answer 1

वर्क्स है।

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

जे एस:

$scope.popoverContent = $sce.trustAsHtml('Line 1<br>Line2'); 

HTML:

<button popover-placement="right" uib-popover-html="popoverContent" type="button" class="btn btn-default">Popover</button> 

Updated Plunker

या अगर अपनी सामग्री गतिशील है और आप एक समारोह की जरूरत है:

जे एस:

$scope.input = 'Line 1<br/>Line 2'; 

var trusted = {}; 

$scope.getPopoverContent = function(content) { 
    return trusted[content] || (trusted[content] = $sce.trustAsHtml(content)); 
} 

HTML: (एक अनंत $ पचाने पाश तो पैदा कर सकता है trustAsHtml द्वारा दिए गए मान कैशिंग के लिए कारण यह है कि trustAsHtml हमेशा एक नया ऑब्जेक्ट है)

<button popover-placement="right" uib-popover-html="getPopoverContent(input)" type="button" class="btn btn-default">Popover</button> 

Plunker

Answer 2

स्वीकृत दृष्टिकोण आसानी से आपके आवेदन में एक क्रॉस-साइट स्क्रिप्टिंग भेद्यता का कारण बन सकता है। यदि आप स्पष्ट रूप से उस सामग्री पर भरोसा करते हैं जिसे आप प्रदर्शित करना चाहते हैं तो आपको वास्तव में केवल $sce.trustAsHtml का उपयोग करना चाहिए। कोणीय-बूटस्ट्रैप दस्तावेज़ भी उस पर संकेत देता है:

उपयोगकर्ता यह सुनिश्चित करने के लिए ज़िम्मेदार है कि सामग्री डोम में सुरक्षित है!

एक वैकल्पिक और सुरक्षित दृष्टिकोण है कि स्वचालित रूप से $sanitize का उपयोग करता है एचटीएमएल को साफ़ करने में ng-bind-html के साथ एक सरल संयोजन में टेम्पलेट के साथ uib-popover-template उपयोग करने के लिए है।

एचटीएमएल

<p uib-popover-template="myPopoverTemplateUrl" 
    popover-trigger="mouseenter" 
    popover-placement="top" 
    popover-append-to-body="true"> 
     Show a Popover on Hover 
</p> 
<script type="text/ng-template" id="myPopoverTemplate.html"> 
    <div> 
     <p ng-bind-html="popoverContent"></p> 
    </div> 
</script> 

जे एस

$scope.myPopoverTemplateUrl = "myPopoverTemplate.html"; 
$scope.popoverContent = "This is HTML <b> And will be sanitized." 

तुम भी अपने अनुप्रयोग में ngSanitize घोषित करने के लिए सुनिश्चित करने के लिए और angular-sanitize.js स्क्रिप्ट शामिल करने के लिए की जरूरत है। कृपया संदर्भ के लिए अद्यतन plunker पर एक नज़र डालें।

Updated Plunker