Question

我有一个视图，该模型包含一个小数组。我想输出包含在其自己的<span>中的每个数组项，但是当在模板中使用模板助手时，我将html字符转义为＆lt; span＆gt;

有没有办法防止这种情况发生？

templateHelpers: function () {
    return {
      tagsHelper: function(){
        var t = "";
        this.tags.forEach(function(tag)
        {
            t+="<span>"+tag+"</span>";
        });
        return t;
      },
    }
},

和

<script type="text/template" id="font-list-item">
  <td class="alias"><%- name %></td>
  <td class="tags"><%- tagsHelper() %></td>
</script>

Answer 1

Marionette在幕后使用underscore.js#templates来渲染它的模板。该模板系统支持两种打印变量的方式：

<%- variable %>将输出变量转义
<%= variable %>将输出变量unescaped

在您的第一个示例中，您使用的是转义的（<%- ... %>），它将输出如下字符：

<为<
>为>
&为&
等

为了能够在您的示例中使用templateHelper，您应该将tagsHelper呈现为<td class="tags"><%= tagsHelper() %></td>（因为它包含的HTML不应该被转义）。

但是，在某些情况下，您应该在渲染未转义的变量时注意可能的XSS攻击。因此，最好确保变量本身被转义。您的示例可以重写为：

templateHelpers: function () {
  return {
    tagsHelper: function(){
      var t = "";
      this.tags.forEach(function(tag) {
        // note the _.escape(..) below
        t += "<span>" + _.escape(tag) + "</span>";
      });
      return t;
    }
  }
}

然而，我建议你使用你的模板中的html标记来寻找你的第二个解决方案，因为键入html insde一个模板更有意义:-)注意tag本身应该但是要转义（所以使用<%- ... %>语法）

Answer 2

我能够使用一个不同的方法，使用模板内的逻辑块，但我仍然真的想知道如何解决原始问题，以防我发现自己需要在模板中使用templateHelpers将来

<script type="text/template" id="font-list-item">
  <td class="alias"><%- name %></td>
  <td class="tags">
    <% tags.forEach(function(tag){ %>
        <span><%= tag %></span>
    <% }); %>
  </td>
</script>

Marionette templateHelper正在逃避html字符

2 个答案: