Dart在编辑器升级后删除不允许的属性 [英] Dart Removing disallowed attribute after editor upgraded

问题描述

我在SDK 0.7.3.1_r27487中升级我的dart编辑器后遇到错误删除不允许的属性。

我有一个自定义标签，该模板包含boostarp属性数据目标和数据切换。

  >删除不允许的属性< A data-toggle =dropdown> 
删除不允许的属性< BUTTON data-target =。navbar-collapse> 
删除不允许的属性< BUTTON data-toggle =collapse> 
  

.html代码

 < element extends =divname =x-navbarconstructor =Navbar> 
< template> 
 .. 
< a name =tophref =＃class =dropdown-toggledata-toggle =dropdown> Shop< b class =caret> < / b>< / a> 
 .. 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse>< / button> 
< / template> 
< script type =application / dartsrc =custom_ui.dart>< / script> 
< / element> 
  

解决方案

您可能使用 Element.innerHtml 。您应该改用 Element.setInnerHtml 。

正如你可以看到的这个新方法的参数，HTML代码现在验证和过滤。

要明确允许锚点和按钮上的数据：

  //调用NodeValidatorBuilder.allowX（）方法来定制验证器。 
 
 final NodeValidatorBuilder _htmlValidator = new NodeValidatorBuilder.common（）
 ..allowElement（'a'，attributes：['data-target'，'data-toggle']）
 ..allowElement（'button'，attributes：['data-target'，'data-toggle']）; 
 
 query（'＃anElement'）。setInnerHtml（'a content'，validator：_htmlValidator）; 
  

元素 CustomElement 类在几个地方使用HTML清理（ Element.html factory， innerHtml createFragment method ...）。

即使您不在您自己的代码中直接使用这些方法，它们由底层的Dart库调用（ CustomElement 类为 Polymer 库创建，但也被最新版本 Web UI 库）。

目前，没有办法全局禁用或自定义默认杀毒规则。所以我想你必须处理 setInnerHtml 调用...或等待另一个SDK版本来解决这个问题（data-属性是有效的HTML5代码，但是默认清理过滤器不允许它们以及内联样式：为什么这些属性被认为不安全？）

注意：您应该考虑从Web UI切换到Polymer ，因为 Web UI现已淘汰。

I have encounter error "Removing disallowed attribute" after I upgraded my dart editor in SDK 0.7.3.1_r27487.

I have a custom tag which template contains boostarp attributes "data-target" and "data-toggle". It work under previous version but encounter error after upgraded.

Console

Removing disallowed attribute <A data-toggle="dropdown">
Removing disallowed attribute <BUTTON data-target=".navbar-collapse">
Removing disallowed attribute <BUTTON data-toggle="collapse">

.html Code

<element extends="div" name="x-navbar" constructor="Navbar">
<template>    
  ..
  <a name="top" href="#" class="dropdown-toggle" data-toggle="dropdown">Shop <b class="caret"></b></a>
  ..
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"></button>
</template>
<script type="application/dart" src="custom_ui.dart"></script> 
</element>

解决方案

You're probably using Element.innerHtml. You should use Element.setInnerHtml instead.

As you can see with the parameters of this new method, the HTML code is now validated and filtered. To restore the old behavior, you must provide a validator or a tree sanitizer allowing all attributes.

To explicitly allow "data" on anchors and buttons:

// Call NodeValidatorBuilder.allowX() methods to customize the validator.

final NodeValidatorBuilder _htmlValidator=new NodeValidatorBuilder.common()
  ..allowElement('a', attributes: ['data-target', 'data-toggle'])
  ..allowElement('button', attributes: ['data-target', 'data-toggle']);

query('#anElement').setInnerHtml('a content', validator: _htmlValidator);

Element and CustomElement classes use HTML sanitization in several places (Element.html factory, innerHtml property, createFragment method...).

Even if you don't use these methods directly in your own code, they're called by the underlying Dart libraries (CustomElement class was created for Polymer library but is also used by latest releases of Web UI library).

For the moment, there is NO way to globally disable or customize the default sanitization rules. So I guess you'll have to deal with setInnerHtml calls... or wait for another SDK release to fix the issue ("data-" attributes are valid HTML5 code, but the default sanitization filter doesn't allow them as well as inline styles: why these attributes are considered insecure?).

Note: you should consider switching from Web UI to Polymer, as Web UI is now deprecated.

这篇关于Dart在编辑器升级后删除不允许的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！