Caution when enabling Query String Sort with WordPress admin pages

When enabling the Query String Sort feature of the Cloudflare Caching app, WordPress admin pages can behave unexpectedly. Learn to identify and respond to this issue.


Overview

When Query String Sort is enabled, Cloudflare sorts all request query string parameters before accessing our cache.

The Cloudflare Caching app Query String Sort feature is available to customers in the Enterprise plan.

Sorting query string parameters helps to achieve a higher cache hit rate, mainly because multiple URLs pointing to the exact same resource might have a different query string order.

To set Query String Sort globally for a specific domain, go to the Cloudflare dashboard Caching app and Enable Query String Sort. By default, this feature is disabled (Off).

enable_query_string_sort_on.png


Unexpected behavior with WordPress admin pages

When a site or an application requires exact query string ordering, enabling Query String Sort might cause unexpected behavior.

For example in the WordPress admin UI, you might notice any of the following behaviors:

  • No media appear in the Media Library
  • Inability to customize the site via Appearance > Customize
  • Inability to drag any widget to a sidebar in Appearance > Widgets
  • Inability to edit menus in Appearance > Menus

To understand why this happens, note that WordPress concatenates Javascript files to speed up the administration interface. The way WordPress implements this involves multiple occurrences of load[] parameters in the query string, where the order of those parameters is crucial.


Identify the problem

The screenshot below shows an example where resources in the Media Library are not rendered correctly and the browser debugging console reveals that the page is throwing an error:

media_library_enabling_query.png

When the page load-scripts.php loads, the browser sends a request to Cloudflare for:

/wp-admin/load-scripts.php?c=0&load%5B%5D=hoverIntent,common,admin-bar,underscore,shortcode,backbone,wp-util,wp-backbone,media-models,wp-plupload,wp-mediaelement,wp-api-r&load%5B%5D=equest,media-views,media-editor,media-audiovideo,mce-view,imgareaselect,image-edit,media-grid,media,svg-painter&ver=5.0.3

With Query String Sort enabled, Cloudflare will then sort the parameters and values in the request query string, resulting in the following:

/wp-admin/load-scripts.php?c=0&load%5B%5D=equest,media-views,media-editor,media-audiovideo,mce-view,imgareaselect,image-edit,media-grid,media,svg-painter&load%5B%5D=hoverIntent,common,admin-bar,underscore,shortcode,backbone,wp-util,wp-backbone,media-models,wp-plupload,wp-mediaelement,wp-api-r&ver=5.0.3

Note that the load[] parameters were swapped (depicted in orange and purple in the code snippet above), as equest should come before hoverIntent when alphabetically ordered.

When this happens, you will most likely find errors in the browser console, such as:

_____ is not defined at load-scripts.php?c=0&load[]=...

This type of error indicates that Query String Sort is inadvertently breaking some WordPress admin page functionality.

After sorting, the query then goes to Cloudflare's cache infrastructure (and to the origin server, if the resource is not in the Cloudflare cache or is not cacheable). The origin server then serves the concatenated scripts, which are ordered differently. Because scripts might depend on other scripts, this process might break dependencies.


Responding to this issue

Start by analyzing your site or application behavior around the use of query strings. Do you have assets served with multiple possible arrangements of query strings?

For example, you might have an image resizing endpoint or a search form, where the order of query parameters might vary—like width, height, version, etc., yet a unique parameter combination points to a single relevant asset.

To minimize problems, consider:

  • Disabling Query String Sort for the site if you’re sure that this feature does not add value to any part of your site. Cloudflare disables this option by default in the Caching app.
  • Use Cloudflare Page Rules to enable Query String Sort for URLs where preserving the query string parameter order is not important.
  • Alternatively, use Cloudflare Page Rules to disable Query String Sort for URLs where a specific parameter order is required. For example, disable Query String Sort for example.com/wp-admin/load-scripts.php* or any URLs with similar requirements (replace example.com with your domain name).

To learn more about Page Rules, visit Understanding and Configuring Cloudflare Page Rules.


Related resources

Not finding what you need?

95% of questions can be answered using the search tool. This is the quickest way to get a response.

Powered by Zendesk