了解Dart 1.11的新附加HTML清理 [英] Understanding Dart 1.11's new appendHTML sanitizing

问题描述

我刚刚升级到Dart 1.11，我不太清楚 .appendHTML（）发生了什么。我有一个非常大的项目使用dart和 .appendHTML（）经常使用。我一直在这个应用程序工作了一年多了，没有什么工作了。 ：/

I just upgraded to Dart 1.11 and I don't quite unterstand what's happening with .appendHTML(). I have a very large project using dart and .appendHTML() is used quite often. I have been working on this app for over a year now and nothing works anymore. :/

我的控制台看起来像这样：

My console just looks like this:

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 c $ c>和设置样式使用 .style。 ...但有时它只是没有必要和附加HTML作为字符串只是更快，更好的阅读。

Most of the time I create elements using new Element() and settings styles using .style.... But sometimes it's just not necessary and appending HTML as a string is just faster and better to read.

内联样式在被清理时被删除的原因是什么？我可以自己创建 NodeTreeSanitizer ，如下所示： appendHtml（）不附加完整的HTML - Dart

What is the reason, that inline styles get removed while being sanitized? I could make my own NodeTreeSanitizer as mentioned here: appendHtml() doesn't append the full HTML - Dart

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

But that does not seem like a very good solution to me because I guess there is a reason for this to happen.

我使用überSimple Webapp模板，只是添加了这一行代码：

I have used the Über Simple Webapp template and just added this line of code:

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

且样式刚刚删除：

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

但它看起来像对我有效的HTML。 ：/

But it does look like valid HTML to me. :/

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

Can someone explain to me what happens here and why and how I can get my project to run again.

非常感谢！

编辑：

已删除：

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

推荐答案

创建自定义 NodeTreeSanitizer 是要走的路。在任何地方，文本可以添加到DOM作为HTML卫生应用。这只是一个监督，卫生没有在 .appenedHTML（）中完成。关键是你明确声明哪些元素可以添加到DOM，哪些属性可以添加到这些元素。这是为了确保没有恶意的HTML或JS可以错误地添加到页面。

Creating your custom NodeTreeSanitizer is the way to go. Everywhere where text can be added to the DOM as HTML sanitation is applied. It was just an oversight that sanitation wasn't done in .appenedHTML(). The point is that you declare explicitly which elements can be added to the DOM and which attributes can be added to these elements. This is done to ensure that no malicious HTML or JS can be added to the page by mistake.

这篇关于了解Dart 1.11的新附加HTML清理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！