Bug #100771
open
Nonce missing from all inline styles and javascript
Added by Gregor Hermens about 1 year ago. Updated 7 months ago.
0%
Description
The inline script for the definition of the TYPO3 object (from page.inlineSettings: https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Setup/Page/Index.html#inlinesettings ) has no nonce attribute and is thus blocked by CSP.
Updated by Gregor Hermens about 1 year ago
- Subject changed from CSP blocks TYPO3 object to Nonce missing from all inline styles and javascript
- PHP Version set to 8.1
Tested on TYPO3 12.4.0 composer installation, PHP 8.1.18, MariaDB 10.3, only core extensions installed.
How to reproduce:
Typoscript Setup:
config {
inlineStyle2TempFile = 0
removeDefaultCss = 1
removeDefaultJS = 1
}
page = PAGE
page {
10 = TEXT
10.value = <h1>Hello world!</h1>
CSS_inlineStyle = /* CSS_inlineStyle */
cssInline {
10 = TEXT
10.value = /* cssInline */ h1 {color:red;}
}
inlineSettings {
foo = bar
}
jsInline {
10 = TEXT
10.value = /* jsInline */
}
jsFooterInline {
10 = TEXT
10.value = /* jsFooterInline */
}
}
Actual results:
No inline script or style tag has a nonce attribute.
With security.frontend.enforceContentSecurityPolicy enabled, "Hello world" has the browser's default color.
Code of the frontend page:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="utf-8">
<!--
This website is powered by TYPO3 - inspiring people to share!
TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
TYPO3 is copyright 1998-2023 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at https://typo3.org/
-->
<title>TYPO3 12: Startseite</title>
<meta name="generator" content="TYPO3 CMS" />
<meta name="twitter:card" content="summary" />
<style>
/*<![CDATA[*/
<!--
/*additionalTSFEInlineStyle*/
/* cssInline */ h1 {color:red;}
-->
/*]]>*/
</style>
<script>
/*<![CDATA[*/
var TYPO3 = Object.assign(TYPO3 || {}, Object.fromEntries(Object.entries({"settings":{"TS":{"foo":"bar"}}}).filter((entry) => !['__proto__', 'prototype', 'constructor'].includes(entry[0]))));
/*]]>*/
</script>
<script>
/*<![CDATA[*/
/*TS_inlineJS*/
/* jsInline */
/*]]>*/
</script>
<link rel="canonical" href="http://typo3-12.midgard/"/>
</head>
<body>
<h1>Hello world!</h1>
<script>
/*<![CDATA[*/
/*TS_inlineFooter*/
/* jsFooterInline */
/*]]>*/
</script>
</body>
</html>
Browser console says:
Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf data: blockiert ("default-src"). typo3-12.midgard
Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf inline blockiert ("default-src"). typo3-12.midgard:21:1
Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf inline blockiert ("script-src"). typo3-12.midgard:30:1
Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf inline blockiert ("script-src"). typo3-12.midgard:36:1
Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf inline blockiert ("script-src"). typo3-12.midgard:50:1
Expected results:
All inline script and style tags have a nonce attribute.
"Hello world!" is red.
No errors in the console.
Updated by Johannes Nielsen about 1 year ago
This extends to inline scripts and styles added using the `f:asset.script` and `f:asset.css` ViewHelpers, e.g. these two will be blocked by the CSP:
<f:asset.script identifier="helloWorld">
console.log("Hello world!")
</f:asset.script>
<f:asset.css identifier="helloWorld">
body { max-width: 1200px; margin: 0 auto; }
</f:asset.css>
Updated by Oliver Hader 10 months ago
- Related to Task #100732: Allow f:asset.css and f:asset.script to use CSP nonce added
Updated by Oliver Hader 10 months ago
Issue #100732 introduced the boolean attribute useNonce, e.g.
<f:asset.script useNonce="1">console.log('Hello World');</f:asset.script>
The tag attribute nonce would allow to define a static value (which is not suggested from a security point of view). The {f:security.nonce()} could be used to retrieve the current dynamic nonce value for the whole request, which seems to be too complicated. Thus, the tag attribute nonce might be deprecated & removed with TYPO3 v13.
<f:asset.script nonce="static-nonce-value">console.log('Hello World');</f:asset.script>
<f:asset.script nonce="{f:security.nonce()}">console.log('Hello World');</f:asset.script>
Updated by Denis Mir 7 months ago
We can confirm that the nonce value is not getting generated automatically like mentioned in the docs for "jsInline". (the docs say "The nonce is applied automatically, when scripts or styles are defined with the TYPO3 API, like TypoScript (page.includeJS, etc.) or the asset collector.")
Updated by Oliver Hader 7 months ago
Automatically applying CSP nonce or hash values to INLINE scripts or stylesheets is actually dangerous and should be done explicitly. Anything that is a static resource should get their nonce or hash value automatically.
Updated by Oliver Hader 7 months ago
Denis Mir wrote in #note-6:
We can confirm that the nonce value is not getting generated automatically like mentioned in the docs for "jsInline". (the docs say "The nonce is applied automatically, when scripts or styles are defined with the TYPO3 API, like TypoScript (page.includeJS, etc.) or the asset collector.")
The docs at https://docs.typo3.org/m/typo3/reference-coreapi/12.4/en-us/ApiOverview/ContentSecurityPolicy/Index.html are not mentioning jsInline at all...
Anyway, it might be more specific, that inline scripts and stylesheets via TypoScript are not added automatically. Feed free to create a new issue at https://github.com/TYPO3-Documentation/TYPO3CMS-Reference-CoreApi