fix(typeahead): Typeahead uses ngSanitize when present

Author: fernando-sendMail

Diff for: misc/demo/assets/app.js

@@ -1,5 +1,5 @@
 /* global FastClick, smoothScroll */
-angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'plunker', 'ngTouch', 'ngAnimate'], function($httpProvider){
+angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'plunker', 'ngTouch', 'ngAnimate', 'ngSanitize'], function($httpProvider){
   FastClick.attach(document.body);
   delete $httpProvider.defaults.headers.common['X-Requested-With'];
 }).run(['$location', function($location){

Diff for: misc/demo/index.html

@@ -14,6 +14,7 @@
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-animate.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-touch.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-sanitize.js"></script>
     <script src="ui-bootstrap-tpls-<%= pkg.version%>.min.js"></script>
     <script src="assets/plunker.js"></script>
     <script src="assets/app.js"></script>

Diff for: src/typeahead/test/typeahead-highlight-ngsanitize.spec.js

@@ -0,0 +1,17 @@
+describe('Security concerns', function() {
+  var highlightFilter, $sanitize, logSpy;
+
+  beforeEach(module('ui.bootstrap.typeahead', 'ngSanitize'));
+
+  beforeEach(inject(function (typeaheadHighlightFilter, _$sanitize_, $log) {
+    highlightFilter = typeaheadHighlightFilter;
+    $sanitize = _$sanitize_;
+    logSpy = spyOn($log, 'warn');
+  }));
+
+  it('should not call the $log service when ngSanitize is present', function() {
+    highlightFilter('before <script src="">match</script> after', 'match');
+    expect(logSpy).not.toHaveBeenCalled();
+  });
+
+});

Diff for: src/typeahead/test/typeahead-highlight.spec.js

@@ -1,39 +1,52 @@
 describe('typeaheadHighlight', function () {
 
-  var highlightFilter;
+  var highlightFilter, $log, $sce, logSpy;
 
   beforeEach(module('ui.bootstrap.typeahead'));
+  
+  beforeEach(inject(function(_$log_, _$sce_) {
+    $log = _$log_;
+    $sce = _$sce_;
+    logSpy = spyOn($log, 'warn');
+  }));
+
   beforeEach(inject(function (typeaheadHighlightFilter) {
     highlightFilter = typeaheadHighlightFilter;
   }));
 
   it('should higlight a match', function () {
-    expect(highlightFilter('before match after', 'match')).toEqual('before <strong>match</strong> after');
+    expect($sce.getTrustedHtml(highlightFilter('before match after', 'match'))).toEqual('before <strong>match</strong> after');
   });
 
   it('should higlight a match with mixed case', function () {
-    expect(highlightFilter('before MaTch after', 'match')).toEqual('before <strong>MaTch</strong> after');
+    expect($sce.getTrustedHtml(highlightFilter('before MaTch after', 'match'))).toEqual('before <strong>MaTch</strong> after');
   });
 
   it('should higlight all matches', function () {
-    expect(highlightFilter('before MaTch after match', 'match')).toEqual('before <strong>MaTch</strong> after <strong>match</strong>');
+    expect($sce.getTrustedHtml(highlightFilter('before MaTch after match', 'match'))).toEqual('before <strong>MaTch</strong> after <strong>match</strong>');
   });
 
   it('should do nothing if no match', function () {
-    expect(highlightFilter('before match after', 'nomatch')).toEqual('before match after');
+    expect($sce.getTrustedHtml(highlightFilter('before match after', 'nomatch'))).toEqual('before match after');
   });
 
   it('should do nothing if no or empty query', function () {
-    expect(highlightFilter('before match after', '')).toEqual('before match after');
-    expect(highlightFilter('before match after', null)).toEqual('before match after');
-    expect(highlightFilter('before match after', undefined)).toEqual('before match after');
+    expect($sce.getTrustedHtml(highlightFilter('before match after', ''))).toEqual('before match after');
+    expect($sce.getTrustedHtml(highlightFilter('before match after', null))).toEqual('before match after');
+    expect($sce.getTrustedHtml(highlightFilter('before match after', undefined))).toEqual('before match after');
   });
 
   it('issue 316 - should work correctly for regexp reserved words', function () {
-    expect(highlightFilter('before (match after', '(match')).toEqual('before <strong>(match</strong> after');
+    expect($sce.getTrustedHtml(highlightFilter('before (match after', '(match'))).toEqual('before <strong>(match</strong> after');
   });
 
   it('issue 1777 - should work correctly with numeric values', function () {
-    expect(highlightFilter(123, '2')).toEqual('1<strong>2</strong>3');
+    expect($sce.getTrustedHtml(highlightFilter(123, '2'))).toEqual('1<strong>2</strong>3');
   });
+
+  it('should show a warning when this component is being used unsafely', function() {
+    highlightFilter('<i>before</i> match after', 'match');
+    expect(logSpy).toHaveBeenCalled();
+  });
+
 });

Diff for: src/typeahead/typeahead.js

@@ -1,4 +1,4 @@
-angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap.bindHtml'])
+angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
 
 /**
  * A helper service that can parse typeahead's syntax (string provided by users)
@@ -492,13 +492,29 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
     };
   }])
 
-  .filter('typeaheadHighlight', function() {
+  .filter('typeaheadHighlight', ['$sce', '$injector', '$log', function($sce, $injector, $log) {
+
+    var isSanitizePresent;
+    isSanitizePresent = $injector.has('$sanitize');
 
     function escapeRegexp(queryToEscape) {
+      // Regex: capture the whole query string and replace it with the string that will be used to match 
+      // the results, for example if the capture is "a" the result will be \a
       return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
     }
 
+    function containsHtml(matchItem) {
+      return /<.*>/g.test(matchItem);
+    }
+
     return function(matchItem, query) {
-      return query ? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem;
+      if(!isSanitizePresent && containsHtml(matchItem)) {
+        $log.warn('Unsafe use of typeahead please use ngSanitize'); // Warn the user about the danger
+      }
+      matchItem = query? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem; // Replaces the capture string with a the same string inside of a "strong" tag
+      if(!isSanitizePresent) {
+        matchItem = $sce.trustAsHtml(matchItem); // If $sanitize is not present we pack the string in a $sce object for the ng-bind-html directive
+      }
+      return matchItem;
     };
-  });
+  }]);