使用html标签的Iroin-ajax响应

我得到一个由iron-ajax提供的JSON提要，在返回的JSON中带有这样的HTML标签。使用html标签的Iroin-ajax响应

[{ 
pk :1, 
body: "<p>ثم سكان بشرية الأبرياء عدد, كلّ يقوم الطرفين و. وبدأت انذار عل بحق, تكبّد إستيلاء الأثناء، دنو بـ, عالمية العالم، بالمطالبة قد الى. وزارة السبب التّحول فصل بل, كل والتي واشتدّت وايرلندا بعض. إحتار واندونيسيا، بلا لم, بوابة الفترة بين بل. 
</p> <p>ثم سكان بشرية الأبرياء عدد, كلّ يقوم الطرفين و. وبدأت انذار عل بحق, تكبّد إستيلاء الأثناء، دنو بـ, عالمية العالم، بالمطالبة قد الى. وزارة السبب التّحول فصل بل, كل والتي واشتدّت وايرلندا بعض. إحتار واندونيسيا، بلا لم, بوابة الفترة بين بل.".</p> <p>ثم سكان بشرية الأبرياء عدد, كلّ يقوم الطرفين و. وبدأت انذار عل بحق, تكبّد إستيلاء الأثناء، دنو بـ, عالمية العالم، بالمطالبة قد الى. وزارة السبب التّحول فصل بل, كل والتي واشتدّت وايرلندا بعض. إحتار واندونيسيا، بلا لم, "بوابة" الفترة بين بل.</p> <!-- Images Box --><div class="img_box01">   <img class="img-responsive" src="url" alt=""><p>عبد المالك نبيل بوتيجان</p>   </div> <!-- Video --><div class="box video_box"><div class="head"><h2></h2></div> <p>وأدرج بوتيجان على قائمة التطرف منذ 29 حزيران/يونيو لمحاولته التوجه إلى سوريا مرورا بتركيا، بحسب مصدر قريب من التحقيق.<br /> كما أن المنفذ الثاني يشبه إلى حد كبير مشتبها به تبحث عنه السلطات منذ 22 تموز/يوليو أي قبل ثلاثة أيام من الاعتداء الذي تم في كنيسة سانت اتيان دو روفريه بالقرب من روان (شمال غرب).</p> <p>وكان جهاز أجنبي أبلغ هيئة تنسيق مكافحة الإرهاب بوجود رجل لم تعرف هويته "مستعد للمشاركة في اعتداء على الأراضي الفرنسية"، وأرفقت بالبلاغ صورة لشخص يشبه كثيرا عبد المالك بوتيجان.</p> <!-- Images Box --><div class="img_box01">   <img class="img-responsive" src="url" alt=""><p>عبد المالك نبيل بوتيجان</p>   </div> <!-- Video --><div class="box video_box"><div class="head"><h2></h2></div><div class="content"><div class="arena"><video id="url" dir="ltr" class="video-js vjs-big-play-centered vjs-default-skin" controls preload="auto" width="600" height="338" poster=""><source src="url" type="video/mp4"></source><track kind="captions" src="" srclang="en" label="English"><track kind="captions" src="" srclang="ar" label="Arabic" default><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading your web browser</p></track></track></video></div></div><div class="foot"></div></div>", 
}]

所以我创建了一个DOM-repeat元素来显示结果，但在打印时的[[正文]]，它打印出与同样HTML标签的文字文本，所以如何把它打印出来作为没有面对XSS安全性的HTML。

来源

2016-07-28 user3853257

我认为你必须用DOM API（innerHTML）命令插入HTML。

下面是一个例子，其中我扩展<div>以显示任意的HTML。

Polymer({ 
 
    is: 'my-elem', 
 
    
 
    properties: { 
 
    ajaxResponse: { 
 
     type: Array, 
 
     value: [{ 
 
     pk :1, 
 
     body: "<b>some html</b>" 
 
     }] 
 
    } 
 
    } 
 
}); 
 

 
Polymer({ 
 
    is: 'my-div', 
 
    extends: 'div', 
 
    
 
    properties: { 
 
    html: { 
 
     type: String, 
 
     observer: '_renderHTML' 
 
    } 
 
    }, 
 
    
 
    _renderHTML: function(html) { 
 
    this.innerHTML = html; 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <base href="https://polygit.org/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <script> 
 
    Polymer = { 
 
     dom: 'shadow' 
 
    } 
 
    </script> 
 
    <link href="polymer/polymer.html" rel="import"/> 
 
</head> 
 

 
<body> 
 
    
 
    <my-elem></my-elem> 
 
    
 
    <dom-module id="my-elem"> 
 
    <template> 
 
     <template id="repeater" is="dom-repeat" items="[[ajaxResponse]]"> 
 
     <div is="my-div" html="[[item.body]]"></div> 
 
     </template> 
 
    </template> 
 
    </dom-module> 
 

 
</body> 
 
</html>

但请注意，这是一个可能的安全威胁。但是，您可以清理<my-div>元素内的输入HTML。例如通过使用sanitize-html

来源

2016-07-28 13:10:57

感谢您解决的帮助， – user3853257

不客气。接受答案将是赞赏的伟大标志;） –

使用html标签的Iroin-ajax响应

回答

相关问题