[5.x]: Using a Content Security Policy breaks front-end 2FA

[jcdarwin]

What happened?

Description

The addition of 2FA to the frontend is very welcome, however our Craft CMS breaks when a user visits /login?verify=1, as we have a Content Security Policy defined.

Our Content-Security-Policy header for the page is defined as:

base-uri 'none'; script-src 'self' 'unsafe-eval' https://www.google.com https://*.googletagmanager.com https://js.sentry-cdn.com https://browser.sentry-cdn.com 'nonce-86c69636f69017feef8b29565eecfa12e8669a27e564' 'nonce-4019db17391a6d2c778acd2e192d307fbd864b7461ac' 'nonce-52d2351504f323880d9f616b0018bf4f3225bb782382' 'nonce-e237c4042747aded9f8c2f9fb03fcffe5dae9500d8cc' 'nonce-9f62517b9fe51c07d51c4939bd4883c66a85859471a5' 'nonce-2f4fdcb73c10634c70ff1c11a56ccaf635e3d47cd8b2' 'nonce-02e7fa2b4d20dee063e8530d2a28be30503da23f79ee' 'nonce-9f092271b184f658d781e7a2cf2fda3d2415f7248dc3' 'nonce-f4f2ab9bf7c2e468e18360ba5ab105c16b4a0bfe9c9a' 'nonce-b93a5e50c72a34bd29e5c6ecb8795cd1f638e5b9d58f' 'nonce-258084c6b4cad6c78ba48783aab3dff484324bd038ed' 'nonce-69a9fb83fd051e8c43185f42fc70aa10c3379540150b'; style-src 'self' 'unsafe-inline'; img-src 'self' https://www.google.co.nz https://www.google.com https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://i.vimeocdn.com https://i.ytimg.com/; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://*.g.doubleclick.net https://*.google.com *.sentry.io; object-src 'none'; frame-src https://player.vimeo.com/ https://www.google.com/ https://td.doubleclick.net/ https://www.youtube.com/ https://td.doubleclick.net/; worker-src blob: https://browser.sentry-cdn.com/;

As can be seen from the above, there are a lot of nonces for other inline scripts we use in our templates, which allows these inline scripts to pass CSP.

However, inline scripts added by Craft CMS to the page served at /login?verify=1 (such as those added in /vendor/craftcms/cms/src/templates/_layouts/basecp.twig and /vendor/craftcms/cms/src/web/assets/d3/D3Asset.php) fail CSP because they don't have a nonce:

It could be argued that we resolve this by adding the unsafe-inline keyword to our CSP to allow these scripts -- however doing so only generates the error (in Chrome):
Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

It would be great if there was a way to support front-end 2FA using a CSP that doesn't allow naked inline scripts.

Steps to reproduce

1. Define a Content Security Policy, such that a Content-Security-Policy header is served when visiting /login?verify=1. In our case, we use the https://github.com/born05/craft-csp plugin to do this.
2. Visit /login?verify=1, with the devtools network panel open
3. Notice the CSP errors generated by the inline scripts added to the page by Craft CMS, which prevent these scripts from loading
4. As a result we only see a blank (white) page in the browser, with a header with the sitename and the Craft CMS logo

Expected behavior

Using a CSP that prevents unsafe scripts, we can visit /login?verify=1 and be able to perform 2FA

Actual behavior

Using a CSP that prevents unsafe scripts, we visit /login?verify=1 and are not able to perform 2FA, as no elements appear on the page (because the inline scripts that add them are blocked by the CSP).

Craft CMS version

5.6.11

PHP version

8.2

Operating system and version

debian:bullseye-slim

Database type and version

mariadb:10.6

Image driver and version

No response

Installed plugins and versions

From our composer.json:

"aws/aws-sdk-php": "^3",
"born05/craft-csp": "^3.0",
"born05/craft-sentry": "^3.0",
"clubstudioltd/craft-asset-rev": "^8.0",
"craftcms/ckeditor": "^4.6.0",
"craftcms/cms": "^5.6",
"craftcms/contact-form": "^3.1",
"craftcms/contact-form-honeypot": "^2.1",
"craftcms/element-api": "^4.2",
"craftcms/feed-me": "^6.8",
"craftcms/mailgun": "^3.1",
"craftpulse/craft-password-policy": "^5.0.2",
"doublesecretagency/craft-cpcss": "^3.0",
"doublesecretagency/craft-digitaldownload": "^3.1.1",
"enupal/snapshot": "^3.0",
"hillholliday/craft-user-manual": "^5.0",
"jalendport/craft-preparse": "3.0.0-alpha.2",
"jdsdev/craft-embedder": "^4.0",
"jub/craft-google-recaptcha": "^3.0",
"mikehaertl/php-shellcommand": "^1.6.3",
"mmikkel/retcon": "^3.2",
"nystudio107/craft-cookies": "^5.0",
"nystudio107/entitydecode": "^4.0",
"nzmebooks/craft-event-helper": "^3.2",
"nzmebooks/craft-feedback-form": "^3.0",
"nzmebooks/craft-jwt": "^3.0",
"nzmebooks/craft-registration-helper": "^3.0",
"nzmebooks/craft-resources-helper": "^3.0",
"nzmebooks/craft-state-helper": "^4.0",
"nzmebooks/craft-tagmanager": "^3.0",
"plainlanguage/craft-plain-ics": "^3.0",
"putyourlightson/craft-sherlock": "^5.1",
"solspace/craft-freeform": "5.9.16.1",
"studioespresso/craft-dumper": "^5.0.1",
"topshelfcraft/wordsmith": "^5.0",
"verbb/image-resizer": "^4.0.3",
"vlucas/phpdotenv": "^2.4.0",
"weareferal/remote-backup": "^5.0",
"yiisoft/yii2-redis": "^2.0"