Side Effect of playable.js

[hmzq-dev]

This applies to all the files named playable.js for example, css-examples/learn/playable.js. What I have noticed is that while editing the CSS, if I add the rule:

* {
  display: none;
}

The whole html page for example this goes blank which is referenced in an iframe here. Which means I can no longer edit the css or even reset it. The only temporary fix for this is to reload the whole page (and thus resetting the css).

Maybe a solution for this would be to always overwrite the display property? (But then that wouldn't allow users to set display: block; or display: none;)

Another problem is that playable.js allows users to change the innerHTML property. Which possibly makes this vulnerable to an HTML injection attack?

[caugner]

Thank you for taking the time to report this issue @hmzq-dev. 👍

There are several ways to "break" the site, and * { display: none; } is only one of it, body { visibility: hidden; } being another one. This is a consequence of having the user-provided CSS and the editor CSS in the same context, and overriding properties like display and visibility are merely workarounds for specific cases.

As for innerHTML, I don't think we need to worry about it, because the user would need to type or paste the malicious code themselves.

All in all, I'm going to close this as won't fix, because it's not a severe issue and there is no trivial fix either.

Thank you for your understanding! 🙏