Fixes #887 Enclose embedded images in URLs

CHANGES.md

@@ -24,6 +24,7 @@
 - #754 Show unread messages next to roster contacts. [jcbrand]
 - #864 Remove all inline CSS to comply with strict Content-Security-Policy headers [mathiasertl]
 - #873 Inconsistent unread messages count updating [novokrest]
+- #887 Make embedded images clickabe [jcbrand]
 - #890 Message carbons not sent out after reconnection [jcbrand]
 - #894 Room affiliation lost when connection jid and room presence jid are of different case [Rayzen]
 

spec/chatbox.js

@@ -1247,7 +1247,9 @@
                     }, 500).then(function () {
                         expect(view.sendMessage).toHaveBeenCalled();
                         var msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
-                        expect(msg.html()).toEqual('<img src="'+message+'" class="chat-image">');
+                        expect(msg.html()).toEqual(
+                            '<a target="_blank" rel="noopener" href="http://localhost:8000/logo/conversejs.svg"><img src="' +
+                                message + '" class="chat-image"></a>');
                         message += "?param1=val1&param2=val2";
                         test_utils.sendMessage(view, message);
                         return test_utils.waitUntil(function () {
@@ -1256,7 +1258,10 @@
                     }).then(function () {
                         expect(view.sendMessage).toHaveBeenCalled();
                         var msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
-                        expect(msg.html()).toEqual('<img src="'+message.replace(/&/g, '&amp;')+'" class="chat-image">');
+                        expect(msg.html()).toEqual(
+                            '<a target="_blank" rel="noopener" href="http://localhost:8000/logo/conversejs.svg?param1=val1&amp;param2=val2"><img src="'+
+                                message.replace(/&/g, '&amp;') +
+                                '" class="chat-image"></a>')
                         done();
                     });
                 }));

src/utils.js

@@ -94,14 +94,15 @@
         return false;
     };
 
-    $.fn.throttledHTML = _.throttle($.fn.html, 500);
+    var throttledHTML = _.throttle(function (el, html) {
+        el.innerHTML = html;
+    }, 500);
 
     $.fn.addHyperlinks = function () {
         if (this.length > 0) {
             this.each(function (i, obj) {
                 var prot, escaped_url;
-                var $obj = $(obj);
-                var x = $obj.html();
+                var x = obj.innerHTML;
                 var list = x.match(/\b(https?:\/\/|www\.|https?:\/\/www\.)[^\s<]{2,200}\b/g );
                 if (list) {
                     for (i=0; i<list.length; i++) {
@@ -110,15 +111,11 @@
                         x = x.replace(list[i], '<a target="_blank" rel="noopener" href="' + prot + escaped_url + '">'+ list[i] + '</a>' );
                     }
                 }
-                $obj.html(x);
+                obj.innerHTML = x;
                 _.forEach(list, function (url) {
                     isImage(unescapeHTML(url)).then(function (img) {
-                        var prot = url.indexOf('http://') === 0 || url.indexOf('https://') === 0 ? '' : 'http://';
-                        var escaped_url = encodeURI(decodeURI(url)).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
-                        var new_url = '<a target="_blank" rel="noopener" href="' + prot + escaped_url + '">'+ url + '</a>';
                         img.className = 'chat-image';
-                        x = x.replace(new_url, img.outerHTML);
-                        $obj.throttledHTML(x);
+                        throttledHTML(obj.querySelector('a'), img.outerHTML);
                     });
                 });
             });