Bug: Navbar menu toggle not working on mobile
Description
The navbar hamburger menu toggle button does not respond when clicked on mobile/small screens. Clicking the button produces no visible effect — the navigation menu does not open.
Root Cause
The SecurityHeadersMiddleware sets a Content-Security-Policy header with a script-src directive that only permits 'self', 'unsafe-inline', and 'unsafe-eval'. This blocks the browser from loading Bootstrap JS and FontAwesome JS from their CDN origins before they can even be downloaded.
Without Bootstrap JS, the data-bs-toggle="collapse" attribute on the toggler button is never initialised, so clicks do nothing.
The style-src and font-src directives also did not include cdn.jsdelivr.net, blocking the jsDelivr-hosted font stylesheets and font files added in #414.
Blocked resources:
https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js (script-src)https://use.fontawesome.com/releases/v6.5.1/js/all.js (script-src)https://cdn.jsdelivr.net/npm/@fontsource/lora/latin.css (style-src)https://cdn.jsdelivr.net/npm/@fontsource/open-sans/latin.css (style-src)
Steps to Reproduce
- Run the site and open it in a browser
- Resize the viewport to below 992px (mobile/tablet)
- Click the Menu button in the navbar
- Observe: menu does not open
Expected Behaviour
Clicking the Menu button opens the collapsed navigation menu.
Fix
Update DefaultCspPolicy in SecurityHeadersMiddleware.cs to permit the required CDN origins:
- Add
https://cdn.jsdelivr.net and https://use.fontawesome.com to script-src
- Add
https://cdn.jsdelivr.net and https://fonts.googleapis.com to style-src
- Add
https://cdn.jsdelivr.net and https://fonts.gstatic.com to font-src
Note
The SRI integrity attribute on the Bootstrap <script> tag does not bypass CSP. The browser checks the CSP origin allowlist before attempting the download, so SRI is never reached when the origin is blocked.
Bug: Navbar menu toggle not working on mobile
Description
The navbar hamburger menu toggle button does not respond when clicked on mobile/small screens. Clicking the button produces no visible effect — the navigation menu does not open.
Root Cause
The
SecurityHeadersMiddlewaresets aContent-Security-Policyheader with ascript-srcdirective that only permits'self','unsafe-inline', and'unsafe-eval'. This blocks the browser from loading Bootstrap JS and FontAwesome JS from their CDN origins before they can even be downloaded.Without Bootstrap JS, the
data-bs-toggle="collapse"attribute on the toggler button is never initialised, so clicks do nothing.The
style-srcandfont-srcdirectives also did not includecdn.jsdelivr.net, blocking the jsDelivr-hosted font stylesheets and font files added in #414.Blocked resources:
https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js(script-src)https://use.fontawesome.com/releases/v6.5.1/js/all.js(script-src)https://cdn.jsdelivr.net/npm/@fontsource/lora/latin.css(style-src)https://cdn.jsdelivr.net/npm/@fontsource/open-sans/latin.css(style-src)Steps to Reproduce
Expected Behaviour
Clicking the Menu button opens the collapsed navigation menu.
Fix
Update
DefaultCspPolicyinSecurityHeadersMiddleware.csto permit the required CDN origins:https://cdn.jsdelivr.netandhttps://use.fontawesome.comtoscript-srchttps://cdn.jsdelivr.netandhttps://fonts.googleapis.comtostyle-srchttps://cdn.jsdelivr.netandhttps://fonts.gstatic.comtofont-srcNote
The SRI
integrityattribute on the Bootstrap<script>tag does not bypass CSP. The browser checks the CSP origin allowlist before attempting the download, so SRI is never reached when the origin is blocked.