Understanding Dart 1.11 new appendHTML sanitizing
I just upgraded to Dart 1.11 and I'm not quite sure what's going on with .appendHTML()
. I have a very large project using a dart and it is .appendHTML()
used quite often. I've been working on this app for over a year now and nothing else works.: /
My console 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;">
Most of the time I create elements with new Element()
and preset styles with .style.
... But sometimes it just isn't necessary and adding HTML as a string is faster and better.
What is the reason why inline styles are removed when sanitized? I could make my own NodeTreeSanitizer
as stated here: appendHtml () doesn't add full HTML-Dart
But that doesn't seem like a very good solution to me, because I think there is a reason why this will happen.
I used the Über Simple Webapp template and just added this line of code:
querySelector('#output').appendHtml('<div style="height: 2em; background: red;">Test</div>');
And the style is just removed:
Removing disallowed attribute <DIV style="height: 2em; background: red;">
But to me it looks like valid HTML.:/
Can someone explain to me what is going on here and why and how I can start my project again.
Thank you so much!
EDIT:
The svg elements are also removed:
Removing disallowed element <g>
Removing disallowed element <text>
Removing disallowed element <image>
Removing disallowed element <polygon>
source to share
Making a custom NodeTreeSanitizer
is the way to go. Wherever text can be added to the DOM as HTML saturation is applied. It was just a control that the sanitation was not performed at .appenedHTML()
. The point is that you explicitly specify which elements can be added to the DOM and which attributes can be added to those elements. This is to ensure that no malicious HTML or JS is added by mistake.
source to share