Introduction

Intershop Commerce Suite 7.6 introduces a new customization approach for the storefront.

The storefront cartridges are no longer part of a project's base assembly (commerce_management_b2c or commerce_management_b2x). They now completely belong to the project's component set. This way it is necessary for the projects to get the storefront cartridges as source cartridges.

Therefore, Intershop introduced the Responsive Starter Store. This blueprint is a good starting point for customer projects. It consists of a working component set of storefront cartridges and demo cartridges and of two assemblies, one for B2C and one for B2X scenarios.

The Responsive Starter Store replaces our PrimeTech Reference Site with the new inSPIRED demo organization and completely reworked storefront cartridges that provide a new responsive storefront styling.

The inSPIRED organization structure of the Responsive Starter Store:

Screenshots

The homepage of the Responsive Starter Stores B2C demo channel - inTRONICS - in basically three different view sizes.

Benefits

For Development

With the introduction of the Responsive Starter Store, projects get all the different options to customize the storefront of the project. They are no longer limited to building their changes on top of a fixed set provided by Intershop or creating a completely own storefront. With the storefront sources provided, it is now possible to work with and change the provided functionality within the project in a way that is pretty much the same as how Intershop developers work with and change the storefront functionality.

It is now also possible to work with the included content model and completely fit it to the projects needs. Content Model artifacts can now be removed, added or changed in the „original“ cartridges. There is no need to work with overrides any more, even though this functionality is still working as before. In addition, any project-specific functionality that hides unwanted content artifacts (black listing/white listing) is no longer needed since those artifacts can easily be removed in the sources.

For pipelines and ISML templates, it is now possible too to directly make the changes in the original without using the overloading mechanism. However, it may still be a good practice for project-specific customizations.

For Migration

With the new customization approach, the project cartridges set - which may include the storefront cartridges of the Responsive Starter Store - is designed to work with following Intershop versions as is. Only adaptations regarding actual API changes, which should be communicated, might be needed.

With the Responsive Starter Store, Intershop does not automatically update this part of the storefront cartridges when updating to a new Intershop version. Only the base assembly (commerce_management_b2c or commerce_management_b2x) is updated through Gradle, but all the other parts are project code. This way it is up to a project's responsibility to do updates/migrations.

Any storefront updates come in the form of a new blueprint, such as a new version of the Responsive Starter Store. In which way this updated blueprint is used to update the projects sources is up to the projects.

Content

The Responsive Starter Stores component set (a_responsive) basically contains the storefront cartridges that contain the storefronts “View Layer” and the content model. These cartridges can be copied and used in the projects component set to provide the standard storefront functionality. In addition, demo cartridges are provided that set up the inSPIRED demo organization with its channels and applications. Those demo cartridges can be used as starting point by the projects to base their initialization cartridges on.

Cartridge overview of the Responsive Starter Store component set:

Besides the component set, the Responsive Starter Store also provides two assemblies as project blueprints, one for B2C (inspired-b2c) and one for B2X (inspired-b2x).

The Recipe: Set Up Project Based on the Responsive Starter Store describes in detail how the content of the Responsive Starter Store can be used as base for a customer project.

Used Technology

Bootstrap

The storefront of the Responsive Starter Store is based on Bootstrap, a HTML, CSS and JS framework for developing responsive projects on the web (used version v3.4.1).

Bootstrap includes a responsive grid system that by default appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. The storefront of the Responsive Starter Store uses this 12 column grid system as defined in Bootstrap. No changes were made. Therefore, the Bootstrap documentation can be used as reference for working with the Responsive Starter Store (English documentation, German documentation). All the described CSS classes should be usable within the Responsive Starter Store.

Besides the grid system several Bootstrap components and its Javascript components are used throughout the storefront like Modal, Carousel, Popover, Collapse. Any other Bootstrap components should be usable too since the complete Bootstrap framework is included in the Responsive Starter Store.

