Documentation: CSP in TYPO3 12

[fsuter]

I recently updated a web site from TYPO3 11 to TYPO3 12 where I use your (excellent!) content_animations extension. I had a lot of trouble getting the animations to work and digging into the reasons led me to the Content Security Policies, that may be activated in TYPO3 12.

In essence, if you activate the feature toggle "Security: frontend enforce content security policy", the inline script containing the AOS library will be blocked by default. I couldn't get the right CSP settings to unblock it, but I found a solution which I consider better anyway: I just activated the externalisation of inline scripts, using the TypoScript setting config.removeDefaultJS = external.

The externalized script comes with a nonce which allows it to pass through the CSP.

I think that this should be added to the extension documentation.

[fsuter]

Addition: I still see some CSP violations related to AOS for the "style-src-elem" directive even though I added a CSP rule to allow unsafe-inline for "style-src-elem". I don't know that to do for now, but the animations work (I'm using only a few animations, so maybe some fail).

EDIT: I just found out that unsafe-inline doesn't help in this case since it is ignored when there a nonce in the directives properties, which is the case (TYPO3 provides a nonce out of the box to "sign" its various scripts).

[zenoussi]

hey @fsuter,
I would also welcome the addition of this topic to the documentation.

I have taken this measure uncertainly:

# Inherits default site-unspecific frontend policy mutations (enabled per default)
inheritDefault: true
mutations:
  - mode: extend
    directive: 'style-src-elem'
    sources:
      # fslightbox inline style
      - "'sha256-WWW='"
      # content_animations inline style
      - "'sha256-XXX='"
      - "'sha256-YYY='"