javascript - 了解 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 作为string 只是更快更好读。

内联样式在清理时被删除的原因是什么？我可以制作自己的 NodeTreeSanitizer，如下所述:appendHtml() doesn't append the full HTML - Dart

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

我使用了 Ü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 是必经之路。在应用 HTML 清理时，可以在任何地方将文本添加到 DOM。没有在 .appenedHTML() 中完成清理只是一个疏忽。重点是您明确声明哪些元素可以添加到 DOM 以及哪些属性可以添加到这些元素。这样做是为了确保不会错误地将恶意 HTML 或 JS 添加到页面中。