Task #100140
Updated by Oliver Hader about 1 year ago
See failing Acceptance Tests in https://git.typo3.org/typo3/CI/cms/-/jobs/2057378
* source @'nonce-...'@ was given for @style-src@
* unsure why a sitemap check (frontend) invokes acceptance tests in the backend
> 24) SitemapXmlCest: See sitemap xml | "/menu-section-pages"
> Test Acceptance/Application/Frontend/SitemapXmlCest.php:seeSitemapXml
> Found following JavaScript errors in the browser console:
> 12:11:55.312 SEVERE - http://web:8000/typo3temp/var/tests/acceptance/typo3/index.php 16 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-p7sAugH1IbHGrW0y_Jf9_kfJA8hS56QuUykpWXQ_b4ahCJucZAcTQg' 'unsafe-inline'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.
>
In order to use stylesheets with nonce sources (implicitly required for @'strict-dynamic'@ as well)
* inline styles (@style-src-elem@) should use a potential nonce
* lit-elements need to use the @window.litNonce@ work-around
h3. How to trigger this behavior?
Add the @nonce-proxy@ to the backend CSP @style-src@ declaration like this (or apply @trigger.patch@):
<pre>
diff --git a/typo3/sysext/backend/Configuration/ContentSecurityPolicies.php b/typo3/sysext/backend/Configuration/ContentSecurityPolicies.php
index 3a57b2ed4b..8e8fce1450 100644
--- a/typo3/sysext/backend/Configuration/ContentSecurityPolicies.php
+++ b/typo3/sysext/backend/Configuration/ContentSecurityPolicies.php
@@ -24,7 +24,7 @@ return Map::fromEntries([
new Mutation(MutationMode::Extend, Directive::ScriptSrc, SourceKeyword::nonceProxy),
// `style-src 'unsafe-inline'` required for lit in safari and firefox to allow inline <style> tags
// (for browsers that do not support https://caniuse.com/mdn-api_shadowroot_adoptedstylesheets)
- new Mutation(MutationMode::Extend, Directive::StyleSrc, SourceKeyword::unsafeInline),
+ new Mutation(MutationMode::Extend, Directive::StyleSrc, SourceKeyword::unsafeInline, SourceKeyword::nonceProxy),
// `style-src-attr 'unsafe-inline'` required for remaining inline styles, which is okay for color & dimension
// (e.g. `<div style="color: #000">` - but NOT having the possibility to use any other assets/files/URIs)
new Mutation(MutationMode::Set, Directive::StyleSrcAttr, SourceKeyword::unsafeInline),
</pre>
Then e.g. open the rich-text editor (CKEditor5) or the Table Element Wizard (content element, type table) and you'll get something like the following in the browser console:
<pre>
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' 'nonce-PniZLZFRhVuOMB_rKhX_dyDW493AwF44_KKMB9Bam6FpdH2lkG0z1g'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.
</pre>