2016-07-28 4 views
1

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.

답변

1

DOM API (innerHTML)와 함께 반드시 HTML을 삽입해야한다고 생각합니다.

다음은 임의의 HTML을 표시하기 위해 <div>을 확장 한 예입니다.

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>
가 가능한 보안 위협하지만 것을

참고. 그러나 입력 된 HTML을 <my-div> 요소 내에서 삭제할 수는 있습니다. 예를 들어 sanitize-html

+0

도움을 주셔서 감사합니다. – user3853257

+0

여러분을 환영합니다. 대답을 수락하면 큰 감사의 표시가됩니다;) –

관련 문제