Security: sanitize message content at render time via DOMPurify

Refs GHSA-jvrf-c7q2-qghg

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: AngelFQC

assets/vue/components/usergroup/MessageItem.vue

@@ -17,7 +17,7 @@
       </div>
       <div
         class="message-content"
-        v-html="message.content"
+        v-html="sanitizeHtml(message.content)"
       ></div>
       <div
         v-if="message.attachment && message.attachment.length"
@@ -84,6 +84,7 @@
 import BaseButton from "../basecomponents/BaseButton.vue"
 import { useFormatDate } from "../../composables/formatDate"
 import { useI18n } from "vue-i18n"
+import { sanitizeHtml } from "../../utils/sanitizeHtml"
 
 const { t } = useI18n()
 

assets/vue/views/message/MessageShow.vue

@@ -115,7 +115,7 @@
 
     <div
       class="tiny-content"
-      v-html="item.content"
+      v-html="sanitizeHtml(item.content)"
     />
 
     <template v-if="item.attachments && item.attachments.length > 0">
@@ -174,6 +174,7 @@ import BaseAppLink from "../../components/basecomponents/BaseAppLink.vue"
 import { useNotification } from "../../composables/notification"
 import { useMessageReceiverFormatter } from "../../composables/message/messageFormatter"
 import { MESSAGE_TYPE_INBOX } from "../../constants/entity/message"
+import { sanitizeHtml } from "../../utils/sanitizeHtml"
 
 const { requireConfirmation } = useConfirmation()
 const { t } = useI18n()

public/main/template/default/message/view_message.html.twig

@@ -1,56 +1 @@
-{% extends '@ChamiloCore/Layout/layout_one_col.html.twig' %}
-{% block content %}
-    <div id="message_{{ message.id }}" data-status="{{ message.status }}" class="mail-email">
-        <div class="email-head">
-            <div class="email-head-subject">
-                <div class="title">
-                    <a class="active" href="#">
-                        <span class="icon">
-                            <i class="fas fa-star"></i>
-                        </span>
-                    </a>
-                    <span>
-                        {{ message.title }}
-                    </span>
-                    <div class="icons">
-                        <div class="btn-group" role="group">
-                            <a href="{{ message.url.back }}" class="btn btn--secondary-outline icon"><i class="fas fa-arrow-circle-left"></i> {{ 'Back'|trans }}</a>
-                            <a href="#" onclick="window.print();" class="btn btn--secondary-outline icon"><i class="fas fa-print"></i> {{ 'Print'|trans }}</a>
-                            <a href="{{ message.url.new_message }}" class="btn btn--secondary-outline icon"><i class="fas fa-reply"></i> {{ 'Reply'|trans }}</a>
-                            <a href="{{ message.url.delete }}" class="btn btn--secondary-outline icon"><i class="fas fa-trash"></i> {{ 'Delete'|trans }}</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="email-head-sender">
-                <div class="date">{{ message.date }}</div>
-                <div class="avatar">
-                    <img src="{{ message.form_user.avatar }}" alt="Avatar" class="rounded-circle user-avatar-md">
-                </div>
-                <div class="sender">
-                    <a href="{{ url('index') }}main/social/profile.php?u={{ message.form_user.id }}">{{ message.form_user.name }}</a>
-                    <div class="email">{{ message.form_user.email }}</div>
-                </div>
-            </div>
-        </div>
-        <div class="email-body">
-            {{ message.content|raw }}
-        </div>
-
-        {% if message.attachments.quantity > 0 %}
-            <div class="email-attachments">
-                <div class="title">{{ 'Attachments'|trans }} <span>({{ message.attachments.quantity }} {{ 'Files'|trans }}, {{ message.attachments.total_size }})</span></div>
-                <ul>
-                    {% for item in message.attachments.files %}
-                    <li>
-                        <a href="{{ item.url }}">
-                            <i class="fas fa-paperclip"></i> {{ item.filename }}
-                            <span>({{ item.size }})</span>
-                        </a>
-                    </li>
-                    {% endfor %}
-                </ul>
-            </div>
-        {% endif %}
-    </div>
-{% endblock %}
+{# Intentionally left blank because this file is not used #}