fix(html): escape html attribute (#18067)

Co-authored-by: 翠 / green <green@sapphi.red>

Author: sunnylost

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

@@ -10,6 +10,7 @@ import MagicString from 'magic-string'
 import colors from 'picocolors'
 import type { DefaultTreeAdapterMap, ParserError, Token } from 'parse5'
 import { stripLiteral } from 'strip-literal'
+import escapeHtml from 'escape-html'
 import type { Plugin } from '../plugin'
 import type { ViteDevServer } from '../server'
 import {
@@ -1510,7 +1511,7 @@ function serializeAttrs(attrs: HtmlTagDescriptor['attrs']): string {
     if (typeof attrs[key] === 'boolean') {
       res += attrs[key] ? ` ${key}` : ``
     } else {
-      res += ` ${key}=${JSON.stringify(attrs[key])}`
+      res += ` ${key}="${escapeHtml(attrs[key])}"`
     }
   }
   return res

playground/html/__tests__/html.spec.ts

@@ -471,3 +471,8 @@ test('html fallback works non browser accept header', async () => {
     ).status,
   ).toBe(200)
 })
+
+test('escape html attribute', async () => {
+  const el = await page.$('.unescape-div')
+  expect(el).toBeNull()
+})

playground/html/vite.config.js

@@ -214,5 +214,22 @@ ${
         ]
       },
     },
+    {
+      name: 'escape-html-attribute',
+      transformIndexHtml: {
+        order: 'post',
+        handler() {
+          return [
+            {
+              tag: 'link',
+              attrs: {
+                href: `"><div class=unescape-div>extra content</div>`,
+              },
+              injectTo: 'body',
+            },
+          ]
+        },
+      },
+    },
   ],
 })