从Meteor助手返回HTML的最佳/最安全/最有效的方法是什么？

Question

在满足某些逻辑条件后，我尝试从助手函数返回HTML。但是，使用Spacebars.SafeString()函数似乎不起作用，我认为使用此方法返回HTML是不安全的，而且容易从外部源注入代码。

例如，返回此HTML：

<object data="/rating/what.svg" width="20" height="20" type="image/svg+xml"></object>

像这样设置的：

Spacebars.SafeString("<object data=" + "/rating/what.svg" + "width='20' height='20' type=" + "image/svg+xml" + "></object>");

有谁能引导我找到从助手那里返回HTML的最佳方法，以及如何完成这样的任务？在其他地方找不到明确的答案。

Answer 1

首先，如果您的需求允许，则根本不返回HTML，只需使用模板并使用数据上下文填充它，例如：

在模板中：

<template name="someHtml">
  <object data="/rating/{{dynamicName}}.svg" width="20" height="20" type="image/svg+xml"></object>
</template>

在相应的助手中：

Template.someHtml.helpers({
  dynamicName: function() {
    return 'what'; // obviously, you generate this with some code
  }
})

但是，如果您确实必须使用html内容来打印，则可以使用两个最流行的消毒包之一，即djedi:sanitize-html-client或vazco:宇宙-html-净化器。

关于第一项：

cleanHtml = sanitizeHtml(dirtyHtml, {
  allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ],
  allowedAttributes: {
    'a': [ 'href' ]
  }
});

对于后者：

cleanHtml = UniHTML.purify(dirtyHtml, {
  withoutTags: ['b', 'img'], 
  noFormatting: true
});

当然，您可以在模板中使用三重大括号将这些值的返回值包括在内，这样HTML就不会转义。

Answer 2

您是正确的，因为Spacebars.SafeString()可以返回不安全的代码。最好的方法是去掉您不想要的错误标记或注入，或者使用Spacebars.SafeString()或三大括号语法，如下所示：

<div>
  {{{htmlHelper}}}
</div>

htmlHelper: function() {
  return "<img src=..."
}