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リピート要素を作成しますが、[[本体]]印刷するとき、それはまた、テキストとして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レスポンス

答えて

関連する問題