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 Bitto about 1 year ago. Updated about 1 year ago.

Status:
New
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Start date:
2020-11-20
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
10
PHP Version:
7.4
Tags:
CSP
Complexity:
easy
Is Regression:
Yes
Sprint Focus:

Description

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:

- https://bugzilla.mozilla.org/show_bug.cgi?id=1303364#c4
- https://github.com/w3c/webappsec-csp/issues/199
- https://github.com/w3c/webappsec-csp/issues/198

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

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

Actions
#1

Updated by Leonie Philine Bitto about 1 year 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:

#2

Updated by Oliver Hader about 1 year ago

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

Updated by Oliver Hader about 1 year 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'

Also available in: Atom PDF