Bug #92893


SVG sprites are a breaking change, requiring CSP `default-src` to not be 'none'. Otherwise, icons are blocked in Firefox.

Added by Leonie Philine about 3 years ago. Updated 11 months ago.

Needs Feedback
Should have
Backend User Interface
Start date:
Due date:
% Done:


Estimated time:
TYPO3 Version:
PHP Version:
Is Regression:
Sprint Focus:


Backend icons are broken in Firefox on sites with a good CSP policy, applying a strict `default-src: 'none'` and using granular controls for e.g. `script-src`, `img-src` etc.

Example of a TYPO3 backend CSP: (Yeah, we don't like unsafe-inline and unsafe-eval, either!)

Content-Security-Policy: default-src 'none'; font-src 'self'; img-src 'self' data:; object-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src 'self'; style-src 'self' 'unsafe-inline'; frame-src 'self'; frame-ancestors 'self'; base-uri 'self'; form-action 'self'; manifest-src 'self'

In Firefox, the SVG Sprite icons (introduced in a security patch version!) are not displayed, because `img-src` does not apply. See bugs:


This should probably have been a "breaking change" for TYPO3 11, since admins / devops engineers will need to open up the CSP policy now.

Regression, please undo.

Related issues 2 (0 open2 closed)

Related to TYPO3 Core - Task #92689: Update @typo3/icons to v2 and support icon spritesClosed2020-10-23

Related to TYPO3 Core - Bug #95312: SVG Style-Tag CSP-Block / Firefox-BugClosed2021-09-22

Actions #1

Updated by Leonie Philine about 3 years ago

Implementation detail:

The new SVG sprites use xlink:href - e.g.:

<use xlink:href="/typo3/sysext/core/Resources/Public/Icons/T3Icons/sprites/apps.svg#apps-pagetree-page-shortcut-external />

However, xlink:href is deprecated:

Actions #2

Updated by Oliver Hader about 3 years ago

  • Related to Task #92689: Update @typo3/icons to v2 and support icon sprites added
Actions #3

Updated by Oliver Hader about 3 years ago

Without having it tested... the only work-around for this seems to weaken default-src, but restrict remaining fetch directives.

Any token/hash based grant probably would not work with inline SVGs.

# Fetch directives
Content-Security-Policy: default-src 'self'; connect-src 'self'
Content-Security-Policy: font-src 'self'; img-src 'self' data:
Content-Security-Policy: script-src 'self' 'unsafe-inline' 'unsafe-eval'
Content-Security-Policy: style-src 'self' 'unsafe-inline'
Content-Security-Policy: frame-src 'self'; frame-ancestors 'self'

# note: media-src was missing, probably should be 'self' instead for a CMS
Content-Security-Policy: child-src 'none'; object-src 'none'; media-src 'none'

# W3C working draft directives
Content-Security-Policy: prefetch-src 'none'; worker-src 'none'

# Document & Navigate directives
Content-Security-Policy: base-uri 'self'; form-action 'self'; manifest-src 'self'

given policy in report

  default-src 'none'; connect-src 'self';
  font-src 'self'; img-src 'self' data:;
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  frame-src 'self'; frame-ancestors 'self';

  object-src 'none';

  base-uri 'self'; form-action 'self'; manifest-src 'self'
Actions #4

Updated by Oliver Hader almost 2 years ago

  • Related to Bug #95312: SVG Style-Tag CSP-Block / Firefox-Bug added
Actions #5

Updated by Oliver Hader almost 2 years ago

  • Status changed from New to Needs Feedback
Actions #6

Updated by Oliver Hader almost 2 years ago

Tested the following CSP settings in a TYPO3 backend of version 11:

Content-Security-Policy: default-src 'self'; img-src 'self' data:; script-src 'self' 'unsafe-inline'; style-src-attr 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline'; frame-src 'self'; child-src 'none'; object-src 'none'; prefetch-src 'none'; worker-src 'self' blob:;

Side notes:

  • script-src
    • unsafe-eval was removed
    • unsafe-inline is still kept due to CKEditor v4 doing inline magic (basically not using DOM operations, but using document.write)
  • worker-src
    • blob: allowed for muuri.js which is used in the Dashboard view
  • default-src
    • weakened from none to self
    • adjusted child-src, object-src and prefect-src to keep none
Actions #7

Updated by Oliver Hader almost 2 years ago

There's still a lot of things to do for applying real secure CSP settings for the TYPO3 backend (the initially reported rules are not considered secure due to unsafe-eval and unsafe-inline). Please let me know whether the adjusted CSP above fits your needs for the time being. Thanks in advance!

Actions #8

Updated by Oliver Hader 11 months ago

  • Tags changed from CSP to pending-close

Could not reproduce in TYPO3 v12.2-dev anymore...


Also available in: Atom PDF