Outdated Bootstrap Library Allows Script Injection via Button Components

Vulnerability Explanation

Bootstrap's Button plugin (present in versions 1.4.0 through 3.4.1) uses `data-*-text` attributes (e.g., `data-loading-text`, `data-complete-text`) to set alternate button text during state transitions. The `Button.prototype.setState` function reads these attribute values and inserts them into the DOM via jQuery's `.html()` method without sanitization. If an attacker can control the value of these attributes — for example, by reflecting a URL parameter or stored user input into the attribute — they can inject arbitrary HTML and JavaScript that executes when the button enters its loading state. This is a DOM-based or stored XSS vector depending on how the application populates the attribute.

Root Cause

The Bootstrap 3 Button plugin passes `data-*-text` attribute values directly to jQuery's `.html()` method during state changes, treating the attribute content as trusted HTML rather than plain text. No allowlist-based sanitization or escaping is applied to these values, unlike the sanitizer introduced in Bootstrap 3.4.1 for tooltip/popover `data-template` attributes. Bootstrap 3 is end-of-life and will not receive an upstream patch for this specific issue.

Technical Impact

An attacker who can influence the value of a `data-loading-text` or similar `data-*-text` attribute (via stored input, reflected parameters, or DOM manipulation) can execute arbitrary JavaScript in the victim's browser session. This enables session hijacking via cookie theft, credential harvesting, UI redressing, forced authenticated actions, and exfiltration of sensitive page data.

Severity Justification

Network-accessible, requires user interaction (button click to trigger loading state), and exploitation depends on the application passing attacker-controlled data into the vulnerable attribute. GitHub Advisory rates this as Moderate. Real-world exploitability is conditional on application-level data flow.

Affected Components

• Bootstrap (npm) >= 1.4.0, <= 3.4.1

Remediation Steps

1. Upgrade Bootstrap to version 5.x (recommended). Bootstrap 5 removes the Button plugin's stateful text feature entirely, eliminating this attack surface. Update your package.json: `npm install bootstrap@5`.
2. If upgrading to Bootstrap 5 is not immediately feasible, upgrade to Bootstrap 4.x as an interim step. The Button plugin's `data-*-text` state feature was removed in Bootstrap 4, so the vulnerable code path no longer exists.
3. If you must remain on Bootstrap 3 temporarily, audit all usages of `data-loading-text`, `data-complete-text`, and any other `data-*-text` attributes in your templates. Ensure none of these values are populated from user input, URL parameters, or database content without explicit HTML escaping first.
4. Add a Content Security Policy (CSP) header as a defence-in-depth control. Start in report-only mode to avoid breaking existing functionality, then tighten to enforcement. A strict `script-src` directive will block inline script execution even if XSS is triggered.
5. After upgrading, remove any Bootstrap 3 CDN references or vendored copies from your codebase to prevent accidental re-introduction.

Verification Steps

1. Run `npm list bootstrap` or check your `package.json` / `package-lock.json` to confirm the installed version is 4.0.0 or higher.
2. Search your codebase for `data-loading-text`, `data-complete-text`, and the pattern `data-*-text` to confirm no usages remain after upgrading to Bootstrap 4/5 (the attribute is no longer supported).
3. Use a browser DevTools network inspection or `curl -I https://your-site.com` to verify a `Content-Security-Policy` header is present in responses.
4. Run your dependency scanner (e.g., `npm audit`, Snyk, or OWASP Dependency-Check) and confirm CVE-2024-6485 no longer appears in the report.

Code Examples (html)

<!-- Bootstrap 3: user input reflected into data-loading-text without escaping -->
<button class="btn btn-primary"
        data-loading-text="{{ user_input }}"
        data-toggle="button">
  Submit
</button>
<!-- If user_input = <img src=x onerror=alert(1)>, XSS fires on button click -->

<!-- Option 1: Upgrade to Bootstrap 5 — data-loading-text is not supported, issue is gone -->
<button class="btn btn-primary" id="submitBtn">Submit</button>

<!-- Option 2: If staying on Bootstrap 3 temporarily, never use user input in data-*-text.
     Set button text via safe DOM text methods instead: -->
<script>
  // Safe: sets text content, not innerHTML
  document.getElementById('submitBtn').textContent = userInput;
</script>

Best Practices

• Never pass unsanitized user-controlled data into HTML attributes that a JavaScript framework will later render as innerHTML or via jQuery's `.html()`.
• Pin frontend library versions in `package.json` and run `npm audit` in your CI pipeline to catch newly disclosed CVEs before they reach production.
• Implement a Content Security Policy with a strict `script-src` directive to limit the blast radius of any XSS vulnerability, whether in your own code or a dependency.
• Periodically audit your frontend dependencies for end-of-life status — EOL libraries receive no security patches and accumulate unaddressed CVEs over time.

References

• github.com/advisories/GHSA-vxmc-5x29-h64v
• nvd.nist.gov/vuln/detail/CVE-2024-6485
• www.herodevs.com/vulnerability-directory/cve-2024-6485
• security.snyk.io/vuln/SNYK-JS-BOOTSTRAP-7444617
• blog.getbootstrap.com/2019/02/13/bootstrap-4-3-1-and-3-4-1/