Xperience by Kentico – Implement Wildcard

By Danny Paul van Iersel, 20-11-2024

For example, we have a website that is a showcase of products. We want each product to have a unique page for its details and possible functionalities (for example to find a dealer or to purchase the specific product).

One way of doing this

Without any development you could do this in one way.

Create a Content type for pages as a Product details page.

Add a field of Data type “Content Items” and configure it to use the Content type you want it to represent. In our case a Product.

For each individual Product we now create a new page and reference the Product it should contain.

With a few pages this can be done quickly, but if you have many products, it can become time consuming to create each page manually.

Create the Wildcard Page

The Wildcard page functions as a template. It will be used for all the products and only has to be configured once.

Through parameters we can adjust the selection of our Content Item from the Content Hub.

For our page we need to build specific Widgets that will handle the parameter request to show the corresponding Content Item fields.

For example:

• we need a product intro, a product image and a title/name of the product
• a list product features
• product specifications
• product manuals and other documents
• related products

How to provide the parameter to be used for this page?

There are multiple ways to do this, and we will discuss 2 of them:

• Query string Parameters
• Routing for SEO-Friendly URLs

Query string Parameters

Using the query string is an easy method to start your development and see if your components do what they should do.

Within a component you can easily request a query string within your Widget and use it in your query to select the desired Reusable Content Type.

The easy part of this solution is that we do not have to worry about the Kentico Content Tree routing. Since the page exists it will still work as a normal page. (later we will talk more about why it is important).

If we have a page url: “https://{{your-domain}}/products/productwildcardpage”.

And we call it without any parameters we need to handle this and make our page throw an exception or message to the user it is not a valid request.

Next, we need to find a unique identifier for our product. This could be a name, but in some cases, this is not unique enough. To keep it simple for now we use a product ID.

Our page URL will be: “https://{{your-domain}}/products/productwildcardpage?productid=1”.

We query our Kentico Content Hub items (see how to retrieve content items from the Kentico documentation: https://docs.kentico.com/developers-and-admins/development/content-retrieval/retrieve-content-items)

Our query will use the productid parameter and search for the item (below a simple example code to demonstrate the query):

You could also request all the items from a content Repository (be sure to cache this properly), then select the item that you want:

Security with Query string

Always be aware of your Query string input.

Using hash on query string.

To setup query string hashing we refer to the Kentico documentation: https://docs.kentico.com/k12sp/securing-websites/developing-secure-websites/query-string-hashing

Using the QueryHelper.BuildQueryWithHash / ValidationHelper.GetHashString to generate a hash. Then use QueryHelper.ValidateHash / ValidationHelper.ValidateHash to retrieve the hashed value. This is a safer way and prevents tampering of the query string parameters.

Prevent SQL injection

When you allow query strings and do not pay attention to them it can be misused for SQL injection.

SQL injection is an attack on data-driven applications. It can use techniques to try and find database vulnerabilities. It can do insert statements or even delete entire tables of data.

To avoid SQL injection:

You can load data through DataQuery or ObjectQuery by using the default Kentico API provider. It uses parameter-driven queries.

If you use a query, you can use where methods like WhereContains or WhereEquals. It only allows specific queries to be executed on specified columns.

Using SQL Parameters, handles the parameters as literal and SQL server will not execute the code if the parameter contains invalid values.

Escaping is another way. By using SqlHelper.EscapeQuotes and SqlHelper.EscapeLikeValue it will prevent the use of apostrophe and wildcard characters.

Setup a Web Application Firewall

A web application firewall (or WAF) can monitor traffic before it is given to your application. It will block traffic if it is not safe and prevents SQL injection, Cross-site scripting and some WAF’s can also be configured to block DDOS attacks.

A force of habit

A force of habit that you might want to use, or you are already familiar with is “Zero-trust principles”. Zero trust goes further than just data, but it is good to know.

Always Verify your input before continue using it.

Minimize access to sections of your data. Connect with your database with the least amount of required access.

When it comes to data input always assume it can be used to breach your system.

SEO matters

We wouldn’t be developers to have some cases where businesses requirements do not meet with the above solution. In some cases, we are forced to use SEO Friendly URL’s.

Why would we want to use SEO Friendly URL’s?

• It is easier to remember the URL instead of working with id’s or naming properties.
• Better indexing for search engines
• Better SEO Ranking

In order to be able to use this, we need a unique structure to still be able to identify the product.

Depending on you project or client some keys are more important than others. For this example, we will use the following keys to identify our product:

• Product Category
• Product Brand
• Product Name

This will result in a URL like: {{your.domain}}/ProductCategory/Brand/Name.

If we sell CMS solutions from different types of CMS systems and include features it would become something like: {{your.domain}}/CMS/Kentico/Wildcard

We need the following to setup our code to handle these URL’s:

• A route navigating us to the correct page (our wildcard page).
• Initialize the Kentico Context with IWebPageDataContextInitializer.

Setting up a route could look like this inside your Program.cs file:

In our Controller we register the RegisterWebPageRoute:

In our method for “Detail” we can then collect the wildcard page.

We can now use the Context Initializer to use our wildcard page as context.

Kentico can now render our page based on the route. All we need to do now is collect the data based on our parameters. This to get our Content Hub data, we can store this data in a View Model and pass it to other components/widgets that are placed on our wildcard page.

Conclusion

With a little bit of development work we can create highly reusable content.

Have minimal effort for marketeers to create content and have it accessible for your channels.

The benefits of using wildcard pages are that a marketeer only needs to worry about content in one place. When editing a wildcard page, you only have to do this once. For example, when you create a new widget or functionality. All the presentations of your products will be updated at once. Instead of needing to go through all the individual pages one-by-one.

Are you interested in knowing how we at Blastic can help you out to optimize your user experience? Please feel free to contact us.