fix(autocomplete): Encode HTML chars in suggestion list

Suggestions containing HTML chars (<, > and &) aren't properly encoded and those suggestions don't play nice with $sce.trustAsHtml. Closes #34.
mbenford · Dec 15, 2013 · 6e4f7c7 · 6e4f7c7
1 parent 36a80da
commit 6e4f7c7
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 12 deletions.
diff --git a/build/ng-tags-input.js b/build/ng-tags-input.js
@@ -337,14 +337,20 @@ tagsInput.directive('autoComplete', ["$document","$timeout","$sce","tagsInputCon
  return self;
  }
 
+ function encodeHTML(value) {
+ return value.replace(/&/g, '&amp;')
+ .replace(/</g, '&lt;')
+ .replace(/>/g, '&gt;');
+ }
+
  return {
  restrict: 'E',
  require: '?^tagsInput',
  scope: { source: '&' },
  templateUrl: 'ngTagsInput/auto-complete.html',
  link: function(scope, element, attrs, tagsInputCtrl) {
  var hotkeys = [KEYS.enter, KEYS.tab, KEYS.escape, KEYS.up, KEYS.down],
- suggestionList, tagsInput, highlight;
+ suggestionList, tagsInput, markdown;
 
  tagsInputConfig.load(scope, attrs, {
  debounceDelay: { type: Number, defaultValue: 100 },
@@ -357,13 +363,13 @@ tagsInput.directive('autoComplete', ["$document","$timeout","$sce","tagsInputCon
  suggestionList = new SuggestionList(scope.source, scope.options);
 
  if (scope.options.highlightMatchedText) {
- highlight = function(item, text) {
+ markdown = function(item, text) {
  var expression = new RegExp(text, 'gi');
- return item.replace(expression, '<em>$&</em>');
+ return item.replace(expression, '**$&**');
  };
  }
  else {
- highlight = function(item) {
+ markdown = function(item) {
  return item;
  };
  }
@@ -384,7 +390,10 @@ tagsInput.directive('autoComplete', ["$document","$timeout","$sce","tagsInputCon
  };
 
  scope.highlight = function(item) {
- return $sce.trustAsHtml(highlight(item, suggestionList.query));
+ item = markdown(item, suggestionList.query);
+ item = encodeHTML(item);
+ item = item.replace(/\*\*(.+?)\*\*/g, '<em>$1</em>');
+ return $sce.trustAsHtml(item);
  };
 
  tagsInput

diff --git a/build/ng-tags-input.min.zip b/build/ng-tags-input.min.zip
diff --git a/build/ng-tags-input.zip b/build/ng-tags-input.zip
diff --git a/src/auto-complete.js b/src/auto-complete.js
@@ -89,14 +89,20 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
  return self;
  }
 
+ function encodeHTML(value) {
+ return value.replace(/&/g, '&amp;')
+ .replace(/</g, '&lt;')
+ .replace(/>/g, '&gt;');
+ }
+
  return {
  restrict: 'E',
  require: '?^tagsInput',
  scope: { source: '&' },
  templateUrl: 'ngTagsInput/auto-complete.html',
  link: function(scope, element, attrs, tagsInputCtrl) {
  var hotkeys = [KEYS.enter, KEYS.tab, KEYS.escape, KEYS.up, KEYS.down],
- suggestionList, tagsInput, highlight;
+ suggestionList, tagsInput, markdown;
 
  tagsInputConfig.load(scope, attrs, {
  debounceDelay: { type: Number, defaultValue: 100 },
@@ -109,13 +115,13 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
  suggestionList = new SuggestionList(scope.source, scope.options);
 
  if (scope.options.highlightMatchedText) {
- highlight = function(item, text) {
+ markdown = function(item, text) {
  var expression = new RegExp(text, 'gi');
- return item.replace(expression, '<em>$&</em>');
+ return item.replace(expression, '**$&**');
  };
  }
  else {
- highlight = function(item) {
+ markdown = function(item) {
  return item;
  };
  }
@@ -136,7 +142,10 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
  };
 
  scope.highlight = function(item) {
- return $sce.trustAsHtml(highlight(item, suggestionList.query));
+ item = markdown(item, suggestionList.query);
+ item = encodeHTML(item);
+ item = item.replace(/\*\*(.+?)\*\*/g, '<em>$1</em>');
+ return $sce.trustAsHtml(item);
  };
 
  tagsInput

diff --git a/test/auto-complete.spec.js b/test/auto-complete.spec.js
@@ -683,6 +683,30 @@ describe('autocomplete-directive', function() {
  expect(getSuggestionText(3)).toBe('aba');
  expect(getSuggestionText(4)).toBe('bab');
  });
+
+ it('encodes HTML characters in suggestions list', function() {
+ // Act
+ loadSuggestions(['<Item 1>', 'Item <2>', 'Item &3']);
+
+ // Assert
+ expect(getSuggestionText(0)).toBe('&lt;Item 1&gt;');
+ expect(getSuggestionText(1)).toBe('Item &lt;2&gt;');
+ expect(getSuggestionText(2)).toBe('Item &amp;3');
+ });
+
+ it('highlights encoded HTML characters in suggestions list', function() {
+ // Arrange
+ compile('highlight-matched-text="true"', 'min-length="1"');
+
+ // Act
+ loadSuggestions(['<Item 1>', 'Item <2>', 'Item &3'], '>');
+
+ // Assert
+ expect(getSuggestionText(0)).toBe('&lt;Item 1<em>&gt;</em>');
+ expect(getSuggestionText(1)).toBe('Item &lt;2<em>&gt;</em>');
+ expect(getSuggestionText(2)).toBe('Item &amp;3');
+ });
+
  });
 
  describe('max-results-to-show option', function() {

diff --git a/test/test-page.html b/test/test-page.html
@@ -10,7 +10,8 @@
  <tags-input ng-model="tags"
  placeholder="{{ placeholder.value }}"
  replace-spaces-with-dashes="false"
- add-on-blur="true">
+ add-on-blur="true"
+ allowed-tags-pattern="^[a-zA-Z0-9\s<>@\.]+$">
  <auto-complete source="loadItems($query)"
  debounce-delay="0"
  min-length="1"
@@ -29,7 +30,7 @@
  $scope.loadItems = function(query) {
  console.log(query);
  var deferred = $q.defer();
- deferred.resolve(['Batman', 'Superman', 'Flash', 'Iron Man', 'Hulk', 'Wolverine', "Green Lantern", "Green Arrow", "Spiderman"]);
+ deferred.resolve(['Batman <bruce@wayne.com>', 'Superman', 'Flash', 'Iron Man', 'Hulk', 'Wolverine', "Green Lantern", "Green Arrow", "Spiderman"]);
  return deferred.promise;
  };
  });