TYPO3 v10 Upgrade Fluid Displays HTML Tags

I recently upgraded from version 9 to 10 and after that, some extensions where I overwrite fluid template renders plain html like that:

<center><div id="event-id-{event.uid}-arrow"class="arrow-down"></div></center>

TYPOSCRIPT:

plugin.tx_sfeventmgt {
  view {
    templateRootPaths {
      0 = {$plugin.tx_sfeventmgt.view.templateRootPath}
      1 = fileadmin/templates/sf_event_mgt/Templates/
    }
    partialRootPaths {
      0 = {$plugin.tx_sfeventmgt.view.partialRootPath}
      1 = fileadmin/templates/sf_event_mgt/Partials/
    }
    layoutRootPaths {
      0 = {$plugin.tx_sfeventmgt.view.layoutRootPath}
      1 = fileadmin/templates/sf_event_mgt/Layouts/
    }
  }
}

Partials/Event/ListItem.html:

<div style="cursor: pointer; margin-left: -0.75rem; margin-right: -0.75rem; " onclick="" class="list-view-item hoverbackground">
    <center><div id="event-id-{event.uid}-arrow"class="arrow-down"></div></center>
</div>
<p>&nbsp;</p>

Any hints why this happens on version 10 and not on version 9?

Regards

Solution

The solution to your problem will most likely be, that you must remove the <f:format.html> viewHelper somewhere in your template or layout file(s).

I recommend that you remove <f:format.html> in your template files (templates, layouts and partials) step by step in order to identify, where the ViewHelper is used "wrong".

Background:

With the security fix TYPO3-CORE-SA-2021-013 the HTML sanitizer component has been introduced to TYPO3 core. This component ensures, that potentially malicious markup will be escaped when content is rendered through the <f:format.html> ViewHelper. This ViewHelper should usually be used to render content from rich text fields. If you use this ViewHelper to render plain HTML, then you will experience the described problems, since the HTML sanitizer will simply escape markup that is not allowed.

Example:

<f:format.html>
    <style>p {font-size: 10px;}</style>

    <center>Text is centered</center>

    <strong>Text is bold</strong>

    <f:link.external uri="https://typo3.org">https://typo3.org</f:link.external>
</f:format.html>

This will render the following HTML:

<p>&nbsp;</p>
<p>    &lt;style&gt;p {font-size: 10px;}&lt;/style&gt;</p>
<p>&nbsp;</p>
<p>    </p>&lt;center&gt;Text is centered&lt;/center&gt;
<p>&nbsp;</p>
<p>    <strong>Text is bold</strong></p>
<p>&nbsp;</p>
<p>    <a href="https://typo3.org" target="_blank" rel="noreferrer">https://typo3.org</a></p>
<p>&nbsp;</p>

You see, that both the <style> and the <center> tags are escaped when rendered (similar to the scenario in your screenshot).

Note: Please do not simply replace the <f:format.html> viewHelper with <f:format.raw>, since this may introduce a cross-site scripting security vulnerability when the ViewHelper is used with untrusted user input.

Also please do not disable HTML sanitizer by in frontend context by setting [SYS][features][security.frontend.htmlSanitizeParseFuncDefault] = false in install tool.