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.
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:
tag.props = { ...acceptDataAttrs(prev), ...next }
Then propsToString (propsToString.ts, line 26) interpolates property keys directly into the HTML string with no sanitization:
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:
useHeadSafe({
link: [{
rel: 'stylesheet',
href: '/valid-stylesheet.css',
'data-x onload=alert(document.domain) y': 'z'
}]
})
SSR output:
<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):
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.
Impact
Untrusted input is rendered as active markup in a victim's browser, which can run script in their session. Typical impact: session or credential theft, and actions taken as the user.
Affected versions
Security releases
Kodem intelligence
Severity tells you how bad this could be in the worst case. It does not tell you whether you are exposed. Exploitability and impact are functions of runtime truth: whether the vulnerable code is present, reachable, and actually executes in your application. A vulnerable package can sit in your dependency tree and never run.
Kodem, an Intelligent Application Security platform, uses runtime intelligence to reveal which vulnerabilities actually execute in production, so teams prioritize the ones that genuinely matter. Kodem's runtime-powered SCA identifies whether this CVE is reachable in your applications.
Remediation advice
For vulnerability 1, validate that attribute names only contain characters legal in HTML attributes:
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)
),
)
}
Frequently Asked Questions
- What is CVE-2026-31860? CVE-2026-31860 is a medium-severity cross-site scripting (XSS) vulnerability in unhead (npm), affecting versions <= 2.1.10. It is fixed in 2.1.11. Untrusted input is rendered as active markup in a victim's browser, which can run script in their session.
- Which versions of unhead are affected by CVE-2026-31860? unhead (npm) versions <= 2.1.10 is affected.
- Is there a fix for CVE-2026-31860? Yes. CVE-2026-31860 is fixed in 2.1.11. Upgrade to this version or later.
- Is CVE-2026-31860 exploitable, and should I be worried? Whether CVE-2026-31860 is exploitable in your environment depends on whether the vulnerable code is present and reachable. A CVSS score is a worst-case rating; it does not account for your specific deployment, configuration, or usage patterns. Kodem, an Intelligent Application Security platform, uses runtime intelligence to show which vulnerabilities actually execute in production, so you can focus on the ones that represent real risk. Get a demo
- What actually determines whether CVE-2026-31860 is exploitable, and how bad it is? Exploitability and impact are not fixed properties of a CVE. They depend on runtime truth: whether the vulnerable code is present, reachable, and actually executes in your application. A high CVSS score on a dependency that never runs is not the same as real risk. Kodem, an Intelligent Application Security platform, uses runtime intelligence to reveal which vulnerabilities actually execute in production, so teams prioritize the ones that genuinely matter.
- How do I fix CVE-2026-31860? Upgrade
unheadto 2.1.11 or later.