Task #100140
closedEpic #87417: Integrate proper Content Security Policy (CSP) handling
Feature #99499: Introduce Content Security Policy handling
Properly handle inline stylesheets
100%
Description
See failing Acceptance Tests in https://git.typo3.org/typo3/CI/cms/-/jobs/2057378
- source
'nonce-...'
was given forstyle-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
How to trigger this behavior?¶
Add the nonce-proxy
to the backend CSP style-src
declaration like this (or apply trigger.patch
):
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),
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:
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.
CSP Level3 Specs¶
Note: 'unsafe-inline' is ignored when using a nonce or hashes.
This behavior is decribed in CSP L3 in section 6.7.3.2.:2.1 (https://w3c.github.io/webappsec-csp/#allow-all-inline):
If expression matches the nonce-source or hash-source grammar, return "Does Not Allow".
Files