Bug #100771
closed
Nonce missing from all inline styles and javascript
Added by Gregor Hermens over 1 year ago. Updated 6 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 over 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 over 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 over 1 year ago
- Related to Task #100732: Allow f:asset.css and f:asset.script to use CSP nonce added
Updated by Oliver Hader over 1 year 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 Oliver Hader over 1 year ago
- Status changed from New to Needs Feedback
Updated by Denis Mir about 1 year 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 about 1 year 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 about 1 year 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
Updated by Garvin Hicking 6 months ago
- Status changed from Needs Feedback to Closed
I've followed Olivers advice and created a PR for the docs to mention this: https://github.com/TYPO3-Documentation/TYPO3CMS-Reference-CoreApi/pull/4494
Closing this ticket to carry on that task at that place. If you feel this is in error, please create a follow-up issue.
Updated by Gregor Hermens 6 months ago
Oliver Hader wrote in #note-7:
Automatically applying CSP
nonceorhashvalues to INLINE scripts or stylesheets is actually dangerous and should be done explicitly. Anything that is a static resource should get theirnonceorhashvalue automatically.
Dangerous how? And how should I include not static resources in a safe way?
Oliver Hader wrote in #note-8:
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
If inline scripts and stylesheets via TypoScript are broken with frontend CSP, this should be explicitly stated in the TypoScript Reference.
If automatically applying a nonce to inline resources is dangerous, imho either there should be a way to add it by configuration (ie page.inlineSettings.addNonce = 1), or inline resources via TS should be deprecated and removed.
Updated by Garvin Hicking 6 months ago
I think this is about using:
<script>
Alert('inline!')
</script>
this is considered unsafe. Including foreign files, or creating external files on the fly is still supported and not removed; it's not broken per se, especially if CSPs are not used.
So the way above is also still possible, just not when also using CSP AND TypoScript. So one has to be a bit more restrictive with how to use it. I don't think TYPO3 will allow to define inline scripts (not inline script references!) currently, because generally it should be avoided now to have "random" javascript inside the DOM.
I hoped to have phrased that in the docs PR. Please feel free to correct me if I understood something wrong.
Updated by Gregor Hermens 6 months ago
Garvin Hicking wrote in #note-12:
I think this is about using:
<script>
Alert('inline!')
</script>this is considered unsafe.
That's why I want to use
<script nonce="XXX">alert('safe inline code');</script>
Updated by Garvin Hicking 6 months ago
That's why I want to use
<script nonce="XXX">alert('safe inline code');</script>
Yes, but this is not done automatically because it's not a recommended best practice and is not encouraged, that is IMO what Oliver tried to express, and I tried to forward to the docs. You need to specify the nonce yourself for this - or try to find better ways to no longer need inline javascript (DOM/data-Attributes to HTML nodes, external javascript operating on this). Nonces are only auto-added for file references, because that is deemed "better".
Updated by Gregor Hermens 6 months ago
Garvin Hicking wrote in #note-14:
That's why I want to use
<script nonce="XXX">alert('safe inline code');</script>
Yes, but this is not done automatically because it's not a recommended best practice and is not encouraged, that is IMO what Oliver tried to express, and I tried to forward to the docs.
I got that, so I asked for a pointer, why inline code with nonce is deemed dangerous.
You need to specify the nonce yourself for this - or try to find better ways to no longer need inline javascript (DOM/data-Attributes to HTML nodes, external javascript operating on this). Nonces are only auto-added for file references, because that is deemed "better".
I am aware of the methods to include the nonce myself, like FLUIDTEMPLATE in headerData with the security.nonce viewhelper or TEXT with data = request : nonce | value. But this is more hassle than a simple page.inlineSettings.a = b.
So I proposed there should either be a simple way to include the nonce manually, or this behaviour should be documented in the TSref and all inline methods should be deprecated. Which one depends on the why-question above ...