Bootstrap & CSP Guide

CSP Gotchas with Bootstrap

javascript:void(0) in href Attributes

Bootstrap 3.0.0 - 3.4.1 and Bootstrap 4.0.0 - 4.6.2 use href="javascript:void(0)" or href="javascript:" in several components. These are blocked by CSP script-src unless 'unsafe-inline' is allowed.

Affected components:

• Carousel controls - previous/next links use href="javascript:void(0)" (v3) or href="javascript:" (v4)
• Pagination - disabled page links
• Tabs / Pills - <a> elements with data-toggle="tab" or data-toggle="pill"
• Dropdown toggles - <a> elements with data-toggle="dropdown"

Bootstrap 5.0.0+ replaced all javascript: URIs with <button> elements or href="#".

Inline Styles Injected by JavaScript Components

All Bootstrap versions (3.x through 5.x) inject inline style attributes via JavaScript for component positioning and animation. These are applied via the DOM API (element.style.property = value) and are CSP compatible - they do not require 'unsafe-inline' in style-src.

However, Popper.js before 1.15.0 (used by Bootstrap 4.0.0+ for dropdowns, tooltips, and popovers) used new Function() to parse modifiers, causing 'unsafe-eval' CSP violations.

Popper.js v1 >= 1.15.0 removed this call. Popper.js v2 (bundled with Bootstrap 5.0.0+) does not use new Function().

Inline Style Overrides Injected by Apps

Developers may inject styles by appending raw CSS strings to document.head (e.g., via innerHTML):

document.head.innerHTML += '<style>:root { --bs-body-bg: #000; }</style>'

Instead, use element.style.setProperty() to modify CSS variables or component styles in your code.

Audit step: Search for --bs- combined with .innerHTML or .insertAdjacentHTML within js files or inside <script> tags.

Tooltip and Popover HTML Content

When tooltips or popovers are configured with html: true, Bootstrap injects user-provided HTML into the DOM. Bootstrap includes a built-in sanitizer that strips dangerous elements and attributes by default.

However, if the sanitizer is disabled (sanitize: false) or the allowList is extended to permit <script>, <style>, or event handler attributes, this will cause a CSP violation.

Bootstrap 3 and 4 jQuery Dependency

Bootstrap 3.x, and 4.x require jQuery. See the jQuery CSP Guide for jQuery-specific CSP concerns (globalEval, getScript, plugins, etc.).

Bootstrap 5.0.0+ removed the jQuery dependency.

Version Summary

Recommendations

1. Upgrade to Bootstrap 5.x if possible (may be a significant undertaking)
2. For v3/v4: Search for javascript:void(0) and javascript: in HTML/templates. Replace with href="#" + event.preventDefault() or convert to <button> elements.
3. tooltip/popover usage: Flag any html: true with sanitize: false.
4. Check jQuery plugins: If using Bootstrap 3 or 4, audit jQuery and any Bootstrap-adjacent plugins per the jQuery CSP Guide.

Other Bootstrap CSP Issues

Are you aware of other issues with implementing CSP with Bootstrap? Let me know, so we can update this page.

CSP Developer Field Guide

Want to learn the ins and outs CSP? Grab a copy of the CSP Developer Field Guide. It's a short and sweet guide to help developers get up to speed quickly.

Grab a Copy