Integrations / Platforms / Shopify / Potential XSS Issue Mitigation

Potential XSS Issue Mitigation

An earlier version of the InstantSearch code provided by the Algolia for Shopify plugin contained a potential cross-site scripting (XSS) vulnerability.

In order to mitigate this potential issue, you need to upgrade the InstantSearch assets in use.

Depending on your implementation, there’s two ways to do the migration:

  • Automatically, through the plugin admin panel. Don’t do this if you have customized your InstantSearch implementation.
  • Manually, if you have a custom implementation.

Automatic migration

To automatically migrate to the latest version of the InstantSearch assets provided by the plugin, reinstall Algolia into your theme.

This will override InstantSearch and the plugin-provided scripts.

If you have changed or customized your theme by editing the scripts provided by the plugin, or if you aren’t sure, proceed with a manual migration. Otherwise, you will lose your changes.

To automatically update the Algolia dependencies of your theme, go to your Algolia plugin admin and follow these steps:

1. Go to the Search options tab.

2. Click Enable on a new theme.

The search options tab in the Algolia for Shopify plugin

3. Select the theme you want to update.

5. Click Finish installation.

Manual migration

If your shop has a custom theme, or if you’ve made some customizations to your InstantSearch code, you’ll have to manually update your theme. You’ll need to change two lines of code to mitigate this potential issue.

To migrate manually, open the theme code editor by clicking Edit code in the dropdown found on the Themes page, under the Online Store section of the Shopify admin.

Dropdown to open the theme code editor

Open the algolia_instant_search.js.liquid file in the theme code editor, and change the following lines of code. If you haven’t made changes to this file, the code you need to replace is on line 498 and 553.

1
2
3
4
5
6
7
8
  var createDataAttributes = function(refinement) {
    return Object.keys(refinement)
      .map(function(key) {
-       return 'data-' + key + '="' + refinement[key] + '"';
+       return 'data-' + key + '="' + encodeURIComponent(refinement[key] || '') + '"';
      })
      .join(' ');
  };
1
2
3
4
    var itemData = {};
-   itemData[key] = event.currentTarget.dataset[key];
+   itemData[key] = decodeURIComponent(event.currentTarget.dataset[key]);
    return algolia.assign({}, acc, itemData);
Did you find this page helpful?