ENGCOM-7981: #1684: Login failed error contains HTML tags #29398

Author: slavvka

app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/grid/messages.js

@@ -4,15 +4,17 @@
  */
 
 define([
-    'uiElement'
-], function (Element) {
+    'uiElement',
+    'escaper'
+], function (Element, escaper) {
     'use strict';
 
     return Element.extend({
         defaults: {
             template: 'Magento_MediaGalleryUi/grid/messages',
             messageDelay: 5,
-            messages: []
+            messages: [],
+            allowedTags: ['div', 'span', 'b', 'strong', 'i', 'em', 'u', 'a']
         },
 
         /**
@@ -72,6 +74,16 @@ define([
                 clearTimeout(timerId);
                 this.clear();
             }.bind(this), Number(delay) * 1000);
+        },
+
+        /**
+         * Prepare the given message to be rendered as HTML
+         *
+         * @param {String} message
+         * @return {String}
+         */
+        prepareMessageUnsanitizedHtml: function (message) {
+            return escaper.escapeHtml(message, this.allowedTags);
         }
     });
 });

app/code/Magento/MediaGalleryUi/view/adminhtml/web/template/grid/messages.html

@@ -8,7 +8,7 @@
     <div class="messages" outereach="messages">
         <div attr="class: 'message message-'+code">
             <div data-ui-id="messages-message-error">
-                <span text="message"></span>
+                <span html="$parent.prepareMessageUnsanitizedHtml(message)"></span>
             </div>
         </div>
     </div>

dev/tests/js/jasmine/tests/app/code/Magento/MediaGalleryUi/adminhtml/js/grid/messages.test.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'Magento_MediaGalleryUi/js/grid/messages',
+    'escaper'
+], function (Messages, Escaper) {
+    'use strict';
+
+    describe('Magento_MediaGalleryUi/js/grid/messages', function () {
+        var messagesInstance,
+            escaperInstance,
+            messageText,
+            errorType,
+            successType;
+
+        beforeEach(function () {
+            escaperInstance = Escaper;
+            messagesInstance = Messages({
+                escaper: escaperInstance
+            });
+            messageText = 'test message';
+            errorType = 'error';
+            successType = 'success';
+        });
+
+        it('add error message, get error message', function () {
+            messagesInstance.add(errorType, messageText);
+            expect(JSON.stringify(messagesInstance.get())).toEqual(JSON.stringify([{
+                code: errorType,
+                message: messageText
+            }]));
+        });
+
+        it('add success message, get success message', function () {
+            messagesInstance.add(successType, messageText);
+            expect(JSON.stringify(messagesInstance.get())).toEqual(JSON.stringify([{
+                code: successType,
+                message: messageText
+            }]));
+        });
+
+        it('handles multiple messages', function () {
+            messagesInstance.add(successType, messageText);
+            messagesInstance.add(errorType, messageText);
+            expect(JSON.stringify(messagesInstance.get())).toEqual(JSON.stringify([
+                {
+                    code: successType,
+                    message: messageText
+                },
+                {
+                    code: errorType,
+                    message: messageText
+                }
+            ]));
+        });
+
+        it('cleans messages', function () {
+            messagesInstance.add(errorType, messageText);
+            messagesInstance.clear();
+
+            expect(JSON.stringify(messagesInstance.get())).toEqual(JSON.stringify([]));
+        });
+
+        it('prepare message to be rendered as HTML', function () {
+            var escapedMessage = 'escaped message';
+
+            // eslint-disable-next-line max-nested-callbacks
+            spyOn(escaperInstance, 'escapeHtml').and.callFake(function () {
+                return escapedMessage;
+            });
+
+            expect(messagesInstance.prepareMessageUnsanitizedHtml(messageText)).toEqual(escapedMessage);
+        });
+    });
+});