fix(typeahead): Changes to typeaheadHighlight

Author: fernando-sendMail

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){

src/typeahead/test/typeahead-highlight-ngsanitize.spec.js

@@ -1,19 +1,19 @@
 describe('Security concerns', function() {
-  var highlightFilter, $sanitize;
+  var highlightFilter, 
+  $sanitize,
+  logSpy;
 
   beforeEach(module('ui.bootstrap.typeahead', 'ngSanitize'));
 
-  beforeEach(inject(function (typeaheadHighlightFilter, _$sanitize_) {
+  beforeEach(inject(function (typeaheadHighlightFilter, _$sanitize_, $log) {
     highlightFilter = typeaheadHighlightFilter;
     $sanitize = _$sanitize_;
+    logSpy = spyOn($log, 'warn');
   }));
 
-  it('should escape the "script" tag when present', function() {
-    expect(highlightFilter('before <script src=""></script>match after', 'match')).toEqual('before <strong>match</strong> after');
-  });
-
-  it('should escape attributes that execute javascript from html elements', function() {
-    expect(highlightFilter('before <div onclick="this.textContent = \'Some content\';"></div>match after', 'match')).toEqual('before <div></div><strong>match</strong> after');
+  it('should not call the $log service when ngSanitize is present', function() {
+    highlightFilter('before <script src="">match</script> after', 'match');
+    expect(logSpy).not.toHaveBeenCalled();
   });
 
 });

src/typeahead/test/typeahead-highlight.spec.js

@@ -45,6 +45,7 @@ describe('typeaheadHighlight', function () {
   });
 
   it('should show a warning when this component is being used unsafely', function() {
+    highlightFilter('<i>before</i> match after', 'match');
     expect(logSpy).toHaveBeenCalled();
   });
 

src/typeahead/typeahead.js

@@ -411,7 +411,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
       $sanitize = $injector.get('$sanitize'); //tries to inject the sanitize service
     }
     catch(e) {
-      $log.warn('Unsafe use of typeahead please use ngSanitize'); // Warn the user about the danger
+      // Catches the exception when the $sanitize service is not available.
     }
 
     function escapeRegexp(queryToEscape) {
@@ -420,11 +420,16 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
       return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
     }
 
+    function containsHtml(matchItem) {
+      return /<.*>/g.test(matchItem);
+    }
+
     return function(matchItem, query) {
+      if(!$sanitize && 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($sanitize) { // Is the $sanitize service available?
-        matchItem = $sanitize(matchItem); // If it's present the string gets sanitized and packed in a $sce object.
-      } else {
+      if(!$sanitize) {
         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;