Update overlay.ts to support CSP require-trusted-types-for

[Snugug]

Description

Similar to #15686, overlay.ts uses innerHTML (

vite/packages/vite/src/client/overlay.ts

Line 180 in b2873ac

this.root.innerHTML = template

) to display error messages. innerHTML isn't compatible with require-trusted-types-for, so this fails.

Suggested solution

I think the easiest solution here is turning the template (

vite/packages/vite/src/client/overlay.ts

Line 11 in b2873ac

const template = /*html*/ `

) into a Trusted Type policy (MDN example) if TTs are defined, and leaving it as a string otherwise. This would also require updating the innerHTML call for the template if TTs are available, too.

Alternative

The other alternative is converting this to DOM creation calls and appending it to the DOM, but per my proposed solution to #15686, I'm assuming that's not a likely solution that y'all are interested in adopting.

Additional context

This can be tested now by following my steps in #15686 (comment) and forcing Vite to throw an error.

I did a quick search of the codebase and this was the only core file that I found that used innerHTML, but it's possible there are other cases where this would throw for the CSP that I'm not otherwise aware of. I'd also recommend adding into the Vite coding style guide to avoid innerHTML in core code shipped to browsers.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[Snugug]

I'm also happy to write the Trusted Types conversion for this as I've got an environment set up to test this on already, but am going to hold off doing so until maintainers give me a +1 to do so

[patak-dev]

I agree with you here. This is for internal code so we should be fine here. It is different than with the template. At the risk of making you do work again that we don't end up merging, I think the best is to send the PR so we can discuss with the change in the table.

[Snugug]

Will do, and no problem writing more code! Would you prefer the Trusted Types solution or the DOM method solution?