stacknuts / magento-csp-debug
Magento 2 module that adds a configurable CSP debug panel to the frontend layout.
Package info
github.com/StackNuts/magento-csp-debug
Type:magento2-module
pkg:composer/stacknuts/magento-csp-debug
Requires
- php: ~8.1.0||~8.2.0||~8.3.0||~8.4.0
- magento/framework: >=103.0 <104
- magento/module-csp: >=100.4 <101
- magento/module-developer: >=100.4 <101
- magento/module-store: >=100.0 <102
Requires (Dev)
- phpunit/phpunit: ^10.5 || ^11.5 || ^12.0
Suggests
- hyva-themes/magento2-theme-module: Enables a Hyvä-native debug panel (Tailwind CSS + Alpine.js) via the hyva_default.xml layout handle, in place of the default Luma panel
README
StackNuts CSP Debug
See your storefront's actual Content Security Policy right on the page — no devtools required.
Why
Magento assembles its CSP from several places at once — core defaults, admin config, and
rules added by third-party modules via config.xml or csp_whitelist.xml. Today, the only
way to see what actually ends up in the header is to load the page and dig through the
network tab by hand, every time you add a script, an iframe, or a third-party integration.
This module surfaces that same information directly on the page: a small icon that opens a panel listing every active directive exactly as Magento assembled it. You can tell in seconds whether the CSP will block something you just added, instead of finding out from a console error later.
Screenshots
A small padlock icon sits fixed in the corner of the storefront whenever the panel is active:
Clicking it opens the panel:
On a Hyvä store, the same panel renders natively in Tailwind CSS and Alpine.js instead — no jQuery/RequireJS modal:
Installation
composer require stacknuts/magento-csp-debug bin/magento module:enable StackNuts_CspDebug bin/magento setup:upgrade
The module ships a LESS partial, so redeploy static content for your theme afterwards:
bin/magento setup:static-content:deploy -f en_US # or, in a grunt-enabled dev environment: grunt exec:luma && grunt less:luma
Hyvä compatibility
If a Hyvä theme is active, the module automatically swaps in a Hyvä-native
version of the panel — same data, rebuilt with Tailwind CSS and a native <dialog> +
Alpine.js modal, no extra configuration needed. This is wired through Hyvä's own hyva_
layout-handle convention, so it has zero effect on Luma installs and needs no separate
compatibility module.
Enabling it
Stores → Configuration → Security → Content Security Policy (CSP) → Debug → Enable CSP debug panel
The panel needs both of these to be true before it renders: the toggle above is on, and the
request already has developer-level access — developer mode, or an IP allow-listed under
dev/restrict/allow_ips. Leave it enabled in production and it simply stays invisible to
everyone else.
Requirements
- PHP 8.1 – 8.4
- Magento 2 with
Magento_Csp(bundled with core since 2.3.5) - Optional:
hyva-themes/magento2-theme-module^1.5
Contributing
See CONTRIBUTING.md. Issues: https://github.com/StackNuts/magento-csp-debug/issues
License
MIT — see LICENSE.


