fix(autocomplete): resolves xss bug with autocomplete text highlighter

Closes #2901
angular · May 20, 2015 · 1538ebe · 1538ebe
1 parent 7425997
commit 1538ebe
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/src/components/autocomplete/autocomplete.spec.js b/src/components/autocomplete/autocomplete.spec.js
@@ -11,9 +11,9 @@ describe('<md-autocomplete>', function() {
     return container;
   }
 
-  function createScope () {
+  function createScope (items) {
     var scope;
-    var items = ['foo', 'bar', 'baz'].map(function (item) { return { display: item }; });
+    items = items || ['foo', 'bar', 'baz'].map(function (item) { return { display: item }; });
     inject(function ($rootScope) {
       scope = $rootScope.$new();
       scope.match = function (term) {
@@ -28,7 +28,7 @@ describe('<md-autocomplete>', function() {
   }
 
   describe('basic functionality', function () {
-    it('should fail', inject(function($timeout, $mdConstant, $rootElement) {
+    it('should support basic functionality', inject(function($timeout, $mdConstant, $rootElement) {
       var scope = createScope();
       var template = '\
           <md-autocomplete\
@@ -63,6 +63,41 @@ describe('<md-autocomplete>', function() {
     }));
   });
 
+  describe('xss prevention', function () {
+    it('should not allow html to slip through', inject(function($timeout, $mdConstant, $rootElement) {
+      var html = 'foo <img src="img" onerror="alert(1)" />';
+      var scope = createScope([ { display: html } ]);
+      var template = '\
+          <md-autocomplete\
+              md-selected-item="selectedItem"\
+              md-search-text="searchText"\
+              md-items="item in match(searchText)"\
+              md-item-text="item.display"\
+              md-min-length="0"\
+              placeholder="placeholder">\
+            <span md-highlight-text="searchText">{{item.display}}</span>\
+          </md-autocomplete>';
+      var element = compile(template, scope);
+      var ctrl    = element.controller('mdAutocomplete');
+      var ul      = element.find('ul');
+
+      expect(scope.searchText).toBe('');
+      expect(scope.selectedItem).toBe(null);
+
+      element.scope().searchText = 'fo';
+      ctrl.keydown({});
+      element.scope().$apply();
+      $timeout.flush();
+
+      expect(scope.searchText).toBe('fo');
+      expect(scope.match(scope.searchText).length).toBe(1);
+      expect(ul.find('li').length).toBe(1);
+      expect(ul.find('li').find('img').length).toBe(0);
+
+      scope.$apply();
+    }));
+  });
+
   describe('API access', function() {
     it('should clear the selected item', inject(function($timeout, $mdConstant) {
       var scope = createScope();

diff --git a/src/components/autocomplete/js/highlightController.js b/src/components/autocomplete/js/highlightController.js
@@ -4,7 +4,8 @@ angular
 
 function MdHighlightCtrl ($scope, $element, $interpolate) {
   var term = $element.attr('md-highlight-text'),
-      text = $interpolate($element.html())($scope),
+      unsafeText = $interpolate($element.html())($scope),
+      text = angular.element('<div>').text(unsafeText).html(),
       flags = $element.attr('md-highlight-flags') || '',
       watcher = $scope.$watch(term, function (term) {
         var regex = getRegExp(term, flags),