CSP Problem

Steffen

Moin in die Runde,
ich habe aktuell noch ein CSP Problem in meinem Template, dass ich gern lösen würde.

Ich habe ein Lightbox Script und einige CSP Regeln per Yaml File eingebunden. In der CSP Konfiguration habe ich alle Checkboxen aktiviert. Die Lightbox habe ich per Asset Viewhelper eingebunden:

<f:asset.script identifier="fslightbox" src="EXT:mytemplate/Resources/Public/JavaScripts/Fslightbox/fslightbox.js" nonce="{f:security.nonce()}" />
<f:asset.script identifier="fslightbox-individual" src="EXT:mytemplate/Resources/Public/JavaScripts/Fslightbox/fslightbox_individual.js" nonce="{f:security.nonce()}"/>

Die Lightbox ist so eingebunden:

<div class="orbit" role="region" aria-label="{newsItem.title}" data-auto-play="false" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;" data-swipe="true">

Meine CSP sieht so aus:

// Inherits default site-unspecific frontend policy mutations (enabled per default)
inheritDefault: true
mutations:
  // Results in `default-src 'self'`
  - mode: "set"
    directive: "default-src"
    sources:
      - "'self'"
  // Extends the ancestor directive ('default-src'),
  // thus reuses 'self' and adds additional sources
  // Results in `img-src 'self' data: https://*.typo3.org`
  - mode: "extend"
    directive: "img-src"
    sources:
      - "data:"
      - "https://*.typo3.org"
  - mode: "extend"
    directive: "style-src-elem"
    sources:
      - "'self'"
  // Extends the ancestor directive ('default-src'),
  // thus reuses 'self' and adds additional sources
  // Results in `script-src 'self' 'nonce-[random]'`
  // ('nonce-proxy' is substituted when compiling the policy)
  - mode: "extend"
    directive: "script-src"
    sources:
      - "'nonce-proxy'"
  
  // Results in `worker-src blob:`
  - mode: "set"
    directive: "worker-src"
    sources:
      - "blob:"

In der Browser-Console bekomme ich folgende Fehlermeldung:

Content-Security-Policy: Die Einstellungen der Seite haben die Anwendung eines Inline-Styles (style-src-elem) blockiert, da er gegen folgende Direktive verstößt: "style-src-elem 'self' 'nonce-ZIjtmTeTeo1r_2Eplnlyx88QQA2lBzHQpUdBPJ910-hrVqSDlDQgTw' 'report-sample'"

Kann mir jemand weiterhelfen, um die Fehler zu beseitigen und die CSP clear zu haben?

Besten Dank schon mal
Steffen

Chris Müller

Steffen

Was sagt denn das Sample? Sollte im Backend-Modul aufgelaufen sein (oder in einem externen Tool, falls konfiguriert).

Was angemeckert wird ist, dass du ein <style>...</style> oder ein <link rel="stylesheet"> ohne Nonce hast.

Und: da du von den TYPO3-Regeln erbst, die "nonce-proxy" bereits setzen, sollte das unnötig sein.

Was mir aufgefallen ist:
<f:asset.script> hat ein "useNonce"-Attribut, das auf "1" gesetzt werden kann:
https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Asset/Script.html#viewhelper-argument-typo3-cms-fluid-viewhelpers-asset-scriptviewhelper-usenonce

Du nutzt jedoch ein "nonce"-Attribut, das ist nicht notwendig, mit "useNonce" = 1 macht das TYPO3 für dich.

Wolfgang Wagner

Ergänze doch auch mal bei style-src-elem unter sources: - "'nonce-proxy'"

Steffen

Wolfgang Wagner du meinst so?

