Outdated Bootstrap Library Allows Script Injection via Tooltips

Vulnerability Explanation

Bootstrap's Tooltip and Popover plugins accept custom HTML templates via the `data-template`, `data-content`, and `data-title` HTML attributes. In versions prior to 3.4.1 (3.x) and 4.3.1 (4.x), these attribute values were inserted into the DOM without adequate sanitization. An attacker who can control the value of these attributes — for example, through a stored value in a database, a URL parameter reflected into the page, or a user-controlled UI element — can inject arbitrary HTML including `<script>` tags or event handler attributes (e.g., `onerror`, `onmouseover`) that execute JavaScript in the victim's browser when the tooltip or popover is rendered.

Root Cause

The Bootstrap tooltip/popover plugin used `innerHTML` or equivalent DOM insertion to render the template HTML without running it through a sanitizer. The patched versions (3.4.1 and 4.3.1) introduced a built-in allowlist-based HTML sanitizer that strips disallowed tags and attributes before DOM insertion.

Technical Impact

An attacker who can influence tooltip/popover attribute values can execute arbitrary JavaScript in the context of the victim's browser session. This enables session token theft, credential harvesting via fake UI overlays, forced redirects to phishing pages, and defacement. The CVSS scope is 'Changed', meaning the injected script can affect resources beyond the vulnerable component itself.

Severity Justification

CVSS 3.1 score of 6.1 (AV:N/AC:L/PR:N/UI:R/S:C/C:L/I:L/A:N). Exploitability requires user interaction (victim must trigger the tooltip/popover) and the attacker must be able to influence the relevant data attributes. Impact is limited to low confidentiality and integrity — no availability impact. Not listed in CISA's Known Exploited Vulnerabilities Catalog.

Affected Components

• bootstrap (npm/NuGet/RubyGems) >= 3.0.0, < 3.4.1
• bootstrap (npm/NuGet/RubyGems) >= 4.0.0, < 4.3.1
• bootstrap-sass (npm/RubyGems) >= 3.0.0, < 3.4.1

Remediation Steps

1. Identify how Bootstrap is loaded: check your `package.json`, `Gemfile`, `.csproj`, or HTML `<script>`/`<link>` tags for the version in use.
2. For Bootstrap 3.x: upgrade to version 3.4.1 or later. For Bootstrap 4.x: upgrade to version 4.3.1 or later. Run `npm install bootstrap@^3.4.1` or `npm install bootstrap@^4.3.1` as appropriate.
3. If Bootstrap is loaded via a CDN `<script>` tag, update the URL to reference the patched version (e.g., `https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js`).
4. If you cannot upgrade immediately, audit all uses of `data-template`, `data-content`, and `data-title` attributes in your codebase and ensure their values are never derived from user-controlled input without server-side sanitization.
5. Smoke-test all tooltip and popover components after upgrading to confirm they render correctly under the new sanitizer.

Verification Steps

1. After upgrading, run `npm list bootstrap` (or check your lock file) to confirm the installed version is 3.4.1+ or 4.3.1+.
2. If loading from a CDN, inspect the page source or Network tab in browser DevTools to confirm the Bootstrap JS URL references the patched version.
3. Use the Snyk or Retire.js CLI (`retire --js`) to scan your project and confirm CVE-2019-8331 no longer appears in the report.
4. Manually test a tooltip with a `data-template` containing `<img src=1 onerror=alert(1)>` — on the patched version, the `onerror` attribute should be stripped and no alert should fire.

Code Examples (html)

<!-- Vulnerable: Bootstrap 3.1.1 loaded from CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.1.1/dist/js/bootstrap.min.js"></script>

<!-- Attacker-influenced data-template executes JS on hover -->
<a href="#" data-toggle="tooltip"
   data-template='<div class="tooltip"><img src=1 onerror=alert(document.cookie)></div>'
   title="Info">
  Hover me
</a>

<!-- Fixed: Bootstrap 3.4.1 with built-in sanitizer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>

<!-- The built-in sanitizer in 3.4.1+ strips disallowed tags/attributes -->
<a href="#" data-toggle="tooltip"
   data-template='<div class="tooltip"><div class="tooltip-inner"></div></div>'
   title="Info">
  Hover me
</a>

<!-- If you need to allow custom HTML and trust the source, you can
     explicitly disable the sanitizer only for trusted, static templates:
     $(el).tooltip({ sanitize: false, template: '<div>...</div>' }) -->

Best Practices

• Pin frontend library versions in `package.json` and use a lock file (`package-lock.json` or `yarn.lock`) to prevent silent upgrades or downgrades.
• Run a software composition analysis (SCA) tool such as `npm audit`, Snyk, or Retire.js as part of your CI/CD pipeline to catch known-vulnerable dependencies before they reach production.
• Never pass user-controlled strings directly into Bootstrap's `data-template`, `data-content`, or `data-title` attributes without server-side sanitization, regardless of Bootstrap version.
• If you must allow rich HTML in tooltips/popovers, use Bootstrap's built-in `sanitizeFn` option to supply a trusted sanitizer (e.g., DOMPurify) rather than disabling sanitization entirely.

References

• github.com/advisories/GHSA-9v3m-8fp8-mj99
• security.snyk.io/vuln/SNYK-JS-BOOTSTRAP-173700
• www.herodevs.com/vulnerability-directory/cve-2019-8331
• blog.getbootstrap.com/2019/02/13/bootstrap-4-3-1-and-3-4-1