Unhead Vulnerable to Bypass of URI Scheme Sanitization in makeTagSafe via Case-Sensitivity

Affected releases · unhead

2.x2.0.0 – 2.1.10Fixed in 2.1.11
1.x and older0.0.1 – 1.11.20No fix, no longer updated

On 2.x, the newest line:

npm install unhead@2.1.11

3.x

Not affected
3.0.0 – 3.4.3
26 releases, latest

2.x

Affected
2.0.0 – 2.1.10
31 releases
Fixed
2.1.11 – 2.1.17
6 releases

1.x

Affected
1.0.0 – 1.11.20
145 releases

0.x

Affected
0.0.1 – 0.7.1
39 releases

Is your project affected?

Paste your package.json, or type the range you declare for unhead. It is read in your browser and sent nowhere.

What happens

The link.href check in makeTagSafe (safe.ts, line 68-71) uses String.includes(), which is case-sensitive:

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

useHeadSafe({
  link: [{
    rel: 'stylesheet',
    href: 'DATA:text/css,body{display:none}'
  }]
})

SSR output:

<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

if (key === 'href') {
  const lower = val.toLowerCase()
  if (lower.includes('javascript:') || lower.includes('data:')) {
    return
  }
  next[key] = val
}