Merge pull request #1524 from algolia/bugfix/MAGE-932

BUG: Client side encoding for front end XSS protection on InstantSearch search box

Author: cammonro

view/frontend/web/instantsearch.js

@@ -352,11 +352,14 @@ define(
                                     container:   instant_selector,
                                     placeholder: algoliaConfig.translations.searchFor,
                                     showSubmit:  false,
-                                    queryHook:   function (inputValue, search) {
-                                            if (algoliaConfig.isSearchPage && algoliaConfig.request.categoryId.length <= 0 && algoliaConfig.request.landingPageId.length <= 0) {
-                                                $(".page-title-wrapper span.base").html(algoliaConfig.translations.searchTitle + ": '" + algolia.htmlspecialcharsDecode(inputValue) + "'");
+                                    queryHook:   (inputValue, search) => {
+                                        const encodedHtml = algolia.htmlspecialcharsEncode(inputValue);
+                                        if (algoliaConfig.isSearchPage 
+                                            && !algoliaConfig.request.categoryId 
+                                            && !algoliaConfig.request.landingPageId.length) {
+                                                $(".page-title-wrapper span.base").html(algoliaConfig.translations.searchTitle + ": '" + encodedHtml + "'");
                                             }
-                                            return search(inputValue);
+                                        return search(inputValue);
                                     }
                             }
                     }

view/frontend/web/internals/common.js

@@ -1,6 +1,20 @@
 define(['jquery', 'algoliaBundle'], function ($, algoliaBundle) {
+    // Character maps supplied for more performant Regex ops
+    const SPECIAL_CHAR_ENCODE_MAP = {
+        '&': '&',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+    };
+
+    /// Reverse key / value pair
+    const SPECIAL_CHAR_DECODE_MAP = Object.entries(SPECIAL_CHAR_ENCODE_MAP).reduce((acc, [key, value]) => {
+        acc[value] = key;
+        return acc;
+    }, {});
 
-    window.algolia = {
+    window.algolia = {  
         deprecatedHooks: [
             'beforeAutocompleteProductSourceOptions',
             'beforeAutocompleteSources'
@@ -64,23 +78,14 @@ define(['jquery', 'algoliaBundle'], function ($, algoliaBundle) {
 
             return data;
         },
-        htmlspecialcharsDecode: function(string) {
-            var unescapedString = string,
-                specialchars = [
-                    [ '"', '&quot;' ],
-                    [ '>', '&gt;' ],
-                    [ '<', '&lt;' ],
-                    [ '&', '&amp;' ],
-                    [ "'", '&#39;' ]
-                ];
-
-            var len = specialchars.length;
-            for (var i=0; i<len; i++) {
-                unescapedString = unescapedString.replace(new RegExp(specialchars[i][1], 'g'), specialchars[i][0]);
-            }
-
-            return unescapedString;
-        }
+        htmlspecialcharsDecode: string => {
+            const regex = new RegExp(Object.keys(SPECIAL_CHAR_DECODE_MAP).join('|'), 'g');
+            return string.replace(regex, m => SPECIAL_CHAR_DECODE_MAP[m]);
+        },
+        htmlspecialcharsEncode: string => {
+            const regex = new RegExp(`[${Object.keys(SPECIAL_CHAR_ENCODE_MAP).join('')}]`, 'g');
+            return string.replace(regex, (m) => SPECIAL_CHAR_ENCODE_MAP[m]);
+        } 
     };
 
     window.isMobile = function () {