diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index 8c81c5d6df3..3ceb961f58e 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -1,5 +1,6 @@
 <script>
   import { mapGetters, mapActions } from 'vuex';
+  import { escape } from 'underscore';
   import Flash from '../../flash';
   import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import noteHeader from './note_header.vue';
@@ -85,7 +86,7 @@
         };
         this.isRequesting = true;
         this.oldContent = this.note.note_html;
-        this.note.note_html = noteText;
+        this.note.note_html = escape(noteText);
 
         this.updateNote(data)
           .then(() => {
diff --git a/spec/javascripts/notes/components/issue_note_spec.js b/spec/javascripts/notes/components/issue_note_spec.js
index 73fd188dbe5..bd888b2cbae 100644
--- a/spec/javascripts/notes/components/issue_note_spec.js
+++ b/spec/javascripts/notes/components/issue_note_spec.js
@@ -41,4 +41,19 @@ describe('issue_note', () => {
   it('should render issue body', () => {
     expect(vm.$el.querySelector('.note-text').innerHTML).toEqual(note.note_html);
   });
+
+  it('prevents note preview xss', (done) => {
+    const imgSrc = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+    const noteBody = `<img src="${imgSrc}" onload="alert(1)" />`;
+    const alertSpy = spyOn(window, 'alert');
+    vm.updateNote = () => new Promise($.noop);
+
+    vm.formUpdateHandler(noteBody, null, $.noop);
+
+    setTimeout(() => {
+      expect(alertSpy).not.toHaveBeenCalled();
+      expect(vm.note.note_html).toEqual(_.escape(noteBody));
+      done();
+    }, 0);
+  });
 });