Store Locator Plus® uses SCSS files compiled by the Sass application to generate the custom CSS files for the application. To process these files you’ll need to have a builder application, such as Webpack via Node, or an IDE with a file watcher in place. Proper generation of the CSS compilations is critical to creating a proper application interface.
Eventually our process will move to a managed script to build the application stack as we move toward JavaScript interfaces, such as React, as a core of the user experience. In the meantime the IDE file watcher approach is in place.
A new reports interface is coming in the 2208.15 release based on preliminary work with the React API library. In addition to the simplified interface , the new reports provide more controls over the data table. Some new features include a date selector that auto-refreshes the data table, ability to filter rows, select which columns to display, or change the display density. The export CSV now honors the column display and filter settings. There is also a new “direct to print” option.
The production branch. This branch should always point to production releases – the code released to the public or in use on production systems.
Staging
The release candidate branch. Prerelease plugins or the plugins/components that are published to dashbeta for the SaaS offering.
Test / Develop
The branch being used for testing integration of ongoing development branches.
Version Identifiers
Starting in August 2022 all product versions will follow a YYMMDD.xx standard where YYMMDD is based on the development start date for primary product releases (Store Locator Plus® for WordPress, MySLP Dashboard,etc.) For related product releases (Power, Front-End, etc.) the date should try to match the main product/service it is related to but this is not a strict rule – rather a suggest to help users easily identify related releases.
The YYMMDD should be 2 digits each and xx should always start at 01 for the first revision. For example 220815.01 is the first iteration for an app that started development on 220815.
Code Formatting / Linting
JavaScript
The preferred linting library is ESLint due to the ongoing React support.
With the re-listing of the Store Locator Plus® WordPress plugin in the WordPress plugin directory, there has been a notable increase in outward scaling of the Store Locator Plus® application cluster. Key Store Locator Plus® websites and services run on horizontally scalable cluster built on AWS Scaling Groups, AWS Load Balancer, and EC2 instances. Every night starting around midnight EST the scaling group adds one node per hour until 3AM EST at which point they start scaling back.
The AWS cluster is handling the load well, but we want to investigate in case there is something else going on. Scaling can be caused by a number of issues including network attacks, application misconfiguration, coding errors, routine bot traffic, or routine customer interaction patterns. It is best to get insight into the issue and know for certain the root cause.
This article walks through a real-time analysis of the events and traffic patterns that are triggering the scaling.
Background
The AWS Scaling Group that manages the Store Locator Plus® cluster is configured to monitor average CPU usage over time and add nodes to the cluster when the servers start to climb above 80% utilization. This is often an early indicator of impending server overload and a good baseline metric on which to base scaling events.
These events are triggered almost nightly at the same time. This typically indicates a routine scheduled process such as a site crawler via a bot (aka spider) or a scheduled routine running on a customer’s website.
The latest scaling event started at 11:55PM EST last night, so we’ll start there.
First Stop : AWS Dashboard
We want to verify our timestamps with more specificity as the email notifications are not necessarily precise.
AWS Scaling Groups
We’ll look at the AWS Scaling Groups first. We have monitoring enabled and can get a quick overview of the group activity.
We can see the instance count jump from our baseline of 2 nodes to 3 nodes almost exactly at 03:56 UTC. Remember AWS mostly notes times in UTC, which puts us at 11:55PM EST. The traffic drops back to baseline at 13:34 which is around 9:34AM EST.
We can also look at our aggregate EC2 instance metrics for all instances that are part of this scaling group. We can see the bulk of CPU usage starts to fire up around 03:48 UTC but really kicks in an hour later around 4:48 UTC before regularly grinding away from 5:48 UTC through 7:48 UTC. The pattern looks a lot like an external process, possibly a bot.
Inbound network requests on the EC2 instances reflects the same with a single 502Mbps spike starting at 05:03 UTC.
Inspecting EC2 Logs
While our load balancer is logging access to an S3 bucket, it is often difficult to locate and parse the logs with the volume of requests being pushed to the bucket every day. While there are log parsing and reporting services out there, there is a faster way to get insight into requests — looking at the local disk logs on a running EC2 instance in the cluster.
If you are lucky one of the current nodes will be running as part of the cluster that was online for the entire event. Given the span of time and amount of traffic the single node will provide a reasonable cross-section of requests, starting with logging 50% of the requests as part of the 2-node cluster to start with. We can assume it was logging at least 33% of the requests during the initial spikes as the cluster expands to 3 nodes.
Since our nodes are all running some form of web application, we want to check our web server (nginx) log files in /var/log/nginx. Keep in mind the EC2 servers are configured to be in the data center’s time zone, so the log files for our US-East-1 zone servers will be in EST. We want to look between 11:55PM EST and 9:34AM EST with a focus on the 1:48 – 6:48AM EST entries.
Bad Actor In Log Files
The nginx access log have the fingerprints of a brute force attack against the server around 01:28 EST (05:30 UTC). Many of the URLs here are known weak points in apps that may be running on a server (not ours though). These can be blocked by a Web Application Firewall update on AWS, a service that provides edge-of-cloud protection and can keep the network requests from reaching our cluster in the first place.
An excess number of option value lookups was discovered while testing Store Locator Plus® 5.13.8 where the option/label_directions was searched multiple times for a single map render. To reduce load on servers this should only happen once, at the start of the initial map rendering.
This is not a blatant “it did something wrong” or “didn’t do something it should” type of bug. This is a performance and resource usage bug and may require some new architcture.
The manifestation:
Debugging path… investigation
Looking for label_directions in the code…
The initial search through the plugins reveals places the settings are created, set, stored, and managed but not the “JavaScript hook” being fired via /wp-json (the REST API for WordPress). So we need to look deeper.
Looking for options/ in the code…
Let’s try the start of the REST API path after the generic /wp-json/store-locator-plus/v2/ part…
We can ignore the assets/ directory… but what else is in here…
Ahhh… the slp_core.js call to slplus.rest_url + ‘options/’ + attribute looks sus…a
Solution (planned for SLP 5.14)
There was a problem in slp_core.js with value testing.
Turns out an empty value causes multiple REST calls. The following is an invalid test to see if a property exists, which is what we want here. Previously it was checking the value was SET and had a “non-falsy” value. In JavaScript lots of things are “kind of true” or “kind of false” (aka Falsy), for example the empty string “” is FALSE. That is not what we want here.
In slp_core.js we ant to replace the if (!<var>) with if (! var.hasOwnProperty()) …
Cause
The call to /v2/options/label_directions was firing once for every location because the default value for the directions label is empty (“”). This was evaluating to false, which forced the SLP JavaScript to query the server to get the value, which set it to “”.
For each location that was rendered the setting was checked… “is the label for directions set?” or more accurately “Is the label for directions set and NOT empty?”. Every time it came back saying “no, it is NOT set” or rather “It IS empty” … so the code would then go ask the REST API server for the label value.
The front end sends a request back to WordPress via AJAX to request a list of locations. Part of that request encodes all of the form field entries, including the category drop down selection, into a query-encoded (key/value pairs with an & delimiter) string that is send in the formData property to the backend.
The category ID is not being parsed and filtered properly.
Looking At The Data Request
Via browser developer tools and the network I/O inspector, XHR filter…
HTTP Method: POST URL: /wp-admin/admin-ajax.php Request Payload…
You can see the formdata property in the POST body along with the encoded form data including the cat=5 entry. This is where the requests tells the back end to limit results to those that have WordPress category ID #5 attached to the location.
Diving Into The Code
On the back end the AJAX is routed through the Store Locator Plus® base plugin via the standard WordPress hooks and filters. These are setup in the SLP_AJAX class via this add_ajax_hooks method:
Where the csl_ajax_search eventually finds its way to the find_locations method.
Debugging the find_locations method it looks like the formdata variable coming in via the superglobal $_REQUEST variable is not being set properly.
Digging Into The Malformed Variables
Looking at the call stack the form data is mishandled causing the & in the query string to be encoded as &, this causes wp_parse_args() to set the property name incorrect as you can see in the debugging screenshot below.
Turns out the wp_kses_post() is too aggressive with the data munging and converts & to & which then throws wp_parse_args() for a loop.
Instead we need to use esc_url_raw() to leave most URL entities intact.
The setting to display the category selector on the front end stopped working. The Power add on is active, but with SLP 5.13.X prerelease the drop down no longer appears.
This is very likely due to escaping of output that is overly aggressive on what it filters out on the front end.
Tech Overview
The base plugin renders the map , search form and results on the front end using shortcodes. The [slplus] shortcode renders the entire UX based on a combination of HTML and secondary shortcodes. These secondary shortcodes are parsed by the SLP base plugin to do things like “put the search form here” or “put the results here”. Within each of those custom shortcodes is another set of shortcodes, for example for the search form “put the address input box here” or “put the radius selector here”.
One of those additional shortcodes is provided by the Power add on to “put the category selector drop down here”.
That is not being processed.
Code Path
SLP_Power_UI.php
This attaches the method for rendering additional SLP search form features. This method is getting called.
public function add_hooks_and_filters()
...
add_filter( 'shortcode_slp_searchelement' , array( $this , 'process_slp_search_element_shortcode' ) );
This method is not getting called when the [slplus] shortcode is rendered…
public function process_slp_search_element_shortcode( $attributes ) {
The shortcode_slp_searchelement filter is only fired from this piece of code:
SLP_UI.php
Provided by the base plugin, this handles most of the front end initialization and execution.
This line of code is being called to apply filters…
public function create_SearchElement( $attributes, $content = null ) {
$attributes = apply_filters( 'shortcode_slp_searchelement', $attributes );
Checking Call Order
⚠️ Evaluating the call execution order, the above apply_filters is being called BEFORE the power add on has run the SLP_POWER_UI add_hooks_and_filters() , noted above, to hook onto that filter call.
Power Add Hooks & Filters
Here is the call stack when Power add_hooks_and_filters is run…
The call to SLP_BaseClass_Addon->createobject_UserInterface() is fired during the execution of the ‘wp_enqueue_scripts’ action hook as defined in base_class.addon.php in the slp_init() method…
Here is the call stack , CALLED FIRST, for creating the search element:
slp_render_shortcode() is called to start this process per the WordPress add_shortcode() method in SLP_UI :: initialize().
That means do_shortcode() is being called very early —
This is due to a side effect of all the fuckery WordPress Core has been doing to deal with the block mode editor. In order to support new block themes (like Twenty Twenty Two) WP_Block->render() calls render_block_core_post_content() super early. Before any script enqueue.
WP Core: render_block_core_post_content() calls the “the_content” filter way earlier than non-block themes:
Attach creatobject_UserInterface Calls To New Hook
With the block theme, firing that method via the ‘wp_enqueue_scripts’ method is too late for WP Block Themes.
There are multiple methods that could be used to hook this, but which one will be BEFORE the WP Block rendering calls the ‘the_content’ filter AND still work for older themes?
Option 1 : Hook to ‘the_content’ filter with an earlier precedence on the weight
The main concern here is that a ‘the_content’ script does not get called everywhere a ‘wp_enqueue_scripts’ hook gets called. The question is whether AJAX and REST calls run through here.
Results
Did not work, broke a lot of features and setup in the plugin.
Option 2 : Attach to an earlier hook…
Candidates…
block_parser_class — in function parse_blocks() probably not called on non-block themes.
template_include — before template_canvas.php which appears to be before template_canvas where the first line is get_the_block_template(); the assumption is template_canvas is only called for block based themes.
Concerns
‘template_include’ hook may get called too often, but it is a classic filter that has been around for a while and should work for both block and legacy templates.
Location categories provides a way to place categories into groups that can be filtered via the administrative tools and on the front end user experience.
Managing categories is provided by the Power add on.
Technical Implementation
The underlying technology uses the built-in WordPress category management system. Some of the core functionality of adding, removing, and assigning categories is managed by WordPress and thus requires additional testing whenever WordPress posts a new release.
The Power add on extend this default functionality to provide custom administrative and user interactions with location categories.
Testing Environment (July 2022)
WordPress 6+ Store Locator Plus 5.13+ Power Add On 5.11+
Related Use Cases
The use cases are based on the WordPress plugins. Most of the processes described within apply to the MySLP SaaS implementation as well.
Assumptions
WordPress environment is setup and configured including activation of the following plugins
Store Locator Plus®
SLP Power add on
In addition map service (Google API keys) should be in place and some locations should be added to the system.
A page has been created with the [slplus] shortcode present and the map is rendering properly.
Users are logged in as a WordPress administrator (the process will be slightly different for SaaS users).
Adding Categories To Locations
Objective
Create a location category and attach it to an existing location.
User Action: Add A Location Category
Click on Store Locator Plus® | Categories in the WordPress sidebar menu.
In the left “Add New Category Form”…
Type a category name. (Restaurant)
Click Add New Category
Result
The new category should appear on the category list on the page.
Category list after adding the restaurant category.
User Action: Attach Category To Location
Click on Store Locator Plus® | Locations in the WordPress sidebar menu.
Click the Edit action icon on the first location.
Check off the box next to “Restaurants” in the Power | Categories section of the form.
Click Save.
Result
The category is assigned to the location and appears on the location table.
The location with an assigned restaurant category. This view is showing fewer columns as the Screen Options was updated to removed unused columns from the table view.
User Action: Show Category Select On Front End
Click on Store Locator Plus® | Settings in the WordPress sidebar menu.
Change the Category Selector setting to “Single Drop Down”.
Click Save
On the front end, go to the page that has the [slplus] shortcode.
Result
The search form for the map should show a category drop down.
The front end page with the [slplus] shortcode, showing the category selection filter.
User Action : Filtering Locations With Category
On the front end, go to the page that has the [slplus] shortcode.
Enter an address, choose a category.
Click “Find Locations”.
Result
Only the locations that match the search criteria, including the category filter, should be shown.
This looks like a problem with the AJAX processor on the backend. Need to look into ajax_onload.
csl_ajax_onload refs
The problem was with the Power add on trying to validate SLP location IDs when updating map markers. The intent is to NOT manipulate a map marker with an invalid ID as it can cause more problems downstream.
Resolution
DO NOT check_admin_referer() for the AJAX calls. The easiest way to check that , since we do not have an easily-accessible reference variable for “hey, I’m running an AJAX query now” is to simply ensure the nonce we want to validate even exists in the first place.