From dc1b09f59db47cc044b4565eb6468702478146a2 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Fri, 6 Mar 2015 17:01:04 -0800
Subject: [PATCH] Auto-link urls in message bodies

And watch out for xss.

Closes #187
---
 js/views/message_view.js        |  7 ++++++-
 test/index.html                 | 15 ++++++---------
 test/views/message_view_test.js | 20 ++++++++++++++++++++
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/js/views/message_view.js b/js/views/message_view.js
index ddae6183f..9e4d98144 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -31,7 +31,6 @@
         }
     });
 
-
     var ContentMessageView = Whisper.View.extend({
         tagName: 'div',
         template: $('#message').html(),
@@ -45,6 +44,9 @@
         renderDelivered: function() {
             if (this.model.get('delivered')) { this.$el.addClass('delivered'); }
         },
+        autoLink: function(text) {
+            return text.replace(/(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi, "$1<a href='$2' target='_blank'>$2</a>");
+        },
         render: function() {
             this.$el.html(
                 Mustache.render(this.template, {
@@ -54,6 +56,9 @@
                 })
             );
 
+            var content = this.$el.find('.content');
+            content.html(this.autoLink(content.html()));
+
             this.renderDelivered();
 
             this.$el.find('.attachments').append(
diff --git a/test/index.html b/test/index.html
index a0da11954..e3acb6029 100644
--- a/test/index.html
+++ b/test/index.html
@@ -47,16 +47,13 @@
   <script type='text/x-tmpl-mustache' id='message'>
       <div class='sender'>{{ sender }}</div>
       <img class='avatar' src='{{ contact_avatar }}'>
-      <div class='bubble bubble_context {{ bubble_class }}'>
-        <ul class='volley'>
-            <li class='message'>
-            {{ message }}
+      <div class="bubble">
+          <p class="content">{{ message }}</p>
+          <div class='attachments'></div>
+          <div class='meta'>
             <span class='timestamp'>{{ timestamp }}</span>
-            </li>
-        </ul>
-        {{#attachments}}
-          <img src={{.}}>
-        {{/attachments}}
+            <span class='checkmark hide'>✓</span>
+          </div>
       </div>
   </script>
   <script type='text/x-tmpl-mustache' id='contact'>
diff --git a/test/views/message_view_test.js b/test/views/message_view_test.js
index f099016b3..7b9f8a0f2 100644
--- a/test/views/message_view_test.js
+++ b/test/views/message_view_test.js
@@ -44,4 +44,24 @@ describe('MessageView', function() {
     message.destroy();
     assert.strictEqual(div.find(view.$el).length, 0);
   });
+
+  it('allows links', function() {
+    var url = 'http://example.com';
+    message.set('body', url);
+    var view = new Whisper.MessageView({model: message});
+    view.render();
+    var link = view.$el.find('.content a');
+    assert.strictEqual(link.length, 1);
+    assert.strictEqual(link.text(), url);
+    assert.strictEqual(link.attr('href'), url);
+  });
+
+  it('disallows xss', function() {
+    var xss = '<script>alert("pwnd")</script>';
+    message.set('body', xss);
+    var view = new Whisper.MessageView({model: message});
+    view.render();
+    assert.include(view.$el.text(), xss); // should appear as escaped text
+    assert.strictEqual(view.$el.find('script').length, 0); // should not appear as html
+  });
 });