Bootstrap Vulnerability Warnings

The Responsive Starter Store (RSS) uses Bootstrap version 3.4.1, which is outdated and contains known vulnerabilities. However, there are no plans to update Bootstrap to newer versions, such as v4.6.2 or v5.3.x. Updating Bootstrap would require significant changes to the HTML and CSS of the RSS, resulting in major migration efforts for customized storefront stylings in projects.

Additionally, Bootstrap's transition from Less to Sass starting with v4.x would necessitate extensive modifications to the styling sources in both the RSS and project customizations. Projects that require a more recent Bootstrap version can independently implement the update if necessary.

The identified Bootstrap vulnerabilities should not serve as the primary reason for switching versions, as the issues can be mitigated by avoiding the use of the problematic functionality (refer to the explanation of specific vulnerabilities).

Vulnerability (CVE-2024-6485)

The Bootstrap Cross-Site Scripting (XSS) Vulnerability (CVE-2024-6485) as described on https://www.herodevs.com/vulnerability-directory/cve-2024-6485?bootstrap-nes has been analyzed.

The "Vulnerability Info" and "Steps to Reproduce" sections provide the necessary information to determine what needs to be checked or avoided in the source code.

Using a data-*-text attribute (i.e. data-complete-text) associated with a button’s state feature is not subject to content sanitization.

The "button's state feature" mentioned there was deprecated in Bootstrap v3.3.5 and is not used in the standard Responsive Starter Store (RSS). Therefore, this Bootstrap v3.4.1 vulnerability does not apply to the RSS.

This can be verified by searching the source code of the RSS (or the project's customized source code) for the RegEx data-.*-text.

Additionally, searching for the .button() method, which must be used in conjunction, does not yield any results in the RSS.

For this vulnerability to be exploitable, a button would need to bind its data attributes to URL parameters or input fields, allowing an attacker to inject malicious code. Such an implementation is inherently insecure and is not used in the RSS. Consequently, the mere use of the Bootstrap v3.4.1 framework does not make the RSS vulnerable to this specific issue.

Vulnerability (CVE-2024-6484)

The Bootstrap Cross-Site Scripting (XSS) Vulnerability (CVE-2024-6484) as described on https://www.herodevs.com/vulnerability-directory/cve-2024-6484?bootstrap-nes has been analyzed as well.

A cross-site scripting (XSS) vulnerability (CVE-2024-6484 ) has been identified within the Bootstrap 3 Carousel component.

With the information given in the "Vulnerability Info" and "Steps To Reproduce", section the usage of data-slide together with href in the Responsive Starter Store (RSS) was verified.

In all places where we use the href attribute for the intended target carousel’s #id in the RSS, we provide an id that is independent from potentially malicious user input. So there is no vulnerability for CVE-2024-6484 in the RSS as well. Following this advice from the "Steps to Reproduce" can further improve the custom project code:

The presence of a valid data-target will override the href and the XSS will not be evaluated.

Less

With the integration of Bootstrap, its underlying default CSS preprocessor, Less, was also integrated in the Responsive Starter Store.

For a convenient Less development environment, a Less editor was integrated into Intershop Studio, and a Less compiler was incorporated as a Gradle task.

For more information on working with Less in the Responsive Starter Store, refer to Cookbook - Storefront Less Integration.

BootstrapValidator

For the client side form validation the BootstrapValidator in version 0.5.0 is used. This version was used even though a newer version exists, since this older version is licensed under the MIT License. A documentation for version 0.5.2 can be found here. The current development version is called FormValidation but it no longer uses such an open licensing model. For documentation you can still refer to their web site but be aware of the necessary translations or newer features.

Slick Carousel

For product lists, a fully responsive, swipe-enabled, mouse-dragging, infinite-looping, and arrow key-accessible slick carousel has been integrated.

Fonts

The default font families used in the Responsive Starter Store are Roboto and Roboto Condensed is used.