了解 Dart 1.11 的新 appendHTML 清理

Question

我刚刚升级到 Dart 1.11，我不太明白 .appendHTML() 发生了什么。我有一个使用 dart 的非常大的项目，.appendHTML() 经常使用。我已经在这个应用程序上工作了一年多了，现在什么都没有了。 :/

我的控制台是这样的：

Removing disallowed attribute <DIV style="width: 100%; text-align: right;">
Removing disallowed attribute <DIV style="height: 2em;">
Removing disallowed attribute <DIV style="height: 0.6em;">
Removing disallowed attribute <DIV style="height: 2em;">
Removing disallowed attribute <DIV style="height: 1em;">
Removing disallowed attribute <DIV style="text-align: justify;">
Removing disallowed attribute <DIV style="height: 1em;">
Removing disallowed attribute <DIV style="height: 0.6em;">
Removing disallowed attribute <SPAN style="color: #0d4b63; font-size: 1.6em;">

大多数时候我使用 new Element() 创建元素并使用 .style. 设置样式...但有时它只是没有必要并且将 HTML 作为字符串附加更快并且更好读。

内联样式在清理时被删除的原因是什么？我可以制作自己的 NodeTreeSanitizer，如下所述：

但这对我来说似乎不是一个很好的解决方案，因为我想这是有原因的。

我使用了 Über Simple Webapp 模板并添加了这行代码：

querySelector('#output').appendHtml('<div style="height: 2em; background: red;">Test</div>');

刚刚删除的样式：

Removing disallowed attribute <DIV style="height: 2em; background: red;">

但它对我来说确实有效 HTML。 :/

有人可以向我解释这里发生了什么，为什么以及如何让我的项目再次运行。

非常感谢！

编辑：

svg 元素也被删除：

Removing disallowed element <g>
Removing disallowed element <text>
Removing disallowed element <image>
Removing disallowed element <polygon>

Answer 1

创建自定义 NodeTreeSanitizer 是必经之路。在 DOM 应用 HTML 卫生设施时，可以在任何地方添加文本。 .appenedHTML() 没有进行卫生设施只是一个疏忽。重点是您明确声明哪些元素可以添加到 DOM 以及哪些属性可以添加到这些元素。这样做是为了确保不会误将恶意HTML或JS添加到页面中。

了解 Dart 1.11 的新 appendHTML 清理

Understanding Dart 1.11's new appendHTML sanitizing

html

javascript

web-applications

dart