dart - 将 HTML 安全地注入(inject)到 Polymer 模板中

Question

在自定义元素中，我尝试用 HTML 替换项目的正文文本以换行和链接。当我刚刚处理换行符(nl2br())时它正在工作，但在处理链接(linkify())时不再有效。

  get formattedBody {
    if (item.isEmpty) return 'Loading...';
    return "${InputFormatter.nl2br(InputFormatter.linkify(item['body']))}";
  }

  itemChanged() {
    // Trick to respect line breaks.
    HtmlElement body = $['body'];
    body.innerHtml = formattedBody;
  }

我收到一条温暖而安全的安全信息，例如:

Removing disallowed attribute <A href="http://miamiherald.typepad.com/the-starting-gate/2014/09/news-.html">

我也试过 setInnerHtml() ，无济于事。

想法？谢谢!

Answer 1

您需要通过 NodeValidator它被配置为允许特定的标签和属性。

这个问题HTML Tags Within Internationalized Strings In Polymer.dart包含允许使用聚合物表达式传递 HTML 的自定义元素的示例。该实现演示了如何使用 NodeValidator .

而不是 ..allowTextElements()您可以允许其他元素/属性集或自定义元素/属性。自动完成应该显示可能的选项。

也可以看看
- Dart, why does using innerHtml to set shadow root content work but appendHtml doesn't?
- Dart Removing disallowed attribute after editor upgraded
- Mustache Template usage in Dart
- in dart parse HTML string to DOM

我得到了它的工作

NodeValidator nodeValidator = new NodeValidatorBuilder()
    ..allowNavigation(new MiamiHeraldUrlPolicy());

aContainer.setInnerHtml('<a href="http://miamiherald.typepad.com/the-starting-gate/2014/09/news-.html">bla</a>', 
    validator: nodeValidator);

class MiamiHeraldUrlPolicy implements UriPolicy {
  MiamiHeraldUrlPolicy();

  RegExp regex = new RegExp(r'(?:http://|https://|//)?miamiherald.typepad.com/.*');

  bool allowsUri(String uri) {
    return regex.hasMatch(uri);
  }
}