Improper escaping of HTML attribute when transformIndexHtml is used

[jtbandes]

Describe the bug

Vite plugins which implement the transformIndexHtml() function can choose to return an array, representing HTML tags to be added to the document. The attrs of these tags are improperly escaped and can lead to arbitrary HTML/scripts being injected into the index.html file.

The serializeAttrs function used by the built-in html plugin incorrectly escapes HTML attributes using JSON.stringify:

vite/packages/vite/src/node/plugins/html.ts

Line 1513 in 1a76300

res += ` ${key}=${JSON.stringify(attrs[key])}`

This code dates back to 4 years ago: 9ce2ab4#diff-89bae1df62862bb7f4a03d82a1e9cbf4ac6d0c042f21fbbacb0a2238bd050042R140

Reproduction

https://stackblitz.com/edit/vitejs-vite-swzvsz?file=vite.config.ts

Steps to reproduce

Using the following vite.config.ts:

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'example',
      transformIndexHtml(_html, _ctx) {
        return [
          {
            tag: 'link',
            attrs: {
              rel: 'icon',
              href: `"><script>alert('hi from transformIndexHtml')</script>`,
            },
          },
        ];
      },
    },
  ],
});

The resulting index.html file now includes this:

<link rel="icon" href="\"><script>alert('hi from transformIndexHtml')</script>">

(The leading " was incorrectly escaped with \. One correct way to escape this in a HTML attribute would be ".)

System Info

vite 5.4.3

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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-swzvsz (Open reproduction)