In this post, I'll detail the upgrade of DevExpress Bootstrap controls to Bootstrap v5.3.3, enhanced security-related updates to DevExpress Bootstrap project templates, and support for color modes.
New Bootstrap Version in Project Templates: XSS Vulnerability Addressed
DevExpress Bootstrap Controls are built atop the Bootstrap framework and depend on static Bootstrap resources. Over the years, DevExpress UI controls have supported Bootstrap v3 – v5, and in the past, DevExpress Bootstrap project templates have used Bootstrap v4.x.
With v22.2 (and through v24.2), DevExpress project templates use Bootstrap v5 by default (including the most recent version of Bootstrap – v5.3.3). This upgrade is not merely cosmetic in nature. It addresses a critical security vulnerability in Bootstrap v4.0 - v4.6.2 (see Bootstrap Cross-Site Scripting (XSS) vulnerability). Though DevExpress UI controls do not directly use Bootstrap scripts, inadvertent use of JavaScript Bootstrap in other parts of a project could expose an application to this vulnerability. Said simply, since the vulnerability was addressed in Bootstrap v5.0, our templates now use the most recent version of Bootstrap.
Upgrade Your Existing Project to v5
Because of the XSS vulnerability in earlier versions of Bootstrap, we highly recommend that you upgrade your existing Bootstrap project to v5 (to mitigate potential attack vectors and enhance the overall security posture of your application). To upgrade, you should:
- Update your Bootstrap files. Navigate to the Bootstrap website and download the latest version. Replace old Bootstrap CSS and JS files in your project with new files. For additional information on Bootstrap v5, please refer to Migrating to v5.
- Set the Bootstrap mode setting to Bootstrap5 in your project's Web.Config file:
<configuration> ... <devExpress> <bootstrap mode="Bootstrap5" /> </devExpress> ... </configuration>
Dark Mode Support
Among the most exciting additions in newer versions of Bootstrap is built-in support for color modes. This feature allows developers to create applications that adapt to user preferences - enhancing accessibility and the overall user experience. Since we updated Bootstrap resources to v5.3.3, our DevExpress Bootstrap controls now support color modes. For example, when you apply a Bootstrap-based theme, you can easily switch to dark mode. To incorporate this capability, add the data-bs-theme attribute to the <html> element.
<html lang="en" data-bs-theme="dark">
<head>
...
</head>
</html>As you can see in the image below, DevExpress UI controls fully integrate Bootstrap styling, ensuring that your application maintains a consistent look and feel.
What about Blazor components?
The most recent versions of DevExpress Blazor UI components (v24.1 and higher) do not rely on Bootstrap. However, they can use colors and other variables from Bootstrap themes. If you use Bootstrap in your Blazor projects, make certain to use Bootstrap v5.0 or higher. DevExpress Blazor components support Bootstrap v5.0 (v21.1) and Bootstrap v5.3 (v23.2+).
Have Questions?
If you still have questions regarding the Bootstrap XSS vulnerability or its impact on DevExpress UI components, please submit a support ticket via the DevExpress Support Center. We will be happy to follow up.