(Non-security) Toolbar renders HTML included in props, potentially causing unintended script execution in dev mode

[Tc-001]

Astro Info

> astro "info"

Astro                    v4.4.15
Node                     v20.11.1
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/mdx
                         @astrojs/svelte

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

If you insert an element with a prop containing HTML, the HTML will get rendered in the "inspect" overlay, potentially causing a harmless XSS.

This not an issue most of the time, but I am writing an article demonstrating an XSS (a simple alert(1)) and it is a bit annoying.

Notice in the example that I am not rendering the XSS-causing img tag in my code, but it is still getting executed. Stackblitz sandbox doesn't show it as well, but the element is getting loaded, erroring out, and alerting.

What's the expected result?

The inspect overlay does not render HTML if it is in the props

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-1mq73i?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.