[BUGFIX] Make importmaps cacheable

Render importmaps without a nonce in frontend mode and
supply a hash to the policy registry to allow the page
to be cached, as prepared in #104281.

Resolves: #106564
Related: #104281
Releases: main, 13.4
Change-Id: Ie9a619e07b7eceb6858a84be597d86f29a1ca70b
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/80200
Tested-by: core-ci <typo3@b13.com>
Tested-by: Oliver Hader <oliver.hader@typo3.org>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Benjamin Franzke <ben@bnf.dev>
Reviewed-by: Andreas Kienast <akienast@scripting-base.de>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Benjamin Franzke <ben@bnf.dev>
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>

Author: bnf

typo3/sysext/core/Classes/Page/ImportMap.php

@@ -24,6 +24,12 @@
 use TYPO3\CMS\Core\Package\PackageInterface;
 use TYPO3\CMS\Core\Page\Event\ResolveJavaScriptImportEvent;
 use TYPO3\CMS\Core\Security\ContentSecurityPolicy\ConsumableNonce;
+use TYPO3\CMS\Core\Security\ContentSecurityPolicy\Directive;
+use TYPO3\CMS\Core\Security\ContentSecurityPolicy\HashValue;
+use TYPO3\CMS\Core\Security\ContentSecurityPolicy\Mutation;
+use TYPO3\CMS\Core\Security\ContentSecurityPolicy\MutationCollection;
+use TYPO3\CMS\Core\Security\ContentSecurityPolicy\MutationMode;
+use TYPO3\CMS\Core\Security\ContentSecurityPolicy\PolicyRegistry;
 use TYPO3\CMS\Core\Utility\ArrayUtility;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Core\Utility\PathUtility;
@@ -43,6 +49,7 @@ class ImportMap
     public function __construct(
         protected readonly HashService $hashService,
         protected readonly array $packages,
+        protected readonly ?PolicyRegistry $policyRegistry = null,
         protected readonly ?FrontendInterface $cache = null,
         protected readonly string $cacheIdentifier = '',
         protected readonly ?EventDispatcherInterface $eventDispatcher = null,
@@ -129,8 +136,23 @@ public function render(
             $importMap,
             JSON_FORCE_OBJECT | JSON_UNESCAPED_SLASHES | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_TAG | JSON_THROW_ON_ERROR
         );
-        $nonceAttr = $nonce !== null ? ' nonce="' . htmlspecialchars((string)$nonce) . '"' : '';
-        $html[] = sprintf('<script type="importmap"%s>%s</script>', $nonceAttr, $json);
+        $attributes = [
+            'type' => 'importmap',
+        ];
+        if ($nonce !== null) {
+            $attributes['nonce'] = (string)$nonce;
+        } else {
+            $this->policyRegistry?->appendMutationCollection(
+                new MutationCollection(
+                    new Mutation(MutationMode::Extend, Directive::ScriptSrc, HashValue::hash($json))
+                )
+            );
+        }
+        $html[] = sprintf(
+            '<script %s>%s</script>',
+            GeneralUtility::implodeAttributes($attributes, true),
+            $json
+        );
 
         return implode(PHP_EOL, $html) . PHP_EOL;
     }

typo3/sysext/core/Classes/Page/ImportMapFactory.php

@@ -23,6 +23,7 @@
 use TYPO3\CMS\Core\Cache\Frontend\FrontendInterface;
 use TYPO3\CMS\Core\Crypto\HashService;
 use TYPO3\CMS\Core\Package\PackageManager;
+use TYPO3\CMS\Core\Security\ContentSecurityPolicy\PolicyRegistry;
 use TYPO3\CMS\Core\SingletonInterface;
 
 #[Autoconfigure(public: true)]
@@ -31,6 +32,7 @@
     public function __construct(
         private HashService $hashService,
         private PackageManager $packageManager,
+        private PolicyRegistry $policyRegistry,
         #[Autowire(service: 'cache.assets')]
         private FrontendInterface $assetsCache,
         private EventDispatcherInterface $eventDispatcher,
@@ -46,6 +48,7 @@ public function create(bool $bustSuffix = true): ImportMap
         return new ImportMap(
             $this->hashService,
             $activePackages,
+            $this->policyRegistry,
             $this->assetsCache,
             $this->cacheIdentifier,
             $this->eventDispatcher,

typo3/sysext/core/Classes/Page/PageRenderer.php

@@ -1442,9 +1442,11 @@ protected function renderMainJavaScriptLibraries()
 
         // @todo hookup with PSR-7 request/response
         $sitePath = GeneralUtility::getIndpEnv('TYPO3_SITE_PATH');
+
+        $useNonce = $this->getApplicationType() === 'BE';
         $out .= $this->javaScriptRenderer->renderImportMap(
             $sitePath,
-            $this->nonce
+            $useNonce ? $this->nonce : null,
         );
 
         $this->loadJavaScriptLanguageStrings();

typo3/sysext/core/Tests/Unit/Page/ImportMapTest.php

@@ -116,7 +116,7 @@ public function resolveNestedUrlImportWithoutBustSuffix(): void
     {
         $this->packages = ['core'];
 
-        $importMap = new ImportMap($this->hashService, $this->getPackages(), null, '', null, false);
+        $importMap = new ImportMap($this->hashService, $this->getPackages(), null, null, '', null, false);
         $nestedUrl = $importMap->resolveImport('@typo3/core/nested/module.js');
 
         self::assertEquals('Fixtures/ImportMap/core/Resources/Public/JavaScript/nested/module.js', $nestedUrl);