HoneyPot CSS Style nonce (when using CSP) does not work with Web Page Caching

[lazaruscorporation]

PHP Version

8.1

CodeIgniter4 Version

4.4.0

CodeIgniter4 Installation Method

Composer (using codeigniter4/appstarter)

Which operating systems have you tested for this bug?

Linux

Which server did you use?

apache

Database

10.6.15-MariaDB

What happened?

My site uses CodeIgniter's CSP settings to add a nonce to all CSS and JS files.

The HoneyPot functionality automatically adds a line like this to the :

<style nonce="12ee98b7295c5cf83507941d">#hpc { display:none }</style>

However I have noticed in my browser console that occasionally (not always) this throws a CSP error:

Content-Security-Policy: The page's settings blocked the loading of a resource at inline ("style-src").

Examining the HTML on these errors I noticed that the nonce value for the HoneyPot style is incorrect (i.e. it differs from the nonce value generated by CodeIgniter for my website CSS file. For example, the CSS nonce value on my website stylesheet is "6db8349911d11cd230ce3ad5" but the CSS nonce value on the Honeypot style element is "12ee98b7295c5cf83507941d"

In these cases the website CSS is delivered to the browser correctly, but the HoneyPot CSS is not, so I presume that the nonce on the Honeypot is being generated incorrectly on these occasions.

Temporary fix: I have added the HoneyPot CSS rule into my general website CSS so that the HoneyPot field is always styled as display:none

I can't supply a URL where you can definitely test this as the console error is not always there (and on these occasions the Honeypot CSS nonce is the same as the website CSS nonce in the HTML).

Steps to Reproduce

The error is intermittent, so I can't give a URL where you will definitely see it, but you could start at https://www.lazaruscorporation.co.uk/blogs/artists-notebook/posts/new-site-2023 and navigate around until you see the console error

Note that as mentioned above, even though the Honeypot CSS is not being deployed on the page I have added the HoneyPot CSS rule into my website CSS as a temporary fix so that the HoneyPot field is always styled as display:none

Expected Output

I expected the nonce on the HoneyPot CSS to be correct on every request so that it is not blocked when using CSP.

Anything else?

No response

[lazaruscorporation]

I think I have worked out what is happening (it's still a bug):

I am using CodeIgniter's page caching on the Controller methods for these pages e.g.

$this->cachePage(DAY);

When a particular page is first hit (no cache exists) the nonces match. However on returning to a page after it has cached, the nonce is correctly regenerated for the website Stylesheet added in the view, but the nonce that the Honeypot functionality injects into the head has been cached and is therefore no longer valid.

I have confirmed this by clearing the cache, loading a page, noting the (matching) nonce values, reloading the page, and I see the nonce value for the website CSS has changed (as it should) but the nonce for the Honeypot CSS is the same as the first request (i.e. it is retrieved from the cache, not regenerated).

Expected outcome: the nonce for the Honeypot CSS should not be cached

[kenjis]

Thank you for reporting. Yes, when the CSP nonce is cached, CSP does not work correctly.

[kenjis]

If you use HoneyPot, then it's a Form page, and I don't think the CSRF token is also cached and doesn't work either.
What are you doing about it?

[lazaruscorporation]

My (contact) form page is one of the few pages on my site I'm not using the cache for (I turned off caching on that page when trying to debug this problem)

However CodeIgniter injects the HoneyPot CSS into the head element of every page on the site, not just pages with forms on them, so every page that does using CodeIgniter's cache (even if it has no form on it) has the CSP error in the browser console.

[kenjis]

I've confirmed the behavior. I sent a PR to fix it.
Please try #8025

[lazaruscorporation]

Tested locally and confirmed that the Honeypot CSS is now only added on pages with forms on them