[dev-v5] Add MarkupStringSanitized to enhances security and clarifies usage. (#4424)

dvoituron · web-flow · commit d4a004f8ae7d · 2025-12-24T15:15:59.000+01:00
* Make Title in FluentMessageBar plain text only

The Title property now accepts only plain strings and no HTML markup.
For custom or formatted titles, use the ChildContent property.
Updated code and docs to clarify usage and provide examples.

* Sanitize inline CSS to prevent XSS in custom styles
Introduce MarkupSanitizedOptions and MarkupStringSanitized to sanitize inline CSS styles

* Update MarkupStringSanitized

* Update MarkupStringSanitized

* Refactoring MarkupStringSanitized

* Refactoring

* Refactor

* Add Unit Tests

* Update components to use MarkupStringSanitized

* Update Dialog and Add unit tests

* Refactor

* Fix errors

* Update doc

* Refactor sanitizers to use [GeneratedRegex] partial methods

* Add Unit Tests

* Update doc
diff --git a/src/Core/Components/Base/FluentComponentBase.cs b/src/Core/Components/Base/FluentComponentBase.cs
@@ -24,6 +24,7 @@ public abstract class FluentComponentBase : ComponentBase, IAsyncDisposable, IFl
     protected FluentComponentBase(LibraryConfiguration configuration)
     {
         configuration?.DefaultValues.ApplyDefaults(this);
+        LibraryConfiguration = configuration;
     }
 
     [Inject]
@@ -37,6 +38,11 @@ protected FluentComponentBase(LibraryConfiguration configuration)
     [Inject]
     protected IFluentLocalizer Localizer { get; set; } = FluentLocalizerInternal.Default;
 
+    /// <summary>
+    /// Gets the configuration settings for the library instance.
+    /// </summary>
+    protected internal LibraryConfiguration? LibraryConfiguration { get; }
+
     /// <summary>
     /// Gets the JavaScript module imported with the <see cref="FluentJSModule.ImportJavaScriptModuleAsync"/> method.
     /// You need to call this method (in the `OnAfterRenderAsync` method) before using the module.
diff --git a/src/Core/Components/DateTime/FluentCalendar.razor.cs b/src/Core/Components/DateTime/FluentCalendar.razor.cs
@@ -22,9 +22,9 @@ public partial class FluentCalendar<TValue> : FluentCalendarBase<TValue>
 {
     private ElementReference _calendarReference = default!;
     private const string JAVASCRIPT_FILE = FluentJSModule.JAVASCRIPT_ROOT + "DateTime/FluentCalendar.razor.js";
-    
-    internal static string ArrowUp = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.2 10.73a.75.75 0 001.1 1.04l5.95-6.25v14.73a.75.75 0 001.5 0V5.52l5.95 6.25a.75.75 0 001.1-1.04l-7.08-7.42a1 1 0 00-1.44 0L4.2 10.73z\"/></svg>";
-    internal static string ArrowDown = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M19.8 13.27a.75.75 0 00-1.1-1.04l-5.95 6.25V3.75a.75.75 0 10-1.5 0v14.73L5.3 12.23a.75.75 0 10-1.1 1.04l7.08 7.42a1 1 0 001.44 0l7.07-7.42z\"/></svg>";
+
+    internal static MarkupStringSanitized ArrowUp = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.2 10.73a.75.75 0 001.1 1.04l5.95-6.25v14.73a.75.75 0 001.5 0V5.52l5.95 6.25a.75.75 0 001.1-1.04l-7.08-7.42a1 1 0 00-1.44 0L4.2 10.73z\"/></svg>", MarkupStringSanitized.Formats.AlreadySanitized);
+    internal static MarkupStringSanitized ArrowDown = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M19.8 13.27a.75.75 0 00-1.1-1.04l-5.95 6.25V3.75a.75.75 0 10-1.5 0v14.73L5.3 12.23a.75.75 0 10-1.1 1.04l7.08 7.42a1 1 0 001.44 0l7.07-7.42z\"/></svg>", MarkupStringSanitized.Formats.AlreadySanitized);
 
     private CalendarViews _pickerView = CalendarViews.Days;
     private bool _refreshAccessibilityPending;
@@ -167,12 +167,14 @@ public virtual TValue? PickerMonth
     internal bool IsReadOnlyOrDisabled => ReadOnly || Disabled == true;
 
     /// <summary />
