MDL-56252 message: clean message text in message area

Remove the HTML tags from any message in the message area when updating
the last message on the contact otherwise the styling breaks and also
allows <script> tags to be added to the page.

message/amd/src/message_area_contacts.js

@@ -546,6 +546,9 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
          * @return {String} The altered text
          */
         Contacts.prototype._getContactText = function(text) {
+            // Remove the HTML tags to render the contact text.
+            text = $(document.createElement('div')).html(text).text();
+
             if (text.length > this._messageLength) {
                 text = text.substr(0, this._messageLength - 3);
                 text += '...';

message/classes/helper.php

@@ -147,7 +147,8 @@ class helper {
         $data->messageid = null;
         if (isset($contact->smallmessage)) {
             $data->ismessaging = true;
-            $data->lastmessage = $contact->smallmessage;
+            // Strip the HTML tags from the message for displaying in the contact area.
+            $data->lastmessage = clean_param($contact->smallmessage, PARAM_NOTAGS);
             $data->useridfrom = $contact->useridfrom;
             if (isset($contact->messageid)) {
                 $data->messageid = $contact->messageid;

theme/boost/scss/moodle/message.scss

@@ -473,6 +473,8 @@
                         position: relative;
 
                         .text {
+                            display: block;
+
                             p {
                                 margin: 0;
                             }

theme/bootstrapbase/less/moodle/message.less

@@ -465,6 +465,8 @@
                         position: relative;
 
                         .text {
+                            display: block;
+
                             p {
                                 margin: 0;
                             }

theme/bootstrapbase/style/moodle.css

@@ -6190,6 +6190,9 @@ a.ygtvspacer:hover {
   border-radius: 4px;
   position: relative;
 }
+.messaging-area-container .messaging-area .messages-area .messages .message .content .text {
+  display: block;
+}
 .messaging-area-container .messaging-area .messages-area .messages .message .content .text p {
   margin: 0;
 }