Outdated Bootstrap Library Contains a Script Injection Flaw

Vulnerability Explanation

Bootstrap's tooltip plugin accepts a `data-viewport` option that specifies a CSS selector or jQuery object used to constrain the tooltip's position within a container. In versions prior to 3.4.0, this value is passed directly into a jQuery selector call (`$(viewport)`) without sanitisation. If an attacker can influence the value of this attribute — for example, through a URL parameter, stored user content, or a DOM-based injection point — they can supply a crafted selector string containing an HTML payload (e.g., `<img src=x onerror=alert(1)>`) that jQuery evaluates as HTML, triggering script execution in the victim's browser. The attack requires user interaction (hovering over the tooltip) and the ability to influence the attribute value, which limits exploitability to specific application patterns.

Root Cause

Bootstrap's tooltip initialisation code passed the `data-viewport` attribute value directly to jQuery's `$()` constructor, which interprets strings beginning with `<` as HTML and inserts them into the DOM. No input validation or allowlist-based sanitisation was applied to this attribute before Bootstrap 3.4.0.

Technical Impact

An attacker who can control the `data-viewport` attribute value can execute arbitrary JavaScript in the context of the victim's browser session. This can lead to session token theft, UI redressing, credential phishing overlays, or forced actions on behalf of the authenticated user. Scope is changed (S:C) as the injected script runs in the page's origin context regardless of where the payload originates.

Severity Justification

CVSS 3.0 vector CVSS:3.0/AV:N/AC:L/PR:N/UI:R/S:C/C:L/I:L/A:N. Exploitability is constrained by the requirement for user interaction and the need to control the data-viewport attribute value. The CVE is not listed in the CISA KEV catalogue and has a low EPSS score (~0.06), indicating limited observed exploitation in the wild.

Affected Components

• Bootstrap < 3.4.0
• bootstrap-sass < 3.4.0

Remediation Steps

1. Upgrade Bootstrap to version 3.4.1 (the final patched 3.x release) or, preferably, migrate to Bootstrap 5.x which is actively maintained. Install via npm: `npm install bootstrap@5` or pin to the last secure 3.x release with `npm install bootstrap@3.4.1`.
2. If you load Bootstrap from a CDN, update the CDN URL to reference version 3.4.1 or 5.x. Remove any `<script>` or `<link>` tags pointing to versions below 3.4.0.
3. If an immediate upgrade is not feasible, audit all tooltip initialisations in your codebase. Ensure the `viewport` option is never derived from user-supplied input. Hardcode it to a trusted selector (e.g., `{ selector: 'body' }`) or omit it entirely.
4. As a defence-in-depth measure, add a Content Security Policy (CSP) header that restricts inline script execution (`script-src 'self'`). This significantly reduces the impact of any XSS that does occur.
5. After upgrading, run your dependency audit tool to confirm no remaining vulnerable Bootstrap versions are present: `npm audit` or `yarn audit`.

Verification Steps

1. Run `npm list bootstrap` or `yarn list --pattern bootstrap` and confirm the resolved version is 3.4.1 or higher.
2. Inspect the loaded Bootstrap JS file in your browser's DevTools (Sources tab) and check the version comment at the top of the file.
3. Use `npm audit` and confirm CVE-2018-20676 no longer appears in the output.
4. If you use a CDN, check the `<script src>` URL in your page source and verify it references v3.4.1 or v5.x.

Code Examples (html)

<!-- Vulnerable: Bootstrap 3.1.1 loaded from CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!-- Vulnerable tooltip usage where viewport is user-influenced -->
<script>
  $('#my-tooltip').tooltip({
    viewport: userSuppliedValue  // ❌ Never pass user input here
  });
</script>

<!-- Fixed: Upgrade to Bootstrap 3.4.1 (last secure 3.x) or Bootstrap 5 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmFXFGCt1Gg5AA/9eV2L+0fo5V"
        crossorigin="anonymous"></script>

<!-- Safe tooltip usage: hardcode the viewport to a trusted selector -->
<script>
  $('#my-tooltip').tooltip({
    viewport: { selector: 'body' }  // ✅ Never derived from user input
  });
</script>

Best Practices

• Never pass user-controlled strings into jQuery's `$()` constructor or any DOM-manipulation API without strict allowlist validation.
• Pin frontend library versions in your package.json and run `npm audit` as part of your CI/CD pipeline to catch newly disclosed CVEs automatically.
• Implement a Content Security Policy to limit the damage any XSS vulnerability can cause, regardless of its source.
• Prefer migrating to Bootstrap 5 over patching Bootstrap 3, as Bootstrap 3 reached end of life in July 2019 and will not receive future security fixes.

References

• nvd.nist.gov/vuln/detail/CVE-2018-20676
• github.com/twbs/bootstrap/issues/27044
• github.com/twbs/bootstrap/pull/27047
• blog.getbootstrap.com/2018/12/13/bootstrap-3-4-0/
• github.com/advisories/GHSA-3mgp-fx93-9xv5
• getbootstrap.com/docs/4.6/end-of-life/