Fix: Escape suggestions before including them in HTML (react-bootstra…

…p#414)

* fixes react-bootstrap#223 

* Move escaping logic to utils.js and add test

* Use lodash for escape and style fixes

* Clean up unit tests

__tests__/suggestions.test.js

@@ -78,6 +78,19 @@ describe('Suggestions', function() {
     expect($el.find('li').length).to.equal(0);
   });
 
+  test('should escape html characters in query', function() {
+    const suggestions = [{ id: 'script', text: '<script>alert()</script>' }];
+    const $el = shallow(
+      mockItem({
+        query: '<script>alert()</script>',
+        suggestions,
+      })
+    );
+    expect($el.html()).to.equal(
+      '<div class="foo"><ul> <li class=""><span><mark>&lt;script&gt;alert()&lt;/script&gt;</mark></span></li> </ul></div>'
+    );
+  });
+
   test('should mark highlighted suggestions correctly', function() {
     const $el = shallow(mockItem());
     expect(
@@ -98,12 +111,12 @@ describe('Suggestions', function() {
       mockItem({
         minQueryLength: 2,
         query: 'q',
-        suggestions: suggestions,
+        suggestions,
       })
     );
 
     spy(Suggestions.prototype, 'componentDidUpdate');
-    $el.setProps({ suggestions: suggestions });
+    $el.setProps({ suggestions });
     expect(Suggestions.prototype.componentDidUpdate.called).to.equal(false);
     Suggestions.prototype.componentDidUpdate.restore();
   });
@@ -118,11 +131,11 @@ describe('Suggestions', function() {
       mockItem({
         minQueryLength: 2,
         query: 'qu',
-        suggestions: suggestions,
+        suggestions,
       })
     );
     spy(Suggestions.prototype, 'componentDidUpdate');
-    $el.setProps({ suggestions: suggestions });
+    $el.setProps({ suggestions });
     expect(Suggestions.prototype.componentDidUpdate.called).to.equal(true);
     Suggestions.prototype.componentDidUpdate.restore();
   });
@@ -137,11 +150,11 @@ describe('Suggestions', function() {
       mockItem({
         minQueryLength: 0,
         query: '',
-        suggestions: suggestions,
+        suggestions,
       })
     );
     spy(Suggestions.prototype, 'componentDidUpdate');
-    $el.setProps({ suggestions: suggestions });
+    $el.setProps({ suggestions });
     expect(Suggestions.prototype.componentDidUpdate.called).to.equal(true);
     Suggestions.prototype.componentDidUpdate.restore();
   });
@@ -157,11 +170,11 @@ describe('Suggestions', function() {
         shouldRenderSuggestions: function() {
           return true;
         },
-        suggestions: suggestions,
+        suggestions,
       })
     );
     spy(Suggestions.prototype, 'componentDidUpdate');
-    $el.setProps({ suggestions: suggestions });
+    $el.setProps({ suggestions });
     expect(Suggestions.prototype.componentDidUpdate.called).to.equal(true);
     Suggestions.prototype.componentDidUpdate.restore();
   });
@@ -176,7 +189,7 @@ describe('Suggestions', function() {
     let component = mockItem({
       minQueryLength: 2,
       query: '',
-      suggestions: suggestions,
+      suggestions,
     });
     var $el = ReactDOM.render(component, div);
     spy($el, 'componentDidUpdate');
@@ -186,7 +199,7 @@ describe('Suggestions', function() {
       mockItem({
         minQueryLength: 2,
         query: 'qu',
-        suggestions: suggestions,
+        suggestions,
       }),
       div
     );

src/components/Suggestions.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
+import escape from 'lodash/escape';
 
 const maybeScrollSuggestionIntoView = (suggestionEl, suggestionsContainer) => {
   const containerHeight = suggestionsContainer.offsetHeight;
@@ -72,7 +73,9 @@ class Suggestions extends Component {
     const { [this.props.labelField]: labelValue } = input;
 
     return {
-      __html: labelValue.replace(RegExp(escapedRegex, 'gi'), '<mark>$&</mark>'),
+      __html: labelValue.replace(RegExp(escapedRegex, 'gi'), (x) => {
+        return `<mark>${escape(x)}</mark>`;
+      }),
     };
   };