-    internal string GetAnimationClass(string existingClass) => CanBeAnimated ? _animationRunning switch
-    {
-        AnimationRunning.Up => $"{existingClass} animation-running-up",
-        AnimationRunning.Down => $"{existingClass} animation-running-down",
-        _ => $"{existingClass} animation-none"
-    } : existingClass;
+    internal string GetAnimationClass(string existingClass) => CanBeAnimated
+        ? _animationRunning switch
+        {
+            AnimationRunning.Up => $"{existingClass} animation-running-up",
+            AnimationRunning.Down => $"{existingClass} animation-running-down",
+            _ => $"{existingClass} animation-none",
+        }
+        : existingClass;
 
     /// <summary>
     /// All days of this current month.
diff --git a/src/Core/Components/Dialog/FluentDialog.razor.cs b/src/Core/Components/Dialog/FluentDialog.razor.cs
@@ -268,14 +268,14 @@ async Task<bool> ShortCutPressedAsync(DialogOptionsFooterAction button, string s
     private bool IsDialog() => !IsDrawer();
 
     /// <summary />
-    private MarkupString? GetDialogStyle()
+    private MarkupStringSanitized? GetDialogStyle()
     {
         if (string.IsNullOrEmpty(StyleValue))
         {
             return null;
         }
 
-        return (MarkupString)$"<style>#{Id}::part(dialog) {{ {StyleValue} }}</style>";
+        return new MarkupStringSanitized($"<style>#{Id}::part(dialog) {{ {StyleValue} }}</style>", LibraryConfiguration);
     }
 
     /// <summary>
diff --git a/src/Core/Components/Dialog/FluentDialogBody.razor b/src/Core/Components/Dialog/FluentDialogBody.razor
@@ -16,7 +16,7 @@
     }
     else if (!string.IsNullOrEmpty(Instance?.Options.Header.Title))
     {
-        <div slot="@FluentSlot.DialogTitle">@((MarkupString)(Instance.Options.Header.Title))</div>
+        <div slot="@FluentSlot.DialogTitle">@(new MarkupStringSanitized(Instance.Options.Header.Title, MarkupStringSanitized.Formats.Html, LibraryConfiguration))</div>
     }
 
     @* Header Action *@
diff --git a/src/Core/Components/Dialog/MessageBox/DialogService.cs b/src/Core/Components/Dialog/MessageBox/DialogService.cs
@@ -2,9 +2,10 @@
 // This file is licensed to you under the MIT License.
 // ------------------------------------------------------------------------
 
-using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.DependencyInjection;
 using Microsoft.FluentUI.AspNetCore.Components.Dialog.MessageBox;
 using Microsoft.FluentUI.AspNetCore.Components.Localization;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
@@ -94,7 +95,7 @@ public Task<DialogResult> ShowMessageBoxAsync(MessageBoxOptions options)
             config.Footer.PrimaryAction.ShortCut = options.PrimaryShortCut;
             config.Footer.SecondaryAction.Label = options.SecondaryButton;
             config.Footer.SecondaryAction.ShortCut = options.SecondaryShortCut;
-            config.Parameters.Add(nameof(FluentMessageBox.Message), new MarkupString(options.Message ?? ""));
+            config.Parameters.Add(nameof(FluentMessageBox.Message), new MarkupStringSanitized(options.Message ?? "", MarkupStringSanitized.Formats.Html, _serviceProvider.GetService<LibraryConfiguration>()));
             config.Parameters.Add(nameof(FluentMessageBox.Icon), options.Icon);
             config.Parameters.Add(nameof(FluentMessageBox.IconColor), options.IconColor);
         });
diff --git a/src/Core/Components/Dialog/MessageBox/FluentMessageBox.razor.cs b/src/Core/Components/Dialog/MessageBox/FluentMessageBox.razor.cs
@@ -3,6 +3,7 @@
 // ------------------------------------------------------------------------
 
 using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Microsoft.FluentUI.AspNetCore.Components.Dialog.MessageBox;
 
