feat(search-store): override highlight tags and expose them

packages/instantsearch-store/src/__tests__/index.js

@@ -2,6 +2,8 @@ import {
   FACET_AND,
   FACET_OR,
   FACET_TREE,
+  HIGHLIGHT_PRE_TAG,
+  HIGHLIGHT_POST_TAG,
   assertValidFacetType,
   createFromAlgoliaCredentials,
   createFromAlgoliaClient,
@@ -23,6 +25,14 @@ test('FACET_TREE should be "tree"', () => {
   expect(FACET_TREE).toBe('tree');
 });
 
+test('HIGHLIGHT_PRE_TAG should be "__ais-highlight__"', () => {
+  expect(HIGHLIGHT_PRE_TAG).toBe('__ais-highlight__');
+});
+
+test('HIGHLIGHT_POST_TAG should be "__/ais-highlight__"', () => {
+  expect(HIGHLIGHT_POST_TAG).toBe('__/ais-highlight__');
+});
+
 test('can assert that a facet type is valid', () => {
   expect( () => { assertValidFacetType(FACET_AND) } ).not.toThrow()
   expect( () => { assertValidFacetType(FACET_OR) } ).not.toThrow()
@@ -54,6 +64,15 @@ describe('Store', () => {
     expect(store.algoliaHelper).toBe(helper);
   })
 
+  test('should always use custom highlighting tags', () => {
+    const client = algoliaClient('app_id', 'api_key');
+    const helper = algoliaHelper(client);
+    const store = new Store(helper);
+
+    expect(store.highlightPreTag).toEqual(HIGHLIGHT_PRE_TAG);
+    expect(store.highlightPostTag).toEqual(HIGHLIGHT_POST_TAG);
+  })
+
   test('can retrieve index name', () => {
     const client = algoliaClient('app_id', 'api_key');
     const helper = algoliaHelper(client, 'my_index');

packages/instantsearch-store/src/index.js

@@ -5,6 +5,9 @@ export const FACET_AND = 'and'
 export const FACET_OR = 'or'
 export const FACET_TREE = 'tree'
 
+export const HIGHLIGHT_PRE_TAG = '__ais-highlight__'
+export const HIGHLIGHT_POST_TAG = '__/ais-highlight__'
+
 export const assertValidFacetType = function (type) {
   if (type === FACET_AND) return
   if (type === FACET_OR) return
@@ -49,12 +52,29 @@ export class Store {
     }
 
     this._helper = algoliaHelper
+
+    // Here we enforce custom highlight tags for handling XSS protection.
+    // We also make sure that we keep the current page as this operation resets it.
+    const page = this._helper.getPage()
+    this._helper.setQueryParameter('highlightPreTag', HIGHLIGHT_PRE_TAG)
+    this._helper.setQueryParameter('highlightPostTag', HIGHLIGHT_POST_TAG)
+    this._helper.setPage(page)
+
+
     this._helper.on('change', onHelperChange.bind(this))
 
     // Todo: fetch the version somehow.
     this._helper.getClient().addAlgoliaAgent('Store (x.x.x)')
   }
 
+  get highlightPreTag() {
+    return this._helper.getQueryParameter('highlightPreTag')
+  }
+
+  get highlightPostTag() {
+    return this._helper.getQueryParameter('highlightPostTag')
+  }
+
   get algoliaHelper() {
     return this._helper;
   }