Preview page not loading CSS when iframed

[shesek]

The preview page doesn't appear to load any of its styles when iframed (at least on Firefox 109).

Here's an example of how this looks like for me with a text/plain inscription:

(It's hard to see but it has 'foobar' written in black on black)

This is caused because of the sandbox attribute on the iframe. Adding allow-same-origin fixes it:

However, MDN notes that:

When the embedded document has the same origin as the embedding page, it is strongly discouraged to use both allow-scripts and allow-same-origin, as that lets the embedded document remove the sandbox attribute — making it no more secure than not using the sandbox attribute at all.

But I guess that if sandbox means that CSS can't work, using allow-same-origin or removing sandbox entirely are the only real options :shrug: