webpack 5.108.3 → 5.109.0

package/lib/html/HtmlGenerator.js

@@ -14,12 +14,147 @@ const {
 } = require("../ModuleSourceTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
+const WebpackError = require("../errors/WebpackError");
+const { getUndoPath } = require("../util/identifier");
+const memoize = require("../util/memoize");
 const { PUBLIC_PATH_AUTO } = require("../util/publicPathPlaceholder");
+const { NodeType, SourceProcessor, escapeAttribute } = require("./syntax");
+
+// Lazy so loading the HTML generator doesn't pull in the whole CSS pipeline.
+const getCssModulesPlugin = memoize(() => require("../css/CssModulesPlugin"));
+// The CSS tokenizer, used to locate `url(...)` when rebasing inlined stylesheets.
+const getCssSyntax = memoize(() => require("../css/syntax"));
+// node's crypto — real SHA hashes for Content-Security-Policy source lists
+// (the wasm hashes are xxhash, unusable for CSP), loaded only when CSP is on.
+const getCreateNodeHash = memoize(() => require("crypto").createHash);
+
+// HTML void elements — serialized without a closing tag when a tag descriptor
+// (`output.html` `injectTags`) doesn't say otherwise.
+const VOID_TAGS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+
+/**
+ * Serializes an attribute map: `true` → bare attribute, `false`/`undefined`/
+ * `null` → omitted, else a quoted (escaped) value.
+ * @param {Record<string, string | boolean | undefined> | undefined} attrs attributes
+ * @returns {string} the leading-space-prefixed attribute string
+ */
+const serializeAttrs = (attrs) => {
+	let out = "";
+	if (attrs) {
+		for (const name of Object.keys(attrs)) {
+			const value = attrs[name];
+			if (value === false || value === undefined || value === null) continue;
+			out +=
+				value === true
+					? ` ${name}`
+					: ` ${name}="${escapeAttribute(`${value}`)}"`;
+		}
+	}
+	return out;
+};
+
+/**
+ * Serializes one tag descriptor. `attrs` values: `true` → bare attribute,
+ * `false`/`undefined` → omitted, else a quoted (escaped) value.
+ * @param {HtmlTagDescriptor} tag the descriptor
+ * @returns {string} the tag's HTML
+ */
+const serializeTag = (tag) => {
+	const attrs = serializeAttrs(tag.attrs);
+	const isVoid =
+		tag.voidTag !== undefined
+			? tag.voidTag
+			: VOID_TAGS.has(tag.tag.toLowerCase());
+	return isVoid
+		? `<${tag.tag}${attrs}>`
+		: `<${tag.tag}${attrs}>${tag.children || ""}</${tag.tag}>`;
+};
+
+/**
+ * Canonical string of an attribute map (present keys, sorted) — used to detect
+ * whether an `transformTags` plugin changed a tag, so unchanged tags stay untouched.
+ * `false`/`undefined`/`null` count as absent.
+ * @param {Record<string, string | boolean | undefined>} attrs attributes
+ * @returns {string} a comparable snapshot
+ */
+const snapshotAttrs = (attrs) =>
+	JSON.stringify(
+		Object.keys(attrs)
+			.filter((name) => {
+				const value = attrs[name];
+				return value !== false && value !== undefined && value !== null;
+			})
+			.sort()
+			.map((name) => [name, attrs[name]])
+	);
+
+/**
+ * Whether an attribute renders (present and not `false`/`undefined`/`null`).
+ * @param {Record<string, string | boolean | undefined>} attrs attributes
+ * @param {string} name attribute name
+ * @returns {boolean} true if it renders
+ */
+const attrPresent = (attrs, name) => {
+	const value = attrs[name];
+	return value !== undefined && value !== false && value !== null;
+};
+
+/**
+ * Whether a `<meta>`'s attributes declare a Content-Security-Policy (case-
+ * insensitive `http-equiv`), used to detect an author-declared CSP.
+ * @param {Record<string, string | boolean | undefined>} attrs attributes
+ * @returns {boolean} true if it is a CSP meta
+ */
+const metaIsCsp = (attrs) => {
+	for (const name of Object.keys(attrs)) {
+		const value = attrs[name];
+		if (
+			name.toLowerCase() === "http-equiv" &&
+			typeof value === "string" &&
+			value.trim().toLowerCase() === "content-security-policy"
+		) {
+			return true;
+		}
+	}
+	return false;
+};
 
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../../declarations/WebpackOptions").HtmlGeneratorOptions} HtmlGeneratorOptions */
+/** @typedef {import("../../declarations/WebpackOptions").OutputHtmlOptions["csp"]} CspOption */
+/** @typedef {import("./HtmlModulesPlugin").HtmlTagDescriptor} HtmlTagDescriptor */
+/** @typedef {import("./HtmlModulesPlugin").HtmlMutableTag} HtmlMutableTag */
+/** @typedef {"head" | "body"} HtmlTagLocation */
+/**
+ * @typedef {object} HtmlTagSpan
+ * @property {number} start opening `<` offset
+ * @property {number} openEnd offset just after the opening `>`
+ * @property {number} end offset just after the whole element
+ * @property {HtmlTagLocation} location the `<head>`/`<body>` region it sits in
+ * @property {number} nameEnd offset after the tag name (nonce insertion point), `-1` for non-`<script>`/`<style>`
+ * @property {number} contentEnd raw-text body end for `<script>`/`<style>`, `-1` otherwise
+ * @property {boolean} selfClosing whether the element is self-closing
+ */
+/** @typedef {{ headOpen: number, headEnd: number, bodyOpen: number, bodyEnd: number }} HtmlAnchors */
+/** @typedef {{ tags: HtmlMutableTag[], spans: (HtmlTagSpan | null)[], originals: (string | null)[], descriptors: (HtmlTagDescriptor | null)[], anchors: HtmlAnchors }} HtmlModel */
 /** @typedef {import("../Chunk")} Chunk */
 /** @typedef {import("../Compilation")} Compilation */
+/** @typedef {boolean | string[] | ((asset: { chunk: Chunk, filename: string }) => string[] | false)} HtmlIntegrity */
 /** @typedef {import("../Compilation").DependencyConstructor} DependencyConstructor */
 /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("../Dependency")} Dependency */
@@ -31,6 +166,7 @@ const { PUBLIC_PATH_AUTO } = require("../util/publicPathPlaceholder");
 /** @typedef {import("../Module").ConcatenationBailoutReasonContext} ConcatenationBailoutReasonContext */
 /** @typedef {import("../ModuleGraph")} ModuleGraph */
 /** @typedef {import("../NormalModule")} NormalModule */
+/** @typedef {import("./HtmlModule").HtmlModuleBuildInfo} HtmlModuleBuildInfo */
 /** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
 /** @typedef {import("../RuntimeTemplate")} RuntimeTemplate */
 /** @typedef {import("../util/Hash")} Hash */
@@ -47,12 +183,117 @@ const JAVASCRIPT_AND_HTML_TYPES = new Set([JAVASCRIPT_TYPE, HTML_TYPE]);
 /** @type {WeakMap<Compilation, Map<string, Chunk>>} */
 const chunksByIdCache = new WeakMap();
 
+/**
+ * `String(chunk.id)` → chunk lookup, memoized per compilation and shared by the
+ * URL and integrity sentinel resolvers.
+ * @param {Compilation} compilation compilation
+ * @returns {Map<string, Chunk>} chunks keyed by stringified id
+ */
+const getChunksById = (compilation) => {
+	let chunksById = chunksByIdCache.get(compilation);
+	if (chunksById === undefined) {
+		chunksById = new Map();
+		for (const chunk of compilation.chunks) {
+			chunksById.set(String(chunk.id), chunk);
+		}
+		chunksByIdCache.set(compilation, chunksById);
+	}
+	return chunksById;
+};
+
 // Hoisted so `resolveChunkUrlSentinels` (per chunk × module) doesn't allocate a
 // fresh `RegExp` each call. `String#replace` resets `lastIndex`, so sharing the
 // global-flag instance is safe under these synchronous, non-reentrant calls.
 const CHUNK_URL_SENTINEL_REGEXP =
 	/__WEBPACK_HTML_CHUNK_URL__([0-9a-f]+)__([a-z]+)__END__/g;
 
+// Sentinel for a linked HTML page (a tag mapped to the `html` source type);
+// resolved to the page's emitted filename once it has been built. Keyed by the
+// linked module's id so it shares the `<iframe srcdoc>` nested-module mechanism.
+const HTML_PAGE_URL_SENTINEL_REGEXP =
+	/__WEBPACK_HTML_PAGE_URL__([0-9a-f]+)__END__/g;
+
+// Sentinel for a URL-referenced asset (font/image/…) emitted into a resource-hint
+// `<link>` tag by `HtmlEntryDependency`; resolved to the asset's real emitted
+// URL from its codegen data during `HtmlModulesPlugin` render. Deferred because
+// HtmlEntry deps run *while* the HTML module is being codegen'd — the asset
+// module's own codegen might not have completed yet. Keyed by the asset
+// module's identifier, hex-encoded so any character in it is safe in a URL.
+const ASSET_URL_SENTINEL_REGEXP =
+	/__WEBPACK_HTML_ASSET_URL__([0-9a-f]+)__END__/g;
+
+// Matches the whole ` integrity="<sentinel>"` so the attribute can be dropped
+// entirely when the per-asset `integrity` function returns `false`.
+const INTEGRITY_SENTINEL_REGEXP =
+	/ integrity="__WEBPACK_HTML_INTEGRITY__([0-9a-f]+)__([a-z]+)__END__"/g;
+
+// Same attribute, but tolerant of the `\"` escaping the surrounding quotes get
+// when the HTML lives inside a JS string literal — used only to strip it there.
+const INTEGRITY_SENTINEL_STRIP_REGEXP =
+	/ integrity=\\?"__WEBPACK_HTML_INTEGRITY__[0-9a-f]+__[a-z]+__END__\\?"/g;
+
+// The trailing `(?:__<hash>)?` is the inlined chunk's content hash, embedded by
+// `embedInlineChunkHashes` so the host HTML's bytes (and its `[contenthash]`,
+// incl. RealContentHashPlugin's recompute) change with the inlined content; the
+// resolver ignores it.
+const INLINE_SENTINEL_REGEXP =
+	/__WEBPACK_HTML_INLINE__([0-9a-f]+)__([a-z]+)(?:__[0-9a-f]+)?__END__/g;
+
+/**
+ * Rewrite relative `url(...)` references in a CSS chunk so they still resolve
+ * after the styles are inlined into the HTML document (which may sit in a
+ * different directory). webpack emits every url as `undoPath(cssFile) + <asset
+ * path from the output root>`, so swapping the CSS file's undo prefix for the
+ * HTML file's re-bases them — no path math. Uses the CSS tokenizer to find url
+ * tokens exactly (never a `url(` inside a comment or string); webpack emits
+ * unquoted url()s (special characters `\`-escaped), so only that shape occurs.
+ * @param {string} css the CSS content
+ * @param {string} fromFile the CSS file's output name
+ * @param {string} toFile the HTML file's output name
+ * @param {string} outputPath the compilation output path
+ * @returns {string} the CSS with rebased urls
+ */
+const rebaseCssUrls = (css, fromFile, toFile, outputPath) => {
+	const fromUndo = getUndoPath(fromFile, outputPath, false);
+	const toUndo = getUndoPath(toFile, outputPath, false);
+	if (fromUndo === toUndo) return css;
+	const { readToken, TT_URL } = getCssSyntax();
+	const token = {
+		type: 0,
+		start: 0,
+		end: 0,
+		isId: false,
+		contentStart: 0,
+		contentEnd: 0,
+		unitStart: 0
+	};
+	let pos = 0;
+	let last = 0;
+	let out = "";
+	while (readToken(css, pos, token) !== undefined) {
+		pos = token.end;
+		if (token.type !== TT_URL) continue;
+		const url = css.slice(token.contentStart, token.contentEnd);
+		// Rebase only the undo-path-relative urls; a root-relative (`/`), fragment
+		// (`#`) or scheme (`data:`, …, a `:` before any `/`) url is absolute.
+		const colon = url.indexOf(":");
+		const slash = url.indexOf("/");
+		if (
+			!url.startsWith(fromUndo) ||
+			url[0] === "/" ||
+			url[0] === "#" ||
+			(colon !== -1 && (slash === -1 || colon < slash))
+		) {
+			continue;
+		}
+		out += `${css.slice(last, token.contentStart)}${toUndo}${url.slice(
+			fromUndo.length
+		)}`;
+		last = token.contentEnd;
+	}
+	return last === 0 ? css : out + css.slice(last);
+};
+
 class HtmlGenerator extends Generator {
 	/**
 	 * Emit a sentinel for a chunk URL that can't be resolved at code-gen time
@@ -78,34 +319,29 @@ class HtmlGenerator extends Generator {
 	static resolveChunkUrlSentinels(content, compilation) {
 		if (!content.includes("__WEBPACK_HTML_CHUNK_URL__")) return content;
 		const outputOptions = compilation.outputOptions;
-		let chunksById = chunksByIdCache.get(compilation);
-		if (chunksById === undefined) {
-			chunksById = new Map();
-			for (const chunk of compilation.chunks) {
-				chunksById.set(String(chunk.id), chunk);
-			}
-			chunksByIdCache.set(compilation, chunksById);
-		}
+		const chunksById = getChunksById(compilation);
 		return content.replace(
 			CHUNK_URL_SENTINEL_REGEXP,
 			(_, hexId, contentHashType) => {
 				const chunkId = Buffer.from(hexId, "hex").toString("utf8");
 				const chunk = chunksById.get(chunkId);
 				if (!chunk) return "data:,";
+				// Reuse each pipeline's own filename-template resolver so the URL
+				// matches exactly what that plugin emits (worker/hot-update chunk
+				// handling included), mirroring the CSS branch.
 				let filenameTemplate;
 				if (contentHashType === "css") {
-					const CssModulesPlugin = require("../css/CssModulesPlugin");
-
-					filenameTemplate = CssModulesPlugin.getChunkFilenameTemplate(
+					filenameTemplate = getCssModulesPlugin().getChunkFilenameTemplate(
 						chunk,
 						outputOptions
 					);
 				} else {
-					filenameTemplate =
-						chunk.filenameTemplate ||
-						(chunk.canBeInitial()
-							? outputOptions.filename
-							: outputOptions.chunkFilename);
+					const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
+
+					filenameTemplate = JavascriptModulesPlugin.getChunkFilenameTemplate(
+						chunk,
+						outputOptions
+					);
 				}
 				const filename = compilation.getPath(
 					/** @type {import("../TemplatedPathPlugin").TemplatePath} */
@@ -120,6 +356,642 @@ class HtmlGenerator extends Generator {
 		);
 	}
 
+	/**
+	 * Emit a sentinel for a linked HTML page's URL (a tag the user mapped to
+	 * the `html` source `type`). The page's emitted filename isn't known at
+	 * code-gen time; `resolveHtmlPageUrlSentinels` swaps it for
+	 * `${PUBLIC_PATH_AUTO}<htmlFilename>` once the page has been built.
+	 * @param {string | number} moduleId id of the linked HTML module
+	 * @returns {string} sentinel
+	 */
+	static makeHtmlPageUrlSentinel(moduleId) {
+		const hexId = Buffer.from(String(moduleId), "utf8").toString("hex");
+		return `__WEBPACK_HTML_PAGE_URL__${hexId}__END__`;
+	}
+
+	/**
+	 * Replace every `makeHtmlPageUrlSentinel` sentinel in `content` with
+	 * `${PUBLIC_PATH_AUTO}<htmlFilename>`, resolving each linked page's emitted
+	 * filename through `getFilename`.
+	 * @param {string} content content
+	 * @param {(moduleId: string) => string} getFilename maps a linked module id to its emitted html filename
+	 * @returns {string} resolved content
+	 */
+	static resolveHtmlPageUrlSentinels(content, getFilename) {
+		if (!content.includes("__WEBPACK_HTML_PAGE_URL__")) return content;
+		return content.replace(
+			HTML_PAGE_URL_SENTINEL_REGEXP,
+			(_, hexId) =>
+				`${PUBLIC_PATH_AUTO}${getFilename(
+					Buffer.from(hexId, "hex").toString("utf8")
+				)}`
+		);
+	}
+
+	/**
+	 * Emit a sentinel for a URL-referenced asset module. Resolved by
+	 * `resolveAssetUrlSentinels` from the asset module's own codegen data
+	 * (`data.get("url")`), which isn't populated when `HtmlEntryDependency`
+	 * runs — the asset module's own codegen may still be pending.
+	 * @param {string} moduleIdentifier the referenced asset module's `identifier()`
+	 * @returns {string} sentinel
+	 */
+	static makeAssetUrlSentinel(moduleIdentifier) {
+		const hex = Buffer.from(moduleIdentifier, "utf8").toString("hex");
+		return `__WEBPACK_HTML_ASSET_URL__${hex}__END__`;
+	}
+
+	/**
+	 * Replace every `makeAssetUrlSentinel` in `content` with the asset module's
+	 * emitted URL, read from its codegen data. Unresolved sentinels (module
+	 * absent, no codegen result yet, or no URL channel — e.g. an inlined
+	 * data-URI) map to `data:,` so the surrounding `<link>` degrades cleanly
+	 * instead of shipping the raw placeholder.
+	 * @param {string} content content
+	 * @param {Compilation} compilation compilation
+	 * @returns {string} resolved content
+	 */
+	static resolveAssetUrlSentinels(content, compilation) {
+		if (!content.includes("__WEBPACK_HTML_ASSET_URL__")) return content;
+		/** @type {Map<string, import("../Module")>} */
+		const byIdentifier = new Map();
+		for (const m of compilation.modules) byIdentifier.set(m.identifier(), m);
+		const codeGenerationResults =
+			/** @type {import("../CodeGenerationResults")} */
+			(compilation.codeGenerationResults);
+		return content.replace(ASSET_URL_SENTINEL_REGEXP, (_, hex) => {
+			const id = Buffer.from(hex, "hex").toString("utf8");
+			const module = byIdentifier.get(id);
+			if (!module) return "data:,";
+			if (!codeGenerationResults.has(module, undefined)) return "data:,";
+			const codeGen = codeGenerationResults.get(module, undefined);
+			const data = codeGen.data;
+			if (!data) return "data:,";
+			const url =
+				/** @type {Record<string, string | undefined> | undefined} */
+				(data.get("url"));
+			// Prefer the `asset-url` channel — it's the actual URL string
+			// (publicPath + filename). Also handled: assets reached only from JS
+			// have no `asset-url` channel (their only URL is the JS expression
+			// `__webpack_require__.p + "…"`); for those we reconstruct the URL
+			// from the emitted `filename` + `PUBLIC_PATH_AUTO` so the same
+			// undo-path substitution runs at asset render.
+			if (url && url["asset-url"]) return url["asset-url"];
+			const filename = /** @type {string | undefined} */ (data.get("filename"));
+			if (filename) return `${PUBLIC_PATH_AUTO}${filename}`;
+			return "data:,";
+		});
+	}
+
+	/**
+	 * Emit a sentinel for a chunk's SRI hash. Resolved late (after
+	 * `RealContentHashPlugin`) by `resolveChunkIntegritySentinels`, since the
+	 * hash must cover the chunk's final emitted bytes.
+	 * @param {Chunk} chunk chunk
+	 * @param {"javascript" | "css"} contentHashType which chunk asset to hash
+	 * @returns {string} sentinel
+	 */
+	static makeChunkIntegritySentinel(chunk, contentHashType) {
+		const hexId = Buffer.from(String(chunk.id), "utf8").toString("hex");
+		return `__WEBPACK_HTML_INTEGRITY__${hexId}__${contentHashType}__END__`;
+	}
+
+	/**
+	 * Drop every ` integrity="<sentinel>"` from `content`. Used on the HTML
+	 * string embedded in a JS chunk (e.g. `<iframe srcdoc>`), where a real SRI
+	 * hash can't be produced — the chunk's own bytes aren't final at render time
+	 * — and resolving it later would mutate the chunk after its content hash was
+	 * computed. Only real HTML output assets keep the sentinel for late resolution.
+	 * @param {string} content content
+	 * @returns {string} content with integrity sentinels removed
+	 */
+	static stripChunkIntegritySentinels(content) {
+		if (!content.includes("__WEBPACK_HTML_INTEGRITY__")) return content;
+		return content.replace(INTEGRITY_SENTINEL_STRIP_REGEXP, "");
+	}
+
+	/**
+	 * Replace every ` integrity="<sentinel>"` with the chunk's real SRI hashes,
+	 * or drop the attribute when `integrity` (a function) returns `false` for it.
+	 * @param {string} content content
+	 * @param {Compilation} compilation compilation
+	 * @param {HtmlIntegrity} integrity the `output.html.integrity` option
+	 * @returns {string} resolved content
+	 */
+	static resolveChunkIntegritySentinels(content, compilation, integrity) {
+		if (!content.includes("__WEBPACK_HTML_INTEGRITY__")) return content;
+
+		const crypto = require("crypto");
+
+		// Report each bad hash algorithm once, not once per referencing tag.
+		const reportedBadAlgorithms = new Set();
+
+		const chunksById = getChunksById(compilation);
+		return content.replace(
+			INTEGRITY_SENTINEL_REGEXP,
+			(_, hexId, contentHashType) => {
+				const chunkId = Buffer.from(hexId, "hex").toString("utf8");
+				const chunk = chunksById.get(chunkId);
+				if (!chunk) return "";
+				// `chunk.files` holds the real emitted names (after
+				// `RealContentHashPlugin`), so hash those bytes — not a name
+				// re-derived from the template, which still has the pre-hash value.
+				let filename;
+				for (const file of chunk.files) {
+					if ((contentHashType === "css") === file.endsWith(".css")) {
+						filename = file;
+						break;
+					}
+				}
+				if (!filename) return "";
+				const asset = compilation.getAsset(filename);
+				if (!asset) return "";
+				const algorithms =
+					typeof integrity === "function"
+						? integrity({ chunk, filename })
+						: integrity === true
+							? ["sha384"]
+							: integrity;
+				if (!algorithms || algorithms.length === 0) return "";
+				const buffer = asset.source.buffer();
+				const parts = [];
+				for (const algorithm of algorithms) {
+					// `crypto.createHash` throws on an unknown algorithm name — turn
+					// that into a webpack error and skip the algorithm instead of
+					// crashing the whole compilation out of `processAssets`.
+					try {
+						parts.push(
+							`${algorithm}-${crypto
+								.createHash(algorithm)
+								.update(buffer)
+								.digest("base64")}`
+						);
+					} catch (_err) {
+						if (!reportedBadAlgorithms.has(algorithm)) {
+							reportedBadAlgorithms.add(algorithm);
+							compilation.errors.push(
+								new WebpackError(
+									`output.html.integrity: unsupported hash algorithm ${JSON.stringify(
+										algorithm
+									)}`
+								)
+							);
+						}
+					}
+				}
+				if (parts.length === 0) return "";
+				return ` integrity="${parts.join(" ")}"`;
+			}
+		);
+	}
+
+	/**
+	 * @param {Chunk} chunk chunk
+	 * @param {"javascript" | "css"} contentHashType which chunk asset to inline
+	 * @returns {string} sentinel
+	 */
+	static makeChunkInlineSentinel(chunk, contentHashType) {
+		const hexId = Buffer.from(String(chunk.id), "utf8").toString("hex");
+		return `__WEBPACK_HTML_INLINE__${hexId}__${contentHashType}__END__`;
+	}
+
+	/**
+	 * Replace every inline sentinel with the chunk's actual source content.
+	 * Must run after `RealContentHashPlugin` so the final emitted filenames are
+	 * known (we look up the asset by filename from `chunk.files`).
+	 * @param {string} content content
+	 * @param {Compilation} compilation compilation
+	 * @param {string} htmlFilename output name of the HTML file being resolved (to rebase CSS urls)
+	 * @param {Set<string>=} inlinedFiles collects every chunk file inlined here, so the caller can drop now-unreferenced assets
+	 * @returns {string} resolved content
+	 */
+	static resolveChunkInlineSentinels(
+		content,
+		compilation,
+		htmlFilename,
+		inlinedFiles
+	) {
+		if (!content.includes("__WEBPACK_HTML_INLINE__")) return content;
+		const chunksById = getChunksById(compilation);
+		const outputPath = /** @type {string} */ (compilation.outputOptions.path);
+		return content.replace(
+			INLINE_SENTINEL_REGEXP,
+			(_, hexId, contentHashType) => {
+				const chunkId = Buffer.from(hexId, "hex").toString("utf8");
+				const chunk = chunksById.get(chunkId);
+				if (!chunk) return "";
+				const isCss = contentHashType === "css";
+				let out = "";
+				for (const file of chunk.files) {
+					if (isCss !== file.endsWith(".css")) continue;
+					const asset = compilation.getAsset(file);
+					if (!asset) continue;
+					let raw = String(asset.source.source());
+					if (isCss) {
+						// Styles move into the document, so relative `url(...)` must be
+						// rebased; then escape `</style` so it can't close the block early.
+						raw = rebaseCssUrls(raw, file, htmlFilename, outputPath).replace(
+							/<\/(style)/gi,
+							"<\\/$1"
+						);
+					} else {
+						// Escape `</script` (early close) and `<!--` (enters the script-data
+						// escaped state, where a later `<script` hides the real close); both
+						// only occur inside a string/comment/regex, where `<\` is inert.
+						raw = raw
+							.replace(/<\/(script)/gi, "<\\/$1")
+							.replace(/<!--/g, "<\\!--");
+					}
+					out += raw;
+					if (inlinedFiles) inlinedFiles.add(file);
+				}
+				return out;
+			}
+		);
+	}
+
+	/**
+	 * Parses the final HTML once and collects everything the `output.html`
+	 * post-processing stages need: every `<script>`/`<link>`/`<style>`/`<meta>` as
+	 * a mutable descriptor (for `transformTags`) paired with its source span, an
+	 * attribute snapshot (to detect changes), and — for `<script>`/`<style>` — the
+	 * raw-text body range and nonce insertion point (for CSP); plus the
+	 * `<head>`/`<body>` open/content-end anchors (for `injectTags`). One parse feeds
+	 * `injectTags` + `transformTags` + CSP, which `renderHtml` then applies in a
+	 * single pass. Uses the pipeline's own parser (no regex).
+	 * @param {string} content the final HTML (inline content already resolved)
+	 * @returns {HtmlModel} the collected model
+	 */
+	static collectHtml(content) {
+		/** @type {HtmlMutableTag[]} */
+		const tags = [];
+		/** @type {(HtmlTagSpan | null)[]} */
+		const spans = [];
+		/** @type {(string | null)[]} */
+		const originals = [];
+		/** @type {(HtmlTagDescriptor | null)[]} */
+		const descriptors = [];
+		let headOpen = -1;
+		let headEnd = -1;
+		let bodyOpen = -1;
+		let bodyEnd = -1;
+		let headDepth = 0;
+		let bodyDepth = 0;
+		// `skip.text` populates `contentEnd` (raw-text body end) without
+		// materializing text nodes; `</script` stays escaped, so CSP hashes match
+		// the exact bytes the browser sees.
+		new SourceProcessor()
+			.use({
+				[NodeType.Element]: {
+					enter: (path) => {
+						const name = path.tagName();
+						if (name === "head") {
+							if (headOpen < 0) headOpen = headEnd = path.tagEnd();
+							headDepth++;
+							return;
+						}
+						if (name === "body") {
+							if (bodyOpen < 0) bodyOpen = bodyEnd = path.tagEnd();
+							bodyDepth++;
+							return;
+						}
+						const end = path.end();
+						if (headDepth > 0 && end > headEnd) headEnd = end;
+						if (bodyDepth > 0 && end > bodyEnd) bodyEnd = end;
+						if (
+							name !== "script" &&
+							name !== "link" &&
+							name !== "style" &&
+							name !== "meta"
+						) {
+							return;
+						}
+						/** @type {Record<string, string | boolean | undefined>} */
+						const attrs = {};
+						const count = path.attributeCount();
+						for (let i = 0; i < count; i++) {
+							const attr = path.attributeAt(i);
+							attrs[path.attributeName(attr)] =
+								path.attributeValueStart(attr) === -1
+									? true
+									: path.attributeValue(attr);
+						}
+						const isRawText = name === "script" || name === "style";
+						tags.push({
+							tag: name,
+							attrs,
+							injectTo: bodyDepth > 0 ? "body" : "head"
+						});
+						spans.push({
+							start: path.start(),
+							openEnd: path.tagEnd(),
+							end,
+							location: bodyDepth > 0 ? "body" : "head",
+							nameEnd: isRawText ? path.nameEnd() : -1,
+							contentEnd: isRawText ? path.contentEnd() : -1,
+							selfClosing: path.selfClosing()
+						});
+						originals.push(snapshotAttrs(attrs));
+						descriptors.push(null);
+					},
+					exit: (path) => {
+						const name = path.tagName();
+						if (name === "head") {
+							if (headDepth > 0) headDepth--;
+						} else if (name === "body" && bodyDepth > 0) {
+							bodyDepth--;
+						}
+					}
+				}
+			})
+			.process(content, { skip: { text: true, doctype: true } });
+		return {
+			tags,
+			spans,
+			originals,
+			descriptors,
+			anchors: { headOpen, headEnd, bodyOpen, bodyEnd }
+		};
+	}
+
+	/**
+	 * Appends `injectTags` descriptors to the model as spanless tags (pure inserts
+	 * placed by `injectTo`), so `transformTags` sees them alongside the page's own
+	 * tags and CSP hashes any injected inline `<script>`/`<style>`. `attrs` is
+	 * copied so a `transformTags` mutation never corrupts the caller's descriptor.
+	 * @param {HtmlModel} model the value from `collectHtml`
+	 * @param {HtmlTagDescriptor[]} injected the `injectTags` descriptors
+	 * @returns {void}
+	 */
+	static addInjectedTags(model, injected) {
+		for (const descriptor of injected) {
+			model.tags.push({
+				tag: descriptor.tag,
+				attrs: descriptor.attrs ? { ...descriptor.attrs } : {},
+				injectTo: descriptor.injectTo || "head"
+			});
+			model.spans.push(null);
+			model.originals.push(null);
+			model.descriptors.push(descriptor);
+		}
+	}
+
+	/**
+	 * Renders the collected (and hook-mutated) model back into HTML in a single
+	 * pass: injected tags are placed by `injectTo`; an existing tag is left
+	 * byte-for-byte unless it was removed, moved (`<head>`↔`<body>`, honoring
+	 * `*-prepend`), or had its `attrs` changed; and — when `csp` is set and the
+	 * page declares no CSP — a strict `<meta http-equiv="Content-Security-Policy">`
+	 * is injected with a hash of every inline `<script>`/`<style>` (page's own and
+	 * injected) plus an optional placeholder `nonce` on each. Edits run
+	 * right-to-left; at a shared offset a delete/replace runs before an insert.
+	 * @param {string} content the collected HTML (inline content already resolved)
+	 * @param {HtmlModel} model the value from `collectHtml` after the hooks
+	 * @param {CspOption} csp the `output.html.csp` option
+	 * @returns {string} the rendered HTML
+	 */
+	static renderHtml(content, model, csp) {
+		const { tags, spans, originals, descriptors, anchors } = model;
+		// CSP setup: an author-declared policy (page's own or injected) wins.
+		const options = csp ? (csp === true ? {} : csp) : undefined;
+		const nonce = options && options.nonce;
+		let hasCsp = false;
+		if (options) {
+			for (let i = 0; i < tags.length; i++) {
+				const tag = tags[i];
+				if (!tag.remove && tag.tag === "meta" && metaIsCsp(tag.attrs)) {
+					hasCsp = true;
+					break;
+				}
+			}
+		}
+		const addCsp = Boolean(options) && !hasCsp;
+		/** @type {Set<string>} */
+		const scriptSrc = new Set();
+		/** @type {Set<string>} */
+		const styleSrc = new Set();
+		let hashOf;
+		if (addCsp) {
+			const hashFunction =
+				/** @type {Exclude<CspOption, boolean | undefined>} */ (options)
+					.hashFunction || "sha256";
+			const createHash = getCreateNodeHash();
+			hashOf = (/** @type {string} */ body) =>
+				`'${hashFunction}-${createHash(hashFunction)
+					.update(body, "utf8")
+					.digest("base64")}'`;
+		}
+		// Insertions accumulated per offset (placement order preserved); range edits
+		// replace/delete an existing tag's span; region groups collect placements so
+		// `*-prepend` precedes the plain name at a shared (empty-region) anchor.
+		/** @type {Map<number, string>} */
+		const inserts = new Map();
+		/** @type {(pos: number, text: string) => void} */
+		const at = (pos, text) => {
+			if (text) inserts.set(pos, (inserts.get(pos) || "") + text);
+		};
+		// Placements accumulate per region so `*-prepend` always precedes the plain
+		// name at a shared offset (an empty `<head>`/`<body>`); emitted at the anchors
+		// after the loop.
+		/** @type {Record<string, string>} */
+		const groups = {
+			"head-prepend": "",
+			head: "",
+			"body-prepend": "",
+			body: ""
+		};
+		/** @type {(region: string | undefined, text: string) => void} */
+		const place = (region, text) => {
+			if (text) {
+				groups[region !== undefined && region in groups ? region : "head"] +=
+					text;
+			}
+		};
+		/** @type {{ start: number, end: number, text: string, insert: boolean }[]} */
+		const edits = [];
+		for (let i = 0; i < tags.length; i++) {
+			const tag = tags[i];
+			const span = spans[i];
+			const isRawText = tag.tag === "script" || tag.tag === "style";
+			const needsNonce =
+				addCsp &&
+				Boolean(nonce) &&
+				isRawText &&
+				!attrPresent(tag.attrs, "nonce");
+			// Hash an inline `<script>`/`<style>` (page's own or injected). External
+			// `<script src>` is covered by `'self'`; a self-closing tag has no body.
+			if (addCsp && isRawText && !tag.remove) {
+				const isScript = tag.tag === "script";
+				let body = "";
+				if (span) {
+					if (
+						!span.selfClosing &&
+						!(isScript && attrPresent(tag.attrs, "src"))
+					) {
+						body = content.slice(span.openEnd, span.contentEnd);
+					}
+				} else if (!(isScript && attrPresent(tag.attrs, "src"))) {
+					body =
+						/** @type {HtmlTagDescriptor} */ (descriptors[i]).children || "";
+				}
+				if (body !== "") {
+					(isScript ? scriptSrc : styleSrc).add(
+						/** @type {(body: string) => string} */ (hashOf)(body)
+					);
+				}
+			}
+			if (!span) {
+				// Injected tag: serialize (with a nonce when CSP asks) and place it.
+				if (tag.remove) continue;
+				const descriptor = /** @type {HtmlTagDescriptor} */ (descriptors[i]);
+				const attrs = needsNonce
+					? { nonce: /** @type {string} */ (nonce), ...tag.attrs }
+					: tag.attrs;
+				place(
+					tag.injectTo || "head",
+					serializeTag({
+						tag: tag.tag,
+						attrs,
+						children: descriptor.children,
+						voidTag: descriptor.voidTag
+					})
+				);
+				continue;
+			}
+			// Existing tag.
+			if (tag.remove) {
+				edits.push({
+					start: span.start,
+					end: span.end,
+					text: "",
+					insert: false
+				});
+				continue;
+			}
+			const attrsChanged = snapshotAttrs(tag.attrs) !== originals[i];
+			const moved =
+				tag.injectTo !== undefined && tag.injectTo !== span.location;
+			const nonceStr = needsNonce
+				? ` nonce="${escapeAttribute(/** @type {string} */ (nonce))}"`
+				: "";
+			if (moved) {
+				const opening = `<${tag.tag}${nonceStr}${serializeAttrs(tag.attrs)}>`;
+				edits.push({
+					start: span.start,
+					end: span.end,
+					text: "",
+					insert: false
+				});
+				place(tag.injectTo, opening + content.slice(span.openEnd, span.end));
+			} else if (attrsChanged) {
+				// Rewrite the opening tag (a nonce, if any, lands first).
+				edits.push({
+					start: span.start,
+					end: span.openEnd,
+					text: `<${tag.tag}${nonceStr}${serializeAttrs(tag.attrs)}>`,
+					insert: false
+				});
+			} else if (nonceStr) {
+				// Nonce-only change: insert right after the tag name, rest verbatim.
+				edits.push({
+					start: span.nameEnd,
+					end: span.nameEnd,
+					text: nonceStr,
+					insert: true
+				});
+			}
+		}
+		if (addCsp) {
+			if (nonce) {
+				scriptSrc.add(`'nonce-${nonce}'`);
+				styleSrc.add(`'nonce-${nonce}'`);
+			}
+			// Strict baseline; a user `policy` directive replaces one, hashes/nonce append.
+			/** @type {Map<string, Set<string>>} */
+			const directives = new Map([
+				["script-src", new Set(["'self'"])],
+				["style-src", new Set(["'self'"])],
+				["object-src", new Set(["'none'"])],
+				["base-uri", new Set(["'self'"])]
+			]);
+			const policyOption =
+				/** @type {Exclude<CspOption, boolean | undefined>} */ (options).policy;
+			if (policyOption) {
+				for (const [name, value] of Object.entries(policyOption)) {
+					directives.set(name, new Set(Array.isArray(value) ? value : [value]));
+				}
+			}
+			/** @type {(name: string, extra: Set<string>) => void} */
+			const append = (name, extra) => {
+				let set = directives.get(name);
+				if (!set) directives.set(name, (set = new Set()));
+				for (const value of extra) set.add(value);
+			};
+			append("script-src", scriptSrc);
+			append("style-src", styleSrc);
+			const policy = [...directives]
+				.filter(([, values]) => values.size > 0)
+				.map(([name, values]) => `${name} ${[...values].join(" ")}`)
+				.join("; ");
+			const meta = `<meta http-equiv="Content-Security-Policy" content="${escapeAttribute(
+				policy
+			)}">`;
+			// First at the head anchor, so it precedes any head-prepend tag.
+			at(anchors.headOpen, meta);
+		}
+		// Emit region placements at the `<head>`/`<body>` anchors (after any CSP
+		// meta, prepend before the plain name). The parser always synthesizes an
+		// implied `<head>`/`<body>`, so both anchors are always present.
+		at(anchors.headOpen, groups["head-prepend"]);
+		at(anchors.headEnd, groups.head);
+		at(anchors.bodyOpen, groups["body-prepend"]);
+		at(anchors.bodyEnd, groups.body);
+		for (const [pos, text] of inserts) {
+			edits.push({ start: pos, end: pos, text, insert: true });
+		}
+		if (edits.length === 0) return content;
+		edits.sort(
+			(a, b) => b.start - a.start || Number(a.insert) - Number(b.insert)
+		);
+		let result = content;
+		for (const edit of edits) {
+			result = result.slice(0, edit.start) + edit.text + result.slice(edit.end);
+		}
+		return result;
+	}
+
+	/**
+	 * Embeds each inlined chunk's content hash into its inline sentinel
+	 * (`…__<type>__END__` → `…__<type>__<hash>__END__`). The sentinel otherwise
+	 * carries only the stable chunk id, so the host HTML's bytes wouldn't change
+	 * when the inlined content changes — the resolved chunk URL that normally
+	 * busts the page `[contenthash]` is gone once inlined. Embedding the hash
+	 * makes the emitted bytes content-dependent, so both the initial hash and
+	 * RealContentHashPlugin's recompute pick up inlined-content changes. The
+	 * resolver (`resolveChunkInlineSentinels`) ignores this segment.
+	 * @param {string} content content with chunk-url sentinels already resolved
+	 * @param {Compilation} compilation compilation
+	 * @returns {string} content with content-hash-tagged inline sentinels
+	 */
+	static embedInlineChunkHashes(content, compilation) {
+		if (!content.includes("__WEBPACK_HTML_INLINE__")) return content;
+		const chunksById = getChunksById(compilation);
+		return content.replace(
+			INLINE_SENTINEL_REGEXP,
+			(match, hexId, contentHashType) => {
+				const chunkId = Buffer.from(hexId, "hex").toString("utf8");
+				const chunk = chunksById.get(chunkId);
+				if (!chunk) return match;
+				const hash =
+					(chunk.contentHash && chunk.contentHash[contentHashType]) ||
+					chunk.renderedHash ||
+					chunk.hash;
+				if (!hash) return match;
+				return `__WEBPACK_HTML_INLINE__${hexId}__${contentHashType}__${hash}__END__`;
+			}
+		);
+	}
+
 	/**
 	 * Creates an instance of HtmlGenerator.
 	 * @param {HtmlGeneratorOptions=} options generator options
@@ -162,7 +1034,9 @@ class HtmlGenerator extends Generator {
 	/**
 	 * Whether this HTML module is reached as a compilation entry. Entry
 	 * modules have at least one incoming connection without an
-	 * `originModule` (the EntryDependency added by `compilation.addEntry`).
+	 * `originModule` (the EntryDependency added by `compilation.addEntry`) —
+	 * this covers both HTML-as-entry-point and a linked `type: "html"` page
+	 * (added as its own entry by HtmlModulesPlugin).
 	 * @param {NormalModule} module module
 	 * @returns {boolean} true when the module is an entry
 	 */
@@ -178,7 +1052,8 @@ class HtmlGenerator extends Generator {
 	 * Whether to emit the extracted `.html` file for this module.
 	 * `options.extract === true` always extracts; `false` and `"inline"` never;
 	 * when the option is left unspecified, extraction defaults to on for HTML
-	 * modules used as compilation entries — that's the HTML-as-entry-point case.
+	 * modules used as compilation entries — that's the HTML-as-entry-point case
+	 * and a linked `type: "html"` page (which is added as its own entry).
 	 * @param {NormalModule} module module
 	 * @returns {boolean} true when the `.html` file should be emitted
 	 */
@@ -238,25 +1113,53 @@ class HtmlGenerator extends Generator {
 
 	/**
 	 * Processes the provided module.
-	 * @param {NormalModule} module the current module
 	 * @param {Dependency} dependency the dependency to generate
-	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
 	 * @param {ReplaceSource} source the current replace source which can be modified
-	 * @param {GenerateContext} generateContext the render context
+	 * @param {DependencyTemplateContext} templateContext the template context (shared across all dependencies of the module)
 	 * @returns {void}
 	 */
-	sourceDependency(module, dependency, initFragments, source, generateContext) {
+	sourceDependency(dependency, source, templateContext) {
 		const constructor =
 			/** @type {DependencyConstructor} */
 			(dependency.constructor);
-		const template = generateContext.dependencyTemplates.get(constructor);
+		const template = templateContext.dependencyTemplates.get(constructor);
 		if (!template) {
 			throw new Error(
 				`No template for dependency: ${dependency.constructor.name}`
 			);
 		}
 
-		/** @type {DependencyTemplateContext} */
+		template.apply(dependency, source, templateContext);
+	}
+
+	/**
+	 * Processes the provided dependencies block.
+	 * @param {import("../DependenciesBlock")} block the dependencies block which will be processed
+	 * @param {ReplaceSource} source the current replace source which can be modified
+	 * @param {DependencyTemplateContext} templateContext the template context
+	 * @returns {void}
+	 */
+	sourceBlock(block, source, templateContext) {
+		for (const dependency of block.dependencies) {
+			this.sourceDependency(dependency, source, templateContext);
+		}
+
+		for (const childBlock of block.blocks) {
+			this.sourceBlock(childBlock, source, templateContext);
+		}
+	}
+
+	/**
+	 * Processes the provided module.
+	 * @param {NormalModule} module the module to generate
+	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
+	 * @param {ReplaceSource} source the current replace source which can be modified
+	 * @param {GenerateContext} generateContext the generateContext
+	 * @returns {void}
+	 */
+	sourceModule(module, initFragments, source, generateContext) {
+		// Only `dependency` varies across `template.apply` calls, so one context
+		// (and one lazy `chunkInitFragments` getter) serves the whole module.
 		/** @type {InitFragment<GenerateContext>[] | undefined} */
 		let chunkInitFragments;
 		/** @type {DependencyTemplateContext} */
@@ -289,79 +1192,18 @@ class HtmlGenerator extends Generator {
 			}
 		};
 
-		template.apply(dependency, source, templateContext);
-	}
-
-	/**
-	 * Processes the provided dependencies block.
-	 * @param {NormalModule} module the module to generate
-	 * @param {import("../DependenciesBlock")} block the dependencies block which will be processed
-	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
-	 * @param {ReplaceSource} source the current replace source which can be modified
-	 * @param {GenerateContext} generateContext the generateContext
-	 * @returns {void}
-	 */
-	sourceBlock(module, block, initFragments, source, generateContext) {
-		for (const dependency of block.dependencies) {
-			this.sourceDependency(
-				module,
-				dependency,
-				initFragments,
-				source,
-				generateContext
-			);
-		}
-
-		for (const childBlock of block.blocks) {
-			this.sourceBlock(
-				module,
-				childBlock,
-				initFragments,
-				source,
-				generateContext
-			);
-		}
-	}
-
-	/**
-	 * Processes the provided module.
-	 * @param {NormalModule} module the module to generate
-	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
-	 * @param {ReplaceSource} source the current replace source which can be modified
-	 * @param {GenerateContext} generateContext the generateContext
-	 * @returns {void}
-	 */
-	sourceModule(module, initFragments, source, generateContext) {
 		for (const dependency of module.dependencies) {
-			this.sourceDependency(
-				module,
-				dependency,
-				initFragments,
-				source,
-				generateContext
-			);
+			this.sourceDependency(dependency, source, templateContext);
 		}
 
 		if (module.presentationalDependencies !== undefined) {
 			for (const dependency of module.presentationalDependencies) {
-				this.sourceDependency(
-					module,
-					dependency,
-					initFragments,
-					source,
-					generateContext
-				);
+				this.sourceDependency(dependency, source, templateContext);
 			}
 		}
 
 		for (const childBlock of module.blocks) {
-			this.sourceBlock(
-				module,
-				childBlock,
-				initFragments,
-				source,
-				generateContext
-			);
+			this.sourceBlock(childBlock, source, templateContext);
 		}
 	}
 
@@ -403,7 +1245,12 @@ class HtmlGenerator extends Generator {
 
 		// JS-export path — resolve `[webpack/auto]` inline; chunk-URL sentinels
 		// stay for `HtmlModulesPlugin`'s `JavascriptModulesPlugin.render` tap.
-		return rawContent.split(PUBLIC_PATH_AUTO).join(undoPath);
+		if (!rawContent.includes(PUBLIC_PATH_AUTO)) return rawContent;
+		// A relative `<base href>` prepends `../`s so the base can't misdirect
+		// the rewritten URLs (see `HtmlParser`).
+		const basePrefix =
+			/** @type {HtmlModuleBuildInfo} */ (module.buildInfo).baseUrlPrefix || "";
+		return rawContent.split(PUBLIC_PATH_AUTO).join(basePrefix + undoPath);
 	}
 
 	/**
@@ -603,10 +1450,12 @@ class HtmlGenerator extends Generator {
 		// Source-type set changes when html-type exposure flips; the HMR shim's
 		// `extracting` branch changes when the emit decision flips. They differ
 		// only for `"inline"` (exposes html, but does not emit), so hash both.
-		if (this._shouldExposeHtmlType(updateHashContext.module)) {
+		// One `_shouldExtract` walk covers both checks (expose = extract ∪ inline).
+		const extract = this._shouldExtract(updateHashContext.module);
+		if (extract || this.options.extract === "inline") {
 			hash.update("html-type");
 		}
-		if (this._shouldExtract(updateHashContext.module)) {
+		if (extract) {
 			hash.update("extract");
 		}
 		// The HMR shim emits additional self-accept / DOM-patch code that