fix(refinementList): prevent XSS via routing (#4344)

algolia · Mar 5, 2020 · 8552221 · 8552221
1 parent 933d9ff
commit 8552221
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 2 deletions.
diff --git a/src/components/RefinementList/RefinementList.js b/src/components/RefinementList/RefinementList.js
@@ -51,6 +51,7 @@ class RefinementList extends Component {
       url,
       attribute: this.props.attribute,
       cssClasses: this.props.cssClasses,
+      isFromSearch: this.props.isFromSearch,
     };
 
     let { value: key } = facetValue;

diff --git a/src/components/RefinementList/__tests__/RefinementList-test.js b/src/components/RefinementList/__tests__/RefinementList-test.js
@@ -3,6 +3,7 @@
 import { h } from 'preact';
 import { render, fireEvent } from '@testing-library/preact';
 import RefinementList from '../RefinementList';
+import defaultTemplates from '../../../widgets/refinement-list/defaultTemplates';
 
 const templates = {
   item({ value, count, isRefined }) {
@@ -119,6 +120,77 @@ describe('RefinementList', () => {
       expect(firstItem).not.toHaveAttribute('checked');
       expect(secondItem).toHaveAttribute('checked');
     });
+
+    it('should escape the items in the default template to prevent XSS', () => {
+      const props = {
+        ...defaultProps,
+        facetValues: [
+          {
+            highlighted: 'Samsung"><iframe/onload=alert("xss")>',
+            value: 'Samsung"><iframe/onload=alert("xss")>',
+            label: 'Samsung"><iframe/onload=alert("xss")>',
+            count: 0,
+            isRefined: true,
+          },
+          {
+            highlighted: 'Apple',
+            value: 'Apple',
+            label: 'Apple',
+            count: 10,
+            isRefined: false,
+          },
+        ],
+        templateProps: {
+          templates: defaultTemplates,
+        },
+        cssClasses: {
+          labelText: 'labelText',
+        },
+      };
+
+      const { container } = render(<RefinementList {...props} />);
+      const [firstItem, secondItem] = container.querySelectorAll('.labelText');
+
+      expect(firstItem.innerHTML).toEqual(
+        'Samsung"&gt;&lt;iframe/onload=alert("xss")&gt;'
+      );
+      expect(secondItem.innerHTML).toEqual('Apple');
+    });
+
+    it('should allow HTML in the items when SFFV', () => {
+      const props = {
+        ...defaultProps,
+        isFromSearch: true,
+        facetValues: [
+          {
+            highlighted: '<mark>Sam</mark>sung',
+            value: 'Samsung',
+            label: 'Samsung',
+            count: 0,
+            isRefined: true,
+          },
+          {
+            highlighted: 'Apple',
+            value: 'Apple',
+            label: 'Apple',
+            count: 10,
+            isRefined: false,
+          },
+        ],
+        templateProps: {
+          templates: defaultTemplates,
+        },
+        cssClasses: {
+          labelText: 'labelText',
+        },
+      };
+
+      const { container } = render(<RefinementList {...props} />);
+      const [firstItem, secondItem] = container.querySelectorAll('.labelText');
+
+      expect(firstItem.innerHTML).toEqual('<mark>Sam</mark>sung');
+      expect(secondItem.innerHTML).toEqual('Apple');
+    });
   });
 
   describe('count', () => {

diff --git a/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap b/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap
@@ -59,7 +59,7 @@ Object {
          class=\\"{{cssClasses.checkbox}}\\"
          value=\\"{{value}}\\"
          {{#isRefined}}checked{{/isRefined}} />
-  <span class=\\"{{cssClasses.labelText}}\\">{{{highlighted}}}</span>
+  <span class=\\"{{cssClasses.labelText}}\\">{{#isFromSearch}}{{{highlighted}}}{{/isFromSearch}}{{^isFromSearch}}{{highlighted}}{{/isFromSearch}}</span>
   <span class=\\"{{cssClasses.count}}\\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>
 </label>",
       "loadingIndicator": "

diff --git a/src/widgets/refinement-list/defaultTemplates.js b/src/widgets/refinement-list/defaultTemplates.js
@@ -4,7 +4,7 @@ export default {
          class="{{cssClasses.checkbox}}"
          value="{{value}}"
          {{#isRefined}}checked{{/isRefined}} />
-  <span class="{{cssClasses.labelText}}">{{{highlighted}}}</span>
+  <span class="{{cssClasses.labelText}}">{{#isFromSearch}}{{{highlighted}}}{{/isFromSearch}}{{^isFromSearch}}{{highlighted}}{{/isFromSearch}}</span>
   <span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>
 </label>`,
   showMoreText: `