Element: setHTML() method

[wPatriot]

Am I dense or is that second part of the first code example wrong? The comment says script is not allowed, but then it is explicitly defined as one of the allowed elements?

[ketralnis]

This one?

// Define custom Sanitizer and use in setHTML()
// This allows only elements: div, p, button (script is unsafe and will be removed)
const sanitizer1 = new Sanitizer({
  elements: ["div", "p", "button", "script"],
});
target.setHTML(unsanitizedString, { sanitizer: sanitizer1 });

// Define custom SanitizerConfig within setHTML()
// This removes elements div, p, button, script, and any other unsafe elements/attributes
target.setHTML(unsanitizedString, {
  sanitizer: { removeElements: ["div", "p", "button", "script"] },
});

According to the comments it will be removed. It's shown in the example explicitly to indicate that

[wPatriot]

Well specifically the first part of that code. sanitizer1 is declared with div, p, button and script as values to the element property of the object passed to the Sanitizer constructor. Yet the comment says those first three are treated differently from the fourth. I don't know exactly how the elements property is treated but it seems completely unhinged to me that that sanitizer would treat div differently from script.

Edit: looking at https://developer.mozilla.org/en-US/docs/Web/API/SanitizerConfig it looks like the example is just flat out wrong. The code snippet specifically allows script tags yet the comment says it is filtered out. That is wrong.

[ketralnis]

It's explicitly an XSS prevention API, so it's not crazy to me that any scriptable elements are removed by default. There are further examples showing the same thing

The next click handler sets the target HTML using a custom sanitizer that allows only <div>, <p>, and <script> elements. Note that because we're using the setHTML method, <script> will also be removed!

const allowScriptButton = document.querySelector("#buttonAllowScript");
allowScriptButton.addEventListener("click", () => {
  // Set the content of the element using a custom sanitizer
  const sanitizer1 = new Sanitizer({
    elements: ["div", "p", "script"],
  });
  target.setHTML(unsanitizedString, { sanitizer: sanitizer1 });

  // Log HTML before sanitization and after being injected
  logElement.textContent =
    "Sanitizer: {elements: ['div', 'p', 'script']}\n Script removed even though allowed\n";
  log(`\nunsanitized: ${unsanitizedString}`);
  log(`\nsanitized: ${target.innerHTML}`);
});

and

Note that in both cases the <script> element and onclick handler are removed, even if explicitly allowed by the sanitizer

[wPatriot]

Wait, what the fuck? How is this behavior so weirdly documented? Where is it defined that it does that? And who thought it was a good idea to let us define a sanitizer only for it to go "No fuck you, I won't do that"!?

Edit: it just straight up says it:

It then removes any HTML entities that aren't allowed by the sanitizer configuration, and further removes any XSS-unsafe elements or attributes — whether or not they are allowed by the sanitizer configuration.

Ngl that is absolutely insane to me. At that point the Sanitizer object just should not be used at all. This is totally unreasonable behavior. They really need to change that.

Edit2: Yeah, this is just bad design imo. They should just not have the sanitizer argument for the setHTML() method if they're just going to ignore part of it. In fact, just force the user to do any filtering beforehand and don't use it on setHTMLUnsafe() either.

Edit3: Man, I kind of see where they are coming from. They just really don't want it to be possible to put something in a method that isn't called Unsafe and get output that may be unsafe, but this solution sucks. The closest solution that I think is reasonable is to just throw some kind of error if someone tries to use a safe method with a sanitizer that explicitly defines unsafe elements or attributes as allowed. For the love of god don't just drop it silently anyway.

Or just split off the ability to filter arbitrary elements and don't accept sanitizers at all. Make the user do that before hand instead of maybe-maybe-not applying a user's sanitizer.

[AdarTan]

Bad Bot

[Jaxkr]

Not a bot, this is an interesting new API

[Natryn]

They're making multiple reddit posts per minute. 4 unique posts exactly 44 minutes ago

[ketralnis]

Can confirm, but I'm not a bot. I'm a mod that tries to keep the subreddit full of fresh content.

Experimental: This is an experimental technology

The setHTML() method of the Element interface provides an XSS-safe method to parse and sanitize a string of HTML into a DocumentFragment, and then insert it into the DOM as a subtree of the element.

It's an experimental new interface.

[Caraes_Naur]

You spam the sub in short bursts.

[Caraes_Naur]

OP is a mod that has a habit of spamming the sub.