CSP Injects Incorrectly on Elements Without Closing Tag

[gregtwallace]

Describe the bug

Recently Content Security Policy (CSP) support was added (see: #16052). However, the injection process behaves incorrectly on elements that do not have a closing tag.

For example:
<link rel="stylesheet" href="/roboto.css" />

Becomes this with the current CSP injection behavior:
<link rel="stylesheet" href="/roboto.css" / nonce="abc123">

But it should become:
<link rel="stylesheet" href="/roboto.css" nonce="abc123"/>

This is caused by an offset in the injection function being statically set to 1.

Reproduction

https://github.com/gregtwallace/legocerthub-frontend

Steps to reproduce

Set the following in the vite config:

html: {
    cspNonce: '{SERVER-CSP-NONCE}',
  },

Add a stylesheet link to the index.html file:

<link rel="stylesheet" href="/fonts/roboto.css" />

Run npx vite open the app in a browser, and view the source code that is served.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 7800X3D 8-Core Processor
    Memory: 44.68 GB / 63.21 GB
  Binaries:
    Node: 18.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.92)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-react-swc: ^3.6.0 => 3.6.0
    vite: ^5.2.6 => 5.2.6

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.