[BUGFIX] Fixed CSP issues in Cornerstone form element and Dashboard b…

…ackend module, fixed some more dark mode styling issues
Yoast · Jan 28, 2025 · 9af2f98 · 9af2f98
1 parent 7e12065
commit 9af2f98
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 36 deletions.
diff --git a/Build/phpstan/phpstan.cms11.neon b/Build/phpstan/phpstan.cms11.neon
@@ -13,6 +13,7 @@ parameters:
     - '#TYPO3\\CMS\\Extbase\\Mvc\\RequestInterface#'
     - '#TYPO3\\CMS\\Core\\View\\ViewInterface#'
     - '#TYPO3\\CMS\\Core\\Domain\\Repository\\PageRepository::getLanguageOverlay#'
+    - '#TYPO3\\CMS\\Core\\Domain\\ConsumableString#'
     - '#frontend.page.information#'
     - '#ModifyPageLayoutContentEvent#'
     - '#AfterCacheableContentIsGeneratedEvent#'
@@ -21,6 +22,7 @@ parameters:
     - '#addJsInlineCode#'
     - '#calculateLifetimeForPage#'
     - '#CacheLifetimeCalculator#'
+    - '#nonce#'
   typo3:
     requestGetAttributeMapping:
         handlerRequest: string
diff --git a/Build/phpstan/phpstan.cms12.neon b/Build/phpstan/phpstan.cms12.neon
@@ -11,4 +11,5 @@ parameters:
     - '#protected method getRecordOverlay#'
   typo3:
     requestGetAttributeMapping:
-        handlerRequest: string
+        handlerRequest: string
+        nonce: TYPO3\CMS\Core\Security\ContentSecurityPolicy\ConsumableNonce
diff --git a/Build/phpstan/phpstan.cms13.neon b/Build/phpstan/phpstan.cms13.neon
@@ -14,3 +14,4 @@ parameters:
     requestGetAttributeMapping:
         frontend.page.information: TYPO3\CMS\Frontend\Page\PageInformation
         handlerRequest: string
+        nonce: TYPO3\CMS\Core\Security\ContentSecurityPolicy\ConsumableNonce
diff --git a/Build/resources/sass/backend-module.scss b/Build/resources/sass/backend-module.scss
@@ -19,6 +19,7 @@ $gutter: 32px;
 	}
 
 	&-content {
+		color: var(--typo3-state-default-color, #000);
 
 		.row {
 			max-width: 1650px;

diff --git a/Build/resources/sass/backend-module/_headings.scss b/Build/resources/sass/backend-module/_headings.scss
@@ -3,7 +3,7 @@
 		color: $yoast_color_headings;
 
 		span {
-			color: #000;
+			color: var(--typo3-state-default-color, #000);
 		}
 	}
 }
diff --git a/Build/resources/yarn.lock b/Build/resources/yarn.lock
@@ -993,13 +993,20 @@
     core-js "^2.5.7"
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.16.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.16.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
   integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.12.5":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.7.tgz#f4e7fe527cd710f8dc0618610b61b4b060c3c341"
+  integrity sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.25.9", "@babel/template@^7.3.3":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
@@ -2120,16 +2127,16 @@
   integrity sha512-oocsqY7g0cR+Gur5jRQLSrX2OtpMLMse1I10JQBm8CdGMrDkh1Mg2gjsiquMHRtBs4Qwu5wgEp5GgIYHk4SNPw==
 
 "@tanstack/react-virtual@^3.0.0-beta.60":
-  version "3.10.8"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.10.8.tgz#bf4b06f157ed298644a96ab7efc1a2b01ab36e3c"
-  integrity sha512-VbzbVGSsZlQktyLrP5nxE+vE1ZR+U0NFAWPbJLoG2+DKPwd2D7dVICTVIIaYlJqX1ZCEnYDbaOpmMwbsyhBoIA==
+  version "3.11.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.11.3.tgz#cd62ecc431043c4a9ca24ea8dfcc2a70f4805380"
+  integrity sha512-vCU+OTylXN3hdC8RKg68tPlBPjjxtzon7Ys46MgrSLE+JhSjSTPvoQifV6DQJeJmA8Q3KT6CphJbejupx85vFw==
   dependencies:
-    "@tanstack/virtual-core" "3.10.8"
+    "@tanstack/virtual-core" "3.11.3"
 
-"@tanstack/virtual-core@3.10.8":
-  version "3.10.8"
-  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.10.8.tgz#975446a667755222f62884c19e5c3c66d959b8b4"
-  integrity sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==
+"@tanstack/virtual-core@3.11.3":
+  version "3.11.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.11.3.tgz#ab92ff899825e2d71fc9914dda2847a099d43862"
+  integrity sha512-v2mrNSnMwnPJtcVqNvV0c5roGCBqeogN8jDtgtuHCphdwBasOZ17x8UV8qpHUh+u0MLfX43c0uUHKje0s+Zb0w==
 
 "@tootallnate/once@2":
   version "2.0.0"
@@ -3697,9 +3704,9 @@
   integrity sha512-gp2vPCJesNLG4QYxp/wWOTch88D4a0TkS2GL4N23Rfrl2XrUoM0HHTzRtk0rGd+xMLn/a4fYMI6976HjblhEcg==
 
 "@yoast/ui-library@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@yoast/ui-library/-/ui-library-4.0.0.tgz#e597bf92f3b7d0082fe56cd767f0cab321c8f936"
-  integrity sha512-9vlDJYtkpleNeknAu7o/b4nRZDtPJW1Rll1yCNkVB8/6hzlOPWIGROphkv0q+sooHf0ftkeXFIGowZGExoJbnw==
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@yoast/ui-library/-/ui-library-4.1.0.tgz#d81d056219a286908e4c1f319853f40374a827de"
+  integrity sha512-xJefGYKWcw4izS7y6hYM4ZhUG+dNtub5g2hwqzT6q28veI10CIkzpKvuh3qWA/30v0WJIaX6o4AXhN1ZtUOnYA==
   dependencies:
     "@headlessui/react" "^1.7.8"
     "@heroicons/react" "^1.0.6"
@@ -8644,9 +8651,9 @@ grunt-eslint@^21.0.0:
     chalk "^2.1.0"
     eslint "^5.16.0"
 
-"grunt-glotpress@git+https://github.com/Yoast/grunt-glotpress.git#main":
+"grunt-glotpress@https://github.com/Yoast/grunt-glotpress.git#main":
   version "0.3.0"
-  resolved "git+https://github.com/Yoast/grunt-glotpress.git#e6ccc69c2532d126f5d8a30397ffd012e55b6eec"
+  resolved "https://github.com/Yoast/grunt-glotpress.git#e6ccc69c2532d126f5d8a30397ffd012e55b6eec"
   dependencies:
     request "^2.88.0"
     request-promise-native "^1.0.7"

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,10 @@ We will follow [Semantic Versioning](http://semver.org/).
 - Updates scss files to work with the new dark mode in TYPO3 13
 - Labels for Readability and SEO score are now taken from the Yoast translations instead of xlf
 
+### Fixed
+- CSP issues within the `Cornerstone` form element and the Dashboard backend module
+- Dark mode styling for the Dashboard and Overview backend module
+
 ## 10.1.0 January 27, 2025
 ### Added
 - `TypoScriptStructuredDataProvider` to add structured data to the page, configured with TypoScript (premium functionality)

diff --git a/Classes/Controller/DashboardController.php b/Classes/Controller/DashboardController.php
@@ -5,11 +5,30 @@
 namespace YoastSeoForTypo3\YoastSeo\Controller;
 
 use Psr\Http\Message\ResponseInterface;
+use TYPO3\CMS\Core\Domain\ConsumableString;
+use TYPO3\CMS\Core\Information\Typo3Version;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
 
 class DashboardController extends AbstractBackendController
 {
     public function indexAction(): ResponseInterface
     {
-        return $this->returnResponse('Dashboard/Index');
+        return $this->returnResponse(
+            'Dashboard/Index',
+            ['nonce' => $this->getNonce()]
+        );
+    }
+
+    protected function getNonce(): string
+    {
+        if (GeneralUtility::makeInstance(Typo3Version::class)->getMajorVersion() < 12) {
+            return '';
+        }
+        /** @var ConsumableString|null $nonceAttribute */
+        $nonceAttribute = $this->request->getAttribute('nonce');
+        if ($nonceAttribute instanceof ConsumableString) {
+            return $nonceAttribute->consume();
+        }
+        return '';
     }
 }
diff --git a/Classes/Form/Element/Cornerstone.php b/Classes/Form/Element/Cornerstone.php
@@ -4,30 +4,49 @@
 
 namespace YoastSeoForTypo3\YoastSeo\Form\Element;
 
-use TYPO3\CMS\Backend\Form\AbstractNode;
+use TYPO3\CMS\Backend\Form\Element\CheckboxElement;
+use TYPO3\CMS\Core\Information\Typo3Version;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
-use YoastSeoForTypo3\YoastSeo\Service\Form\NodeTemplateService;
-
-class Cornerstone extends AbstractNode
+use TYPO3\CMS\Extbase\Utility\LocalizationUtility;
+
+/**
+ * TODO: This should be handled differently in the future, for example by overriding appendValueToLabelInDebugMode
+ * but due to the differences between 11, 12 and 13 there's currently no way to add the html to the label in a clean way
+ * the old way was to provide a custom html template but that caused problems with the inline javascript (CSP)
+ * This way the core method is used and thus works for every version, but it's not clean
+ */
+class Cornerstone extends CheckboxElement
 {
-    // TODO: Use constructor DI when TYPO3 v11 can be dropped
-    protected NodeTemplateService $templateService;
-
     /**
      * @return array<string, mixed>
      */
     public function render(): array
     {
-        $this->init();
-
-        $resultArray = $this->initializeResultArray();
-        $resultArray['html'] = $this->templateService->renderView('Cornerstone', ['data' => $this->data]);
-
-        return $resultArray;
+        $checkboxResultArray = parent::render();
+
+        if (GeneralUtility::makeInstance(Typo3Version::class)->getMajorVersion() < 12) {
+            $checkboxResultArray['html'] = str_replace(
+                '<span class="form-check-label-text">',
+                '<span class="form-check-label-text">' . $this->getLabelWithYoastLink(),
+                $checkboxResultArray['html']
+            );
+        } else {
+            $checkboxResultArray['html'] = preg_replace(
+                '/(<label\b[^>]*\bclass="[^"]*\bform-check-label\b[^"]*"[^>]*>)(.*?)(<\/label>)/is',
+                '$1$2' . $this->getLabelWithYoastLink() . '$3',
+                $checkboxResultArray['html']
+            );
+        }
+
+        return $checkboxResultArray;
     }
 
-    protected function init(): void
+    protected function getLabelWithYoastLink(): string
     {
-        $this->templateService = GeneralUtility::makeInstance(NodeTemplateService::class);
+        return LocalizationUtility::translate(
+            'LLL:EXT:yoast_seo/Resources/Private/Language/BackendModule.xlf:thisPageIsCornerstoneContent',
+            'yoast_seo',
+            ['https://yoa.st/metabox-help-cornerstone']
+        ) ?? '';
     }
 }
diff --git a/Resources/Private/Partials/Dashboard/View.html b/Resources/Private/Partials/Dashboard/View.html
@@ -94,8 +94,8 @@ <h2>
                 <button type="submit" name="subscribe" id="mc-embedded-subscribe" class="yoast-button yoast-button--noarrow yoast-button--extension yoast-button--extension-cta yoast-link" style="margin-top: 10px;">{f:translate(key: 'LLL:EXT:yoast_seo/Resources/Private/Language/BackendModule.xlf:dashboard.seoTips.submit')}</button>
             </form>
 
-            <script type="text/javascript" src="{f:uri.resource(path:'EXT:yoast_seo/Resources/Public/JavaScript/dist/mc-validate.js')}"></script>
-            <script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=‘EMAIL’;ftypes[0]=‘email’;fnames[1]=‘LBTITLE’;ftypes[1]=‘text’;fnames[2]=‘LBADTEXT’;ftypes[2]=‘text’;fnames[3]=‘LBADLINK’;ftypes[3]=‘text’;fnames[4]=‘LBIMAGEURL’;ftypes[4]=‘text’;fnames[5]=‘LBPIXEL’;ftypes[5]=‘text’;fnames[6]=‘LAUNCHBIT’;ftypes[6]=‘text’;fnames[7]=‘NAME’;ftypes[7]=‘text’;fnames[8]=‘FIRST_TIME’;ftypes[8]=‘text’;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
+            <script type="text/javascript" src="{f:uri.resource(path:'EXT:yoast_seo/Resources/Public/JavaScript/dist/mc-validate.js')}" nonce="{nonce}"></script>
+            <script type="text/javascript" nonce="{nonce}">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='LBTITLE';ftypes[1]='text';fnames[2]='LBADTEXT';ftypes[2]='text';fnames[3]='LBADLINK';ftypes[3]='text';fnames[4]='LBIMAGEURL';ftypes[4]='text';fnames[5]='LBPIXEL';ftypes[5]='text';fnames[6]='LAUNCHBIT';ftypes[6]='text';fnames[7]='NAME';ftypes[7]='text';fnames[8]='FIRST_TIME';ftypes[8]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
 
         </div>
     </div>

diff --git a/Resources/Private/Templates/Dashboard/Index.html b/Resources/Private/Templates/Dashboard/Index.html
@@ -4,7 +4,7 @@
 <f:layout name="{layout}" />
 
 <f:section name="Content">
-	<f:render partial="Dashboard/View" />
+	<f:render partial="Dashboard/View" arguments="{_all}" />
 </f:section>
 
 </html>
diff --git a/Resources/Public/CSS/yoast-seo-backend.min.css b/Resources/Public/CSS/yoast-seo-backend.min.css
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ $gutter: 32px; @@
     	}
     	&-content {
+    		color: var(--typo3-state-default-color, #000);
     		.row {
     			max-width: 1650px;
@@ Expand Down @@