带有html标签的Iroin-ajax响应 [英] Iroin-ajax response with html tags

查看:93
本文介绍了带有html标签的Iroin-ajax响应的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在通过iron-ajax获取JSON提要,在返回的JSON中带有这样的HTML标签.

I'm getting a JSON feed by iron-ajax, in the returned JSON come with HTML tags like this.

[{
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元素来显示结果,但是在打印[[body]]时,它作为文本打印出来,同时带有HTML标记,因此,如何在不面对XSS的情况下将其打印为HTML安全性.

so I create a dom-repeat element to show the results , but when printing the [[body]] , it prints out as text with the HTML tags as text also, so how to print it out as HTML without facing XSS security .

推荐答案

我认为您必须使用DOM API(innerHTML)强制插入HTML.

I think you have to insert the HTML imperatively with DOM API (innerHTML).

这是我扩展<div>以显示任意HTML的示例.

Here's an example in which I extend <div> to display arbitrary 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

Note though that it is a possible security threat. You could however sanitize the input HTML inside the <my-div> element. For example by using sanitize-html

这篇关于带有html标签的Iroin-ajax响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