如何将 HTML 注入带有聚合物的模板中

IT技术 javascript json polymer
2021-03-15 02:27:48

我正在使用聚合物 jsonp 来执行 JSONP 请求，但响应有时包含 html。

例如，假设 post.content 是"<strong>Foo</strong> bar"，我如何"Foo"以粗体显示 {{post.content}} ？

<polymer-element name="feed-element" attributes="">
  <template>
    <template repeat="{{post in posts.feed.entry}}">
      <p>{{post.content}}</p>
    </template>
    <polymer-jsonp url="url" response="{{posts}}"></polymer-jsonp>
  </template>
  <script>
    Polymer('feed-element', {
      created: function() { },
      attached: function() { },
      detached: function() { },
      attributeChanged: function(attrName, oldVal, newVal) { }
    });
  </script>
</polymer-element>
3个回答

Polymer 不会通过数据绑定标记未转义的 HTML，因为它会成为 XSS 攻击的漏洞。

目前正在讨论如何在有限的情况下标记 HTML，或者允许自定义过滤，但这还没有在数据层实现。

今天可以使用额外的自定义元素来做您想做的事情，但再次提醒您，如果您将不受信任的 HTML 呈现到您的页面中，可能会发生不好的事情。

下面是一个展示这种技术的例子：

http://jsbin.com/durajiwo/1/edit

@Scott，您能否更多地评论一下是否需要其他元素才能使其发挥作用？
2021-04-24 02:27:48
Scott 使用 Flickr 的 jsonp API 的技术示例和<polymer-jsonp>：jsbin.com/zoduhoqu/1/edit
2021-05-01 02:27:48
您不需要有额外的元素。你总是可以这样做this.innerHTML = ...。这个想法是我们不能让你直接将数据绑定到 HTML，除非你做一些事情来明确地进入危险区域。有些人使用试图明确禁止的预处理器innerHTML，其他团队需要输入清理器。有多种解决方案，我们可以在这方面进行改进。
2021-05-04 02:27:48
juicy-html 是否也容易受到 XSS 攻击？我想答案是肯定的，但只是检查
2021-05-11 02:27:48

对于那些寻找聚合物 1.0 的人

<dom-module id="html-echo">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
  </template>
</dom-module>

<script>
  (function () {
    Polymer({
      is: 'html-echo',
      properties: {
        html: {
          type: String,
          observer: '_htmlChanged'
        }
      },
      _htmlChanged: function (neo) {
        // WARNING: potential XSS vulnerability if `html` comes from an untrusted source
        this.innerHTML = neo;
      }
    });
  })();
</script>
我认为在 Polymer 1.0 中 <style> 标签应该在 <template> 标签内，但否则我希望我可以两次 +1 这个答案。你救了我这么多心痛；谢谢。
2021-05-04 02:27:48
我们如何在这个方法中调用后期渲染？
2021-05-05 02:27:48
this.innerHTML = postProcess(neo); 这适合你吗？@Ali.MD
2021-05-07 02:27:48
请记住，由于绑定是在预渲染时静态计算的，因此您的命令式声明类似于[[foo]]或{{bar}}不会在新 html 中工作，因为它们是在渲染后添加的。
2021-05-09 02:27:48

如果您确定这是您想要做的，只需使用innerHTML.

_renderHtml: function(html) {
  this.$.dynamicHtmlContainer.innerHTML = html;
}

或者动态添加一个 shadow-dom 孩子：

_renderHtml: function(html) {
  var div = document.createElement('div');
  div.innerHTML = html;
  Polymer.dom(this).appendChild(div);
}

我认为Polymer.dom在 Polymer 2.0 中被删除了。

其它你可能感兴趣的问题
上一篇如何检测浏览器关闭？ 下一篇使用 jQuery on() 时，为什么要使用（文档）而不是元素本身？