Vite breaks when using `require-trusted-types-for` CSP in dev

[IanVS]

Describe the bug

I'm setting up CSP for my site, and I'd like to keep mostly the same rules in dev as I do in prod, to catch potential errors early before deploying.

I turned on require-trusted-types-for 'script', which prevents using .innerHTML = <string> (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for). But, this breaks vite, which uses innerHTML inside updateStyle.

Reproduction

https://github.com/IanVS/vite-csp-require-trusted-types-for-reproduction

Steps to reproduce

Clone the repo above, npm install, npm run dev, and view the error in the console.

System Info

System:
    OS: macOS 12.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 449.52 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.12.1 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Brave Browser: 106.1.44.101
    Firefox: 106.0
    Safari: 15.6.1
  npmPackages:
    vite: ^3.1.0 => 3.1.8

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

I think we still can't make it work with require-trusted-types-for because of this line.

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

Line 142 in 57916a4

this.root.innerHTML = template

That said, I created a PR as I don't find a reason to use innerHTML: #10801

[sanmai-NL]

@IanVS: I see #10800 was merged, what's still left to do?

[IanVS]

There is still the line that @sapphi-red pointed out above.

[GalacticHypernova]

I think what can fix this is using sanitized input internally, rather than setting it with innerHTML.

[ghiscoding]

I think we still can't make it work with require-trusted-types-for because of this line.

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

Line 142 in 57916a4

this.root.innerHTML = template

This could be fixed by using DOMPurify as pointed out in MDN

See also
...
Trusted Types with DOMPurify XSS sanitizer

 this.root.innerHTML = DOMPurify.sanitize(template, {RETURN_TRUSTED_TYPE: true});

the cost would be to add an extra dependency DOMPurify (which is probably the most known JS lib for XSS sanitizing). The proposed code change is what I use in my own projects to get over require-trusted-types-for when removing innerHTML is not possible