安全地将HTML注入到聚合物模板中

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

我有一个<safe-html>元素工作。在Chrome上进行验证，甚至在Safari上进行后dart2js验证。如果你想让我把它变成pub.dartlang.org上的一个lib，请将它解决。

用法：

<safe-html validator="{{nodeValidator}}">{{someHtml}}</safe-html> 

（在你自己的传递validator是可选如果没有它，我们将使用默认的。）

safe_html.html：

<link rel="import" href="../../../../../../../packages/polymer/polymer.html"> 
<polymer-element name="safe-html"> 
    <template> 
    <div id="container"></div> 
    </template> 

    <script type="application/dart" src='safe_html.dart'></script> 
</polymer-element> 

safe_html.dart：

library safe_html; 

import 'dart:async'; 
import "dart:html"; 

import "package:polymer/polymer.dart"; 

@CustomTag("safe-html") 
class SafeHtml extends PolymerElement { 
    @published NodeValidator validator = new NodeValidatorBuilder() 
    ..allowHtml5(uriPolicy: new DefaultUriPolicy()); 

    SafeHtml.created() : super.created(); 

    addFragment() { 
    DivElement container = $['container']; 
    String fragment = this.text; 
    container.setInnerHtml(fragment, // Set the fragment in a safe way. 
     validator: validator); 
    this.text = ""; // Clear the original fragment passed to the element. 
    } 

    attached() { 
    addFragment(); 
    } 
} 

class DefaultUriPolicy implements UriPolicy { 
    DefaultUriPolicy(); 

    // Allow all external, absolute URLs. 
    RegExp regex = new RegExp(r'(?:http://|https://|//)?.*'); 

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

如果选择通过自己的NodeValidator，做到在使用<safe-html>父元素指定一个getter：

NodeValidator get nodeValidator => new NodeValidatorBuilder() 
..allowHtml5(uriPolicy: new ItemUrlPolicy()); 

正如你可以看到我引用UriPolicy我保持像uri_policy一个单独的文件。dart：

import 'dart:html'; 

class ItemUrlPolicy implements UriPolicy { 
    ItemUrlPolicy(); 

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

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

在GünterZöchbauer和SO上其他有用帖子的作者的许多帮助下。

Answer 2

您需要通过一个配置为允许特定标签和属性的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); 
    } 
} 

工作