Question

我通过iron-ajax获取JSON提要，在返回的JSON中提供了这样的HTML标记。

[{
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标签作为文本的文本，因此如何将其打印为HTML而不面向XSS安全。

Answer 1

我认为你必须使用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

带有html标签的Iroin-ajax响应

1 个答案: