From e0e754c8aed9c5b74f0f5fcaaedf47a60bc9bc90 Mon Sep 17 00:00:00 2001
From: Benjamin Dalsass <benjamin.dalsass@combodo.com>
Date: Fri, 12 Sep 2025 07:40:52 +0200
Subject: [PATCH] =?UTF-8?q?N=C2=B08676=20-=20Portal=20new=20look=20:=20Dis?=
 =?UTF-8?q?play=20issue=20when=20text=20contains=20an=20aprostrophe=20-=20?=
 =?UTF-8?q?fix=20title=20double=20encoding=20-=20prevent=20XSS=20attack=20?=
 =?UTF-8?q?on=20modal=20title?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 asset/js/custom_elements/carousel_tile_element.js |  5 +++--
 src/Controller/CommunicationBrickController.php   |  2 +-
 view/tile_v3.html.twig                            | 11 +++++++----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/asset/js/custom_elements/carousel_tile_element.js b/asset/js/custom_elements/carousel_tile_element.js
index 9d0d665..71d815e 100644
--- a/asset/js/custom_elements/carousel_tile_element.js
+++ b/asset/js/custom_elements/carousel_tile_element.js
@@ -162,9 +162,10 @@ class IpbCarouselTileElement extends IpbTileElement {
 
         // update modal content
         let itemElement = $(`.item[data-item-number="${this.iModalCurrentMessage}"]`, this.$Carousel);
-        let sTitleIcon = `<div class="ipb-tile--decoration ${itemElement.data('item-icon')}"><span class="ipb-tile--decoration--icon icon ${itemElement.data('item-icon-class')}"></span></div>`;
         $('.modal-body', this.$Modal).html(itemElement.html());
-        $('.modal-title', this.$Modal).html(sTitleIcon + itemElement.data('item-title'));
+        $('.modal-title-decoration', this.$Modal)[0].className = `modal-title-decoration ipb-tile--decoration ${itemElement.data('item-icon')}`;
+        $('.modal-title-decoration-icon', this.$Modal)[0].className = `modal-title-decoration-icon ipb-tile--decoration--icon icon ${itemElement.data('item-icon-class')}`;
+        $('.modal-title-text', this.$Modal).text(itemElement.data('item-title'));
         $('[data-role="carousel-modal--message-count"]', this.$Modal).html(itemElement.data('item-number') + ' / ' + this.iMessagesCount);
 
         // update navigation buttons
diff --git a/src/Controller/CommunicationBrickController.php b/src/Controller/CommunicationBrickController.php
index eb08ab7..6d7d270 100644
--- a/src/Controller/CommunicationBrickController.php
+++ b/src/Controller/CommunicationBrickController.php
@@ -86,7 +86,7 @@ public function RenderTileAction(Request $oRequest, $sBrickId)
 		// set title and icon for the tile with the first message
 		if ($iCount > 0)
 		{
-			$oBrick->SetTitleHome($aData['messages'][0]->GetAsHTML('title'));
+			$oBrick->SetTitleHome($aData['messages'][0]->Get('title'));
 			$oBrick->SetDecorationClassHome($aData['messages'][0]->GetFontAwesomeIcon());
 		}
 
diff --git a/view/tile_v3.html.twig b/view/tile_v3.html.twig
index fcaea4f..7261056 100644
--- a/view/tile_v3.html.twig
+++ b/view/tile_v3.html.twig
@@ -28,9 +28,9 @@
     <div class="carousel-inner" role="listbox">
         {% for message in messages %}
             <div class="ipb-tile-communication--item item{% if loop.index0 == 0 %} active{% endif %}"
-                 data-item-title="{{ message.Get('title') }}"
-                 data-item-icon="{{ message.Get('icon') }}"
-                 data-item-icon-class="{{ message.GetFontAwesomeIcon() }}"
+                 data-item-title="{{ message.Get('title')|e('html_attr') }}"
+                 data-item-icon="{{ message.Get('icon')|e('html_attr') }}"
+                 data-item-icon-class="{{ message.GetFontAwesomeIcon()|e('html_attr') }}"
                  data-item-number="{{ loop.index0 + 1 }}"
             >
                 {{ message.GetAsHTML('message') | raw }}
@@ -66,7 +66,10 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <div class="modal-header-container">
-                        <h4 class="modal-title"></h4>
+                        <h4 class="modal-title">
+                            <div class="modal-title-decoration"><span class="modal-title-decoration-icon"></span></div>
+                            <span class="modal-title-text"></span>
+                        </h4>
                         <div class="modal-actions">
                             <button class="btn btn-default alternative ipb-button--prev">
                                 <span class="fas fa-chevron-left"></span>