fix(html): allow control character in input stream (#20483)

Author: btea

.prettierignore

@@ -7,6 +7,8 @@ pnpm-lock.yaml
 pnpm-workspace.yaml
 playground/tsconfig-json-load-error/has-error/tsconfig.json
 playground/html/invalid.html
+playground/html/invalidClick.html
+playground/html/invalidEscape.html
 playground/html/valid.html
 playground/external/public/[email protected]
 playground/ssr-html/public/[email protected]

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

@@ -9,7 +9,12 @@ import type {
 } from 'rollup'
 import MagicString from 'magic-string'
 import colors from 'picocolors'
-import type { DefaultTreeAdapterMap, ParserError, Token } from 'parse5'
+import type {
+  DefaultTreeAdapterMap,
+  ErrorCodes,
+  ParserError,
+  Token,
+} from 'parse5'
 import { stripLiteral } from 'strip-literal'
 import escapeHtml from 'escape-html'
 import type { MinimalPluginContextWithoutEnvironment, Plugin } from '../plugin'
@@ -34,6 +39,7 @@ import { resolveEnvPrefix } from '../env'
 import { cleanUrl } from '../../shared/utils'
 import { perEnvironmentState } from '../environment'
 import { getNodeAssetAttributes } from '../assetSource'
+import type { Logger } from '../logger'
 import {
   assetUrlRE,
   getPublicAssetFilename,
@@ -184,21 +190,29 @@ function traverseNodes(
   }
 }
 
+type ParseWarnings = Partial<Record<ErrorCodes, string>>
+
 export async function traverseHtml(
   html: string,
   filePath: string,
+  warn: Logger['warn'],
   visitor: (node: DefaultTreeAdapterMap['node']) => void,
 ): Promise<void> {
   // lazy load compiler
   const { parse } = await import('parse5')
+  const warnings: ParseWarnings = {}
   const ast = parse(html, {
     scriptingEnabled: false, // parse inside <noscript>
     sourceCodeLocationInfo: true,
     onParseError: (e: ParserError) => {
-      handleParseError(e, html, filePath)
+      handleParseError(e, html, filePath, warnings)
     },
   })
   traverseNodes(ast, visitor)
+
+  for (const message of Object.values(warnings)) {
+    warn(colors.yellow(`\n${message}`))
+  }
 }
 
 export function getScriptInfo(node: DefaultTreeAdapterMap['element']): {
@@ -297,6 +311,7 @@ function handleParseError(
   parserError: ParserError,
   html: string,
   filePath: string,
+  warnings: ParseWarnings,
 ) {
   switch (parserError.code) {
     case 'missing-doctype':
@@ -318,11 +333,10 @@ function handleParseError(
       return
   }
   const parseError = formatParseError(parserError, filePath, html)
-  throw new Error(
+  warnings[parseError.code] ??=
     `Unable to parse HTML; ${parseError.message}\n` +
-      ` at ${parseError.loc.file}:${parseError.loc.line}:${parseError.loc.column}\n` +
-      `${parseError.frame}`,
-  )
+    ` at ${parseError.loc.file}:${parseError.loc.line}:${parseError.loc.column}\n` +
+    `${parseError.frame.length > 300 ? '[this code frame is omitted as the content was too long] ' : parseError.frame}`
 }
 
 /**
@@ -442,7 +456,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         }
 
         const setModuleSideEffectPromises: Promise<void>[] = []
-        await traverseHtml(html, id, (node) => {
+        await traverseHtml(html, id, config.logger.warn, (node) => {
           if (!nodeIsElement(node)) {
             return
           }
@@ -1238,7 +1252,7 @@ export function injectNonceAttributeTagHook(
 
     const s = new MagicString(html)
 
-    await traverseHtml(html, filename, (node) => {
+    await traverseHtml(html, filename, config.logger.warn, (node) => {
       if (!nodeIsElement(node)) {
         return
       }

packages/vite/src/node/server/middlewares/indexHtml.ts

@@ -269,7 +269,7 @@ const devHtmlHook: IndexHtmlTransformHook = async (
     preTransformRequest(server!, modulePath, decodedBase)
   }
 
-  await traverseHtml(html, filename, (node) => {
+  await traverseHtml(html, filename, config.logger.warn, (node) => {
     if (!nodeIsElement(node)) {
       return
     }

playground/html/__tests__/html.spec.ts

@@ -284,11 +284,11 @@ describe.runIf(isServe)('invalid', () => {
     const message = await errorOverlay.$$eval('.message-body', (m) => {
       return m[0].innerHTML
     })
-    expect(message).toMatch(/^Unable to parse HTML/)
+    expect(message).toContain('Unable to parse HTML')
   })
 
   test('should close overlay when clicked away', async () => {
-    await page.goto(viteTestUrl + '/invalid.html')
+    await page.goto(viteTestUrl + '/invalidClick.html')
     const errorOverlay = await page.waitForSelector('vite-error-overlay')
     expect(errorOverlay).toBeTruthy()
 
@@ -298,7 +298,7 @@ describe.runIf(isServe)('invalid', () => {
   })
 
   test('should close overlay when escape key is pressed', async () => {
-    await page.goto(viteTestUrl + '/invalid.html')
+    await page.goto(viteTestUrl + '/invalidEscape.html')
     const errorOverlay = await page.waitForSelector('vite-error-overlay')
     expect(errorOverlay).toBeTruthy()
 

playground/html/invalidClick.html

@@ -0,0 +1 @@
+<div Bad CLICK HTML</div>

playground/html/invalidEscape.html

@@ -0,0 +1 @@
+<div Bad ESCAPE HTML</div>

playground/vitestSetup.ts

@@ -76,6 +76,21 @@ export function setViteUrl(url: string): void {
   viteTestUrl = url
 }
 
+function throwHtmlParseError() {
+  return {
+    name: 'vite-plugin-throw-html-parse-error',
+    configResolved(config: ResolvedConfig) {
+      const warn = config.logger.warn
+      config.logger.warn = (msg, opts) => {
+        // convert HTML parse warnings to make it easier to test
+        if (msg.includes('Unable to parse HTML;')) {
+          throw new Error(msg)
+        }
+        warn.call(config.logger, msg, opts)
+      }
+    },
+  }
+}
 // #endregion
 
 beforeAll(async (s) => {
@@ -224,6 +239,7 @@ async function loadConfig(configEnv: ConfigEnv) {
       emptyOutDir: false,
     },
     customLogger: createInMemoryLogger(serverLogs),
+    plugins: [throwHtmlParseError()],
   }
   return mergeConfig(options, config || {})
 }