Inline JavaScript cannot run in secure CSP environment

[sxp-dalibor]

• I've read and understood the contribution guidelines.
• I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened.

1. When clicking the "This page is cornerstone content" checkbox in page properties, the "onclick" event is blocked by browser
2. When opening the "Dashboard" view of Yoast SEO, inline script execution is blocked by browser

Please describe what you expected to happen and why.

Inline javascript should load even when "unsafe-inline" keyword is not used for "script-src" CSP directive.

How can we reproduce this behavior?

1. Set CSP of your website to "script-src 'self' 'nonce-xxxxxx' 'report-sample';" - important is to avoid using "unsafe-inline" keyword
   e.g. by new Mutation(MutationMode::Extend, Directive::ScriptSrc, SourceKeyword::nonceProxy);
2. Open page properties
3. Click the SEO tab
4. Click "This page is cornerstone content" checkbox
5. Check the browser console for errors
6. Open Dashboard module of Yoast SEO
7. Check the browser console for errors

Screenshots

Cornerstone:

Dashboard:

Logs

• cornerstone error:
  Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-xxxxxx' 'report-sample'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
• dashboard error:
  Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-xxxxxx' 'report-sample'". Either the 'unsafe-inline' keyword, a hash ('sha256-gEzJUB0p/Xhcm6iFYd0HSLC+0pk6EYlbyYEfrtTGaNI='), or a nonce ('nonce-...') is required to enable inline execution.

How to fix

Cornerstone:

• File: /Resources/Private/Templates/TCA/Cornerstone.html
• Replace:
  <input id="{data.elementBaseName}" type="checkbox" data-formengine-input-name="data{data.elementBaseName}" value="1" {f:if(condition: data.databaseRow.tx_yoastseo_cornerstone, then: 'checked="checked"')} onclick="document.editform['data{data.elementBaseName}'].value=this.checked?(document.editform['data{data.elementBaseName}'].value|1):(document.editform['data{data.elementBaseName}'].value&0);TBE_EDITOR.fieldChanged('{data.tableName}','{data.vanillaUid}','{data.fieldName}','data{data.elementBaseName}');">
• With:
  <input id="{data.elementBaseName}" type="checkbox" data-formengine-input-name="data{data.elementBaseName}" value="1" {f:if(condition: data.databaseRow.tx_yoastseo_cornerstone, then: 'checked="checked"')}> <f:asset.script identifier="cornerstone_checkbox_handler" useNonce="true"> document.getElementById("{data.elementBaseName}").addEventListener("click", function(event) { const checkBoxElement = event.target; document.editform['data{data.elementBaseName}'].value=checkBoxElement.checked?(document.editform['data{data.elementBaseName}'].value|1):(document.editform['data{data.elementBaseName}'].value&0); checkBoxElement.dispatchEvent(new Event('change', {bubbles: true, cancelable: true})); }); </f:asset.script>

Dashboard:

• File: /Resources/Private/Partials/Dashboard/View.html
• Replace
  <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>
• With
  <f:asset.script identifier="yoast-dashboard-view" useNonce="true"> (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); </f:asset.script>

Technical info

• TYPO3 version: 13.4.0
• Yoast SEO version: 10.0.0
• Relevant extensions in case of a bug: headless