Outdated Bootstrap Library Contains a Script Injection Flaw

Vulnerability Explanation

Bootstrap's Tooltip plugin accepted a `data-container` HTML attribute to specify which DOM element should contain the rendered tooltip. In vulnerable versions, the plugin passed this value directly to jQuery as a selector — effectively `$(config.container)` — without any sanitization. If an attacker can control the value of `data-container` (e.g., via user-generated content rendered server-side into the attribute), they can supply a malicious HTML string such as `<img src=1 onerror=alert(1) />` which jQuery evaluates and inserts into the DOM, triggering script execution. The attack requires user interaction (hovering over the tooltip element) and the ability to influence the `data-container` attribute value.

Root Cause

The Tooltip component trusted the `data-container` configuration value as a safe jQuery selector without validating or sanitizing it first. The fix (Bootstrap PR #26630) changed the selector evaluation from `$(config.container)` to `$(document).find(config.container)`, which restricts evaluation to existing DOM elements and prevents raw HTML injection.

Technical Impact

An attacker who can control the `data-container` attribute value can execute arbitrary JavaScript in the context of the victim's browser session. This can lead to session token theft, credential harvesting via fake UI overlays, or performing authenticated actions on behalf of the victim. Scope is limited to pages where tooltips are rendered with attacker-influenced attribute values.

Severity Justification

CVSS 3.x base score of 6.1 (AV:N/AC:L/PR:N/UI:R/S:C/C:L/I:L/A:N). Exploitability requires user interaction (hover) and the ability to influence the data-container attribute value — not a zero-click or unauthenticated RCE. Impact is limited to script execution in the browser context.

Affected Components

• Bootstrap 2.3.0 – 3.3.x (all versions before 3.4.0)
• Bootstrap 4.0.0 – 4.1.1 (all versions before 4.1.2)

Remediation Steps

1. Upgrade Bootstrap to v3.4.1 (the final patched v3 release) if you must stay on the v3 branch, or preferably migrate to Bootstrap 5 (the current actively maintained major version).
2. If using npm/yarn, update your package.json: `"bootstrap": "^3.4.1"` or `"^5.3.0"`, then run `npm install` or `yarn install`.
3. If loading Bootstrap from a CDN, replace the CDN URL in your HTML templates with one pointing to v3.4.1 or v5.x.
4. Audit all tooltip usages in your codebase: search for `data-container`, `data-toggle="tooltip"`, and `.tooltip(` to identify any instances where the container value is derived from user input. Sanitize or remove user-controlled values from these attributes.
5. Run your existing test suite and perform a visual regression check on pages that use tooltips or popovers to confirm no UI regressions were introduced by the upgrade.

Verification Steps

1. Run `npm list bootstrap` (or check your CDN URL) to confirm the installed version is 3.4.1+ or 5.x.
2. Open browser DevTools on a page with tooltips, inspect the Bootstrap JS file URL or search for the version string (e.g., `Bootstrap v3.4.1`) in the loaded script.
3. Test the known proof-of-concept: add `data-container="<img src=1 onerror=alert(1) />"` to a tooltip element and hover over it — no alert should fire on the patched version.
4. Use a dependency scanner (e.g., `npm audit`, Snyk, or OWASP Dependency-Check) to confirm CVE-2018-14042 is no longer reported.

Code Examples (html)

<!-- Vulnerable: data-container value could be attacker-controlled -->
<a href="#"
   data-toggle="tooltip"
   data-container="<img src=1 onerror=alert(document.cookie) />"
   data-title="Hover me">
  Hover
</a>

<!-- Fixed: upgrade to Bootstrap 3.4.1+ or 5.x -->
<!-- CDN example (Bootstrap 3.4.1) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>

<!-- Or use the JS API with a safe, hardcoded container selector -->
<script>
  $('[data-toggle="tooltip"]').tooltip({
    container: 'body'  // hardcoded — never sourced from user input
  });
</script>

Best Practices

• Never render user-supplied content directly into HTML data attributes that are consumed by JavaScript plugins — always sanitize or allowlist values server-side.
• Pin front-end library versions in your package manager and run `npm audit` (or equivalent) in your CI pipeline to catch known CVEs before they reach production.
• Prefer loading Bootstrap from your own build pipeline rather than a public CDN so version upgrades are controlled and auditable.
• When using Bootstrap tooltips or popovers with dynamic content, use the JavaScript API (`$(...).tooltip({ container: '#safe-element-id' })`) rather than data attributes, so values are never sourced from the DOM.

References

• www.cvedetails.com/cve/CVE-2018-14042/
• github.com/twbs/bootstrap/pull/26630
• blog.getbootstrap.com/2018/12/13/bootstrap-3-4-0/
• blog.getbootstrap.com/2019/02/13/bootstrap-4-3-1-and-3-4-1/