@@ -13,9 +14,10 @@ public partial class FluentMessageBox
 {
     /// <summary>
     /// Gets or sets the content of the message box.
+    /// For security reasons, the content is sanitized using the configured <see cref="LibraryConfiguration.MarkupSanitized"/> before rendering.
     /// </summary>
     [Parameter]
-    public MarkupString? Message { get; set; }
+    public MarkupStringSanitized? Message { get; set; }
 
     /// <summary>
     /// Gets or sets the icon of the message box.
diff --git a/src/Core/Components/Dialog/MessageBox/MessageBoxOptions.cs b/src/Core/Components/Dialog/MessageBox/MessageBoxOptions.cs
@@ -11,6 +11,8 @@ public class MessageBoxOptions
 {
     /// <summary>
     /// Gets or sets the message to display in the dialog.
+    /// The message can contain simple HTML markup for formatting.
+    /// See <see cref="LibraryConfiguration.MarkupSanitized"/> for more information.
     /// </summary>
     public string? Message { get; set; }
 
diff --git a/src/Core/Components/Dialog/Services/DialogOptionsHeader.cs b/src/Core/Components/Dialog/Services/DialogOptionsHeader.cs
@@ -12,11 +12,11 @@ public class DialogOptionsHeader
     /// <summary />
     public DialogOptionsHeader()
     {
-        
     }
 
     /// <summary>
     /// Gets or sets the title of the dialog.
+    /// For security reasons, the content is sanitized using the configured <see cref="LibraryConfiguration.MarkupSanitized"/> before rendering.
     /// </summary>
     public string? Title { get; set; }
 }
diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor b/src/Core/Components/MessageBar/FluentMessageBar.razor
@@ -19,7 +19,9 @@
 
             @if (!string.IsNullOrEmpty(Title))
             {
-                <span class="title">@Title</span>
+                <span class="title">
+                    @(new MarkupStringSanitized(Title, MarkupStringSanitized.Formats.Html, LibraryConfiguration))
+                </span>
             }
         </AddTag>
 
diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor.cs b/src/Core/Components/MessageBar/FluentMessageBar.razor.cs
@@ -70,7 +70,7 @@ public FluentMessageBar(LibraryConfiguration configuration) : base(configuration
 
     /// <summary>
     /// Gets or sets the most important info to be shown in the message bar.
-    /// You cannot format this string using HTML tags (bold, italic, etc.).
+    /// For security reasons, the content is sanitized using the configured <see cref="LibraryConfiguration.MarkupSanitized"/> before rendering.
     /// If you need to format the content, use the <see cref="ChildContent"/> parameter.
     /// </summary>
     [Parameter]
diff --git a/src/Core/Components/Progress/FluentProgressBar.razor.cs b/src/Core/Components/Progress/FluentProgressBar.razor.cs
@@ -124,9 +124,9 @@ protected override async Task OnInitializedAsync()
     private string? GetId() => HasCustomStyle ? (Id ?? _defaultId) : Id;
 
     /// <summary />
-    private MarkupString? CustomStyle() =>
+    private MarkupStringSanitized? CustomStyle() =>
         HasCustomStyle
-        ? new MarkupString($"<style>#{GetId()}::part(indicator) {{ background-color: {Color}; }}</style>")
+        ? new MarkupStringSanitized($"<style>#{GetId()}::part(indicator) {{ background-color: {Color}; }}</style>", LibraryConfiguration)
         : null;
 
     /// <summary />
diff --git a/src/Core/Components/Skeleton/FluentSkeleton.razor.cs b/src/Core/Components/Skeleton/FluentSkeleton.razor.cs
@@ -83,8 +83,8 @@ public FluentSkeleton(LibraryConfiguration configuration) : base(configuration)
     /// <summary>
     /// Generates a circular element with the specified radius.
     /// </summary>
-    /// <returns>A <see cref="MarkupString"/> containing the HTML markup for a styled circular element.</returns>
-    public MarkupString DrawCircle(string radius)
+    /// <returns>A <see cref="MarkupStringSanitized"/> containing the HTML markup for a styled circular element.</returns>
+    public MarkupStringSanitized DrawCircle(string radius)
     {
         var style = new StyleBuilder()
             .AddStyle("background-color", "var(--fluentSkeletonBackground)")
@@ -96,16 +96,16 @@ public MarkupString DrawCircle(string radius)
             .AddStyle("margin", "var(--spacingVerticalXS) var(--spacingHorizontalXS)")
             .Build();
 
-        return (MarkupString)$"<div style=\"{style}\" />";
+        return new MarkupStringSanitized($"<div style=\"{style}\" />", LibraryConfiguration);
     }
 
     /// <summary>
     /// Generates a rectangle element with the specified width and height.
     /// </summary>
     /// <param name="width">The width of the rectangle, specified as a CSS-compatible value (e.g., "100px", "50%").</param>
     /// <param name="height">The height of the rectangle, specified as a CSS-compatible value (e.g., "100px", "50%").</param>
-    /// <returns>A <see cref="MarkupString"/> containing the HTML representation of a rectangle styled with the specified dimensions.</returns>
-    public MarkupString DrawRectangle(string width, string height)
+    /// <returns>A <see cref="MarkupStringSanitized"/> containing the HTML representation of a rectangle styled with the specified dimensions.</returns>
+    public MarkupStringSanitized DrawRectangle(string width, string height)
     {
         var style = new StyleBuilder()
            .AddStyle("background-color", "var(--fluentSkeletonBackground)")
@@ -115,7 +115,7 @@ public MarkupString DrawRectangle(string width, string height)
            .AddStyle("margin", "var(--spacingVerticalXS) var(--spacingHorizontalXS)")
            .Build();
 
-        return (MarkupString)$"<div style=\"{style}\" />";
+        return new MarkupStringSanitized($"<div style=\"{style}\" />", LibraryConfiguration);
     }
 
     /// <summary />
diff --git a/src/Core/Components/TreeView/FluentTreeItem.razor.cs b/src/Core/Components/TreeView/FluentTreeItem.razor.cs
@@ -15,8 +15,8 @@ public partial class FluentTreeItem : FluentComponentBase
 {
     private const string DefaultIcon_CommonSvgAttributes = "width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" slot=\"chevron\"";
     private const string DefaultIcon_CommonSvgPath = "<path d=\"M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z\" />";
-    private static readonly MarkupString DefaultIcon_Expanded = new($" <svg expanded {DefaultIcon_CommonSvgAttributes}>{DefaultIcon_CommonSvgPath}</svg>");
-    private static readonly MarkupString DefaultIcon_Collapsed = new($"<svg collapsed {DefaultIcon_CommonSvgAttributes}>{DefaultIcon_CommonSvgPath}</svg>");
+    private static readonly MarkupStringSanitized DefaultIcon_Expanded = new($" <svg expanded {DefaultIcon_CommonSvgAttributes}>{DefaultIcon_CommonSvgPath}</svg>", isSanitized: true);
+    private static readonly MarkupStringSanitized DefaultIcon_Collapsed = new($"<svg collapsed {DefaultIcon_CommonSvgAttributes}>{DefaultIcon_CommonSvgPath}</svg>", isSanitized: true);
 
     /// <summary/>
     public FluentTreeItem(LibraryConfiguration configuration) : base(configuration)
diff --git a/src/Core/Infrastructure/LibraryConfiguration.cs b/src/Core/Infrastructure/LibraryConfiguration.cs
@@ -50,6 +50,11 @@ public class LibraryConfiguration
     /// </summary>
     public LibraryTooltipOptions Tooltip { get; } = new LibraryTooltipOptions();
 
+    /// <summary>
+    /// Gets the sanitized markup string for safe rendering in HTML/Styles contexts.
+    /// </summary>
+    public MarkupSanitizedOptions MarkupSanitized { get; } = new MarkupSanitizedOptions();
+
     /* TODO: Implement these properties
      
     /// <summary>
diff --git a/src/Core/Infrastructure/MarkupSanitizedOptions.cs b/src/Core/Infrastructure/MarkupSanitizedOptions.cs
@@ -0,0 +1,35 @@
+// ------------------------------------------------------------------------
+// This file is licensed to you under the MIT License.
+// ------------------------------------------------------------------------
+
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+/// <summary>
+/// Markup sanitization configuration options.
+/// </summary>
+public class MarkupSanitizedOptions
+{
+    /// <summary>
+    /// Gets or sets a value indicating whether an exception is thrown when an unsafe operation is detected.
+    /// </summary>
+    [System.Diagnostics.CodeAnalysis.SuppressMessage("Design", "MA0069:Non-constant static fields should not be visible", Justification = "The developer could modify this value globally.")]
+    [System.Diagnostics.CodeAnalysis.SuppressMessage("Usage", "CA2211:Non-constant fields should not be visible", Justification = "The developer could modify this value globally.")]
+    public static bool ThrowOnUnsafe = true;
+
+    /// <summary />
+    internal static readonly MarkupSanitizedOptions Default = new();
+
+    /// <summary>
+    /// Gets or sets the function used to sanitize inline CSS style attribute values before rendering.
+    /// See <see cref="MarkupStringSanitized.DefaultSanitizeInlineStyle"/> for more details.
+    /// </summary>
+    public Func<string, string> SanitizeInlineStyle { get; set; } = MarkupStringSanitized.DefaultSanitizeInlineStyle;
+
+    /// <summary>
+    /// Gets or sets the function used to sanitize HTML code values before rendering.
+    /// See <see cref="MarkupStringSanitized.DefaultSanitizeHtml"/> for more details.
+    /// </summary>
+    public Func<string, string> DefaultSanitizeHtml { get; set; } = MarkupStringSanitized.DefaultSanitizeHtml;
+}
diff --git a/src/Core/Utilities/InlineStyleBuilder.cs b/src/Core/Utilities/InlineStyleBuilder.cs
@@ -3,7 +3,6 @@
 // ------------------------------------------------------------------------
 
 using System.Diagnostics;
-using Microsoft.AspNetCore.Components;
 
 namespace Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
@@ -78,16 +77,6 @@ public InlineStyleBuilder AddStyle(string name, string prop, string? value, Func
         return $"<style>{separator}{result}{separator}</style>";
     }
 
-    /// <summary>
-    /// Finalize the completed Style as a string.
-    /// </summary>
-    /// <returns>string</returns>
-    public MarkupString BuildMarkupString()
-    {
-        var styles = Build();
-        return styles != null ? (MarkupString)styles : (MarkupString)string.Empty;
-    }
-
     /// <summary>
     /// Adds a raw string to the builder that will be concatenated with the next style or value added to the builder.
     /// </summary>
diff --git a/src/Core/Utilities/MarkupStringSanitized.cs b/src/Core/Utilities/MarkupStringSanitized.cs
diff --git a/tests/Core/Components/DateTimes/FluentCalendarTests.razor b/tests/Core/Components/DateTimes/FluentCalendarTests.razor
diff --git a/tests/Core/Utilities/InlineStyleBuilderTests.cs b/tests/Core/Utilities/InlineStyleBuilderTests.cs
diff --git a/tests/Core/Utilities/MarkupStringSanitizedTests.cs b/tests/Core/Utilities/MarkupStringSanitizedTests.cs

Original file line number	Diff line number	Diff line change
`@@ -268,14 +268,14 @@ async Task<bool> ShortCutPressedAsync(DialogOptionsFooterAction button, string s`
`268`	`268`	`private bool IsDialog() => !IsDrawer();`
`269`	`269`
`270`	`270`	`/// <summary />`
`271`		`- private MarkupString? GetDialogStyle()`
	`271`	`+ private MarkupStringSanitized? GetDialogStyle()`
`272`	`272`	`{`
`273`	`273`	`if (string.IsNullOrEmpty(StyleValue))`
`274`	`274`	`{`
`275`	`275`	`return null;`
`276`	`276`	`}`
`277`	`277`
`278`		`- return (MarkupString)$"<style>#{Id}::part(dialog) {{ {StyleValue} }}</style>";`
	`278`	`+ return new MarkupStringSanitized($"<style>#{Id}::part(dialog) {{ {StyleValue} }}</style>", LibraryConfiguration);`
`279`	`279`	`}`
`280`	`280`
`281`	`281`	`/// <summary>`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`	`}`
`17`	`17`	`else if (!string.IsNullOrEmpty(Instance?.Options.Header.Title))`
`18`	`18`	`{`
`19`		`- <div slot="@FluentSlot.DialogTitle">@((MarkupString)(Instance.Options.Header.Title))</div>`
	`19`	`+ <div slot="@FluentSlot.DialogTitle">@(new MarkupStringSanitized(Instance.Options.Header.Title, MarkupStringSanitized.Formats.Html, LibraryConfiguration))</div>`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`@* Header Action *@`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,8 @@ public class MessageBoxOptions`
`11`	`11`	`{`
`12`	`12`	`/// <summary>`
`13`	`13`	`/// Gets or sets the message to display in the dialog.`
	`14`	`+ /// The message can contain simple HTML markup for formatting.`
	`15`	`+ /// See <see cref="LibraryConfiguration.MarkupSanitized"/> for more information.`
`14`	`16`	`/// </summary>`
`15`	`17`	`public string? Message { get; set; }`
`16`	`18`
Original file line number	Diff line number	Diff line change
`@@ -12,11 +12,11 @@ public class DialogOptionsHeader`
`12`	`12`	`/// <summary />`
`13`	`13`	`public DialogOptionsHeader()`
`14`	`14`	`{`
`15`		`-`
`16`	`15`	`}`
`17`	`16`
`18`	`17`	`/// <summary>`
`19`	`18`	`/// Gets or sets the title of the dialog.`
	`19`	`+ /// For security reasons, the content is sanitized using the configured <see cref="LibraryConfiguration.MarkupSanitized"/> before rendering.`
`20`	`20`	`/// </summary>`
`21`	`21`	`public string? Title { get; set; }`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,9 @@`
`19`	`19`
`20`	`20`	`@if (!string.IsNullOrEmpty(Title))`
`21`	`21`	`{`
`22`		`- <span class="title">@Title</span>`
	`22`	`+ <span class="title">`
	`23`	`+ @(new MarkupStringSanitized(Title, MarkupStringSanitized.Formats.Html, LibraryConfiguration))`
	`24`	`+ </span>`
`23`	`25`	`}`
`24`	`26`	`</AddTag>`
`25`	`27`