# Inherits default site-unspecific frontend policy mutations (enabled per default)
inheritDefault: true
mutations:
  # Results in `default-src 'self'`
  - mode: "set"
    directive: "default-src"
    sources:
      - "'self'"
  # Extends the ancestor directive ('default-src'),
  # thus reuses 'self' and adds additional sources
  # Results in `img-src 'self' data: https://*.typo3.org`
  - mode: "extend"
    directive: "img-src"
    sources:
      - "data:"
      - "https://*.typo3.org"
  
  - mode: "extend"
    directive: "style-src-elem"
    sources:
      - "'self'"
      - "'nonce-proxy'"
  # Extends the ancestor directive ('default-src'),
  # thus reuses 'self' and adds additional sources
  # Results in `script-src 'self' 'nonce-[random]'`
  # ('nonce-proxy' is substituted when compiling the policy)
  - mode: "extend"
    directive: "script-src"
    sources:
      - "'nonce-proxy'"
  
  # Results in `worker-src blob:`
  - mode: "set"
    directive: "worker-src"
    sources:
      - "blob:"

Das Problem besteht trotzdem weiter. 🤔

Steffen

Chris Müller Hej Chris,
du meinst sicher den Eintrag im TYPO3 Backend der CSP's:

Directive / Disposition
    style-src-elem / report
Document URI
    https://projekt.ddev.site/der-schauzaun-in-luetzen-ist-aufgestellt.html (1:20380)
Source File
    https://projekt.ddev.site/_assets/e20a641f8e14babd8f517d1ac5fd6b92/JavaScripts/Fslightbox/fslightbox.js?1719833265
Blocked URI
    inline
Sample
    .fslightbox-fade-in{animation:fslightbox…
User Agent
    Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0
UUID
    9b80ad44-23c8-4101-86b8-6965599fd224
Summary
    47d4d444307fba36885a1baf86ca08271241e5a6

Das File das hier im Sample genannt wird, hat ein nonceAttribute.

Das einzige File (JS/CSS) ohne nonce ist das CSS File der News Extension:

plugin.tx_news.settings {
    # cat=plugin.tx_news/file; type=string; label=Path to CSS file
    cssFile = EXT:news/Resources/Public/Css/news-basic.css
}

nonce vs. useNonce – danke für den Hinweis, das habe ich entsprechend abgeändert.

Ich weiß nicht, wo ich hier noch was anpassen muss.

Vielen Dank für eure Hilfe
Steffen

Chris Müller

Such mal direkt im Quelltext nach "fslightbox.js" ob es eventuell noch ein zweites Mal eingebunden ist. Und kontrolliere dabei auch, ob der Wert des Nonce-Attributes dasselbe wie im CSP-Header ist.

Steffen

Chris Müller
Ich habe eine Lösung gefunden, die ich allerdings noch nicht ganz rund finde.

config {
    additionalHeaders.10.header = Strict-Transport-Security: max-age=31536000; includeSubDomains
    # additionalHeaders.20.header = X-Content-Type-Options: nosniff
    additionalHeaders.30.header = X-Powered-By: nothing
    additionalHeaders.40.header = Referrer-Policy: strict-origin-when-cross-origin
    # additionalHeaders.50.header = Permissions-Policy: geolocation=(), midi=(), camera=(), usb=(), magnetometer=(), accelerometer=(), vr=(), speaker=(), ambient-light-sensor=(), gyroscope=(), microphone=()
    # additionalHeaders.51.header = Feature-Policy: geolocation 'none'; midi 'none'; camera 'none'; usb 'none'; magnetometer 'none'; accelerometer 'none'; vr 'none'; speaker 'none'; ambient-light-sensor 'none'; gyroscope 'none'; microphone 'none'

    // Der folgende Header wird später noch unsere gesamte Aufmerksamkeit benötigen:
    additionalHeaders.60.header = Content-Security-Policy: frame-ancestors 'self'
}

Diese letzte Zeile führt dabei zum Erfolg.
additionalHeaders.60.header = Content-Security-Policy: frame-ancestors 'self'
Am coolsten fände ich, wenn ich das in das Yaml File einbinden kann. Da finde ich allerdings nicht die korrekte Config. :/ Hat da jemand noch einen Tipp für mich?
Gefunden habe ich das hier.

Besten Dank, Steffen

Unterstütze das Forum

Hilf mit, den Community Hub für TYPO3 werbefrei zu halten und die Betriebskosten zu decken. Werde Official Community Hub Supporter für nur 5 Euro im Monat (zzgl. USt) und erhalte ein exklusives Supporter-Badge. Jeder Beitrag zählt!

Jetzt Supporter werden

Impressum - Datenschutz - Kontakt - Netiquette - RSS