Performance and Scalability
diff --git a/blazor/common/security/input-sanitization.md b/blazor/common/security/input-sanitization.md
new file mode 100644
index 0000000000..f4b97faf0f
--- /dev/null
+++ b/blazor/common/security/input-sanitization.md
@@ -0,0 +1,414 @@
+---
+layout: post
+title: Input Sanitization in Syncfusion Blazor Components
+description: Learn how to implement secure input sanitization when using Syncfusion Blazor components.
+platform: Blazor
+control: Common
+documentation: ug
+---
+
+# Input Sanitization in Syncfusion Blazor Components
+
+Input sanitization protects applications from malformed or malicious user input by validating, cleaning, and transforming data before it is processed. Syncfusion Blazor components provide rich client‑side validation capabilities, but all input must still be validated and sanitized on the server to maintain a complete security boundary. This guide explains how to implement secure and consistent input sanitization patterns when working with Syncfusion Blazor components.
+
+## Validation Principles
+
+### Validate on the Client
+
+Client-side validation improves the user experience by providing immediate feedback and reducing unnecessary server calls. Syncfusion components offer built‑in features such as `MaxLength`, `masked input`, and `form‑bound validation`. These client-side checks help users correct mistakes early, but they should never be considered authoritative.
+
+### Revalidate on the Server
+
+Server-side validation must always be performed regardless of the client’s behavior. The server should enforce rules using **DataAnnotations**, allowlists, HTML sanitization libraries, and `ModelState` validation. Even if the client reports valid data, the server must treat all inputs as untrusted.
+
+### Canonicalize Inputs
+
+Before validation, normalize incoming data—trim whitespace, normalize Unicode, decode entities, and standardize encodings. Canonicalizing inputs prevents attackers from exploiting encoded variations or visually deceptive input forms.
+
+### Prefer Allowlisting
+
+Whenever possible, define explicitly which characters, MIME types, or data formats are allowed. Blocklisting harmful patterns is incomplete and bypassable, whereas allowlisting offers predictable and secure boundaries.
+
+## DataAnnotations Model Validation
+
+Syncfusion Blazor components integrate seamlessly with Blazor's **DataAnnotations** system. Below is a typical validation model:
+
+{% tabs %}
+{% highlight c# %}
+
+using System.ComponentModel.DataAnnotations;
+
+public class UserModel
+{
+ [Required(ErrorMessage = "Username is required.")]
+ [StringLength(24, MinimumLength = 3)]
+ [RegularExpression(@"^[A-Za-z0-9_]+$", ErrorMessage = "Only letters, digits, and underscore.")]
+ public string UserName { get; set; } = string.Empty;
+
+ [Required(ErrorMessage = "Enter a valid email address.")]
+ [EmailAddress]
+ [StringLength(128)]
+ public string Email { get; set; } = string.Empty;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Client-Side Validation in Syncfusion Editors
+
+Syncfusion components integrate naturally with Blazor’s form validation and give immediate visual cues when users input invalid data.
+
+### Text Input Example
+
+{% tabs %}
+{% highlight razor %}
+
+
+
+@code {
+ private string topUserName { get; set; } = string.Empty;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Form-Level Validation Example
+
+{% tabs %}
+{% highlight razor %}
+
+@page "/"
+@rendermode InteractiveServer
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Components.Forms
+@using Syncfusion.Blazor.Inputs
+
+
Edit form validation
+
+
+
+
+
+
+
+
+
+
+
+
+@using Microsoft.AspNetCore.Components.Forms
+
+@code {
+ public class UserRecord
+ {
+ [Required]
+ [StringLength(24, MinimumLength = 3)]
+ [RegularExpression(@"^[A-Za-z0-9_]+$")]
+ public string UserName { get; set; } = string.Empty;
+
+ [Required, EmailAddress]
+ [StringLength(128)]
+ public string Email { get; set; } = string.Empty;
+ }
+
+ // The model instance used by the form
+ private UserRecord formModel { get; } = new();
+
+ // The EditContext wrapping the model
+ private EditContext editContext = default!;
+
+ protected override void OnInitialized()
+ {
+ editContext = new EditContext(formModel);
+ }
+
+ private Task OnSubmit()
+ {
+ // formModel has the validated values
+ return Task.CompletedTask;
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Secure File Upload Patterns
+
+Syncfusion's **Uploader** component offers client-side validation for file type and file size, but server-side checks must still be implemented.
+
+{% tabs %}
+{% highlight razor %}
+
+@page "/"
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Components.Forms
+@using Syncfusion.Blazor.Inputs
+@rendermode InteractiveServer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ // Make sure the type name matches the component (no namespace mismatch)
+ private SfUploader UploadObj;
+
+ public class Employee
+ {
+ [Required(ErrorMessage = "Please enter your name")]
+ public string EmpID { get; set; } = string.Empty;
+
+ [Required(ErrorMessage = "Please upload a file")]
+ public List? files { get; set; }
+ }
+
+ public Employee employee = new();
+
+ // Called when a file is selected
+ public void OnSelect(SelectedEventArgs args)
+ {
+ if (args.FilesData?.Count > 0)
+ {
+ employee.files = new List
+ {
+ new UploaderUploadedFiles {
+ Name = args.FilesData[0].Name,
+ Type = args.FilesData[0].Type,
+ Size = args.FilesData[0].Size
+ }
+ };
+ }
+ }
+
+ // Called when the file list changes; save files to disk here
+ private async Task OnChange(UploadChangeEventArgs args)
+ {
+ foreach (var file in args.Files)
+ {
+ if (file.FileInfo is not null && file.File is not null)
+ {
+ var path = file.FileInfo.Name; // ✅ Consider a safe path: Path.Combine(_env.WebRootPath, "uploads", file.FileInfo.Name)
+ using var filestream = new FileStream(path, FileMode.Create, FileAccess.Write);
+ await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream);
+ }
+ }
+ }
+
+ // Called when the user removes a file
+ public void OnRemove(RemovingEventArgs _)
+ {
+ employee.files = null;
+ }
+
+ public Task HandleValidSubmit()
+ {
+ // No programmatic Upload call needed; files are already saved in OnChange.
+ return Task.CompletedTask;
+ }
+
+ public Task HandleInvalidSubmit(EditContext _)
+ {
+ // No programmatic Upload call needed.
+ return Task.CompletedTask;
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+## Sanitizing HTML from Syncfusion Rich Text Editor
+
+Syncfusion's Rich Text Editor sanitizes content on the client, but developers must also sanitize HTML again on the server before storing or re-rendering it.
+
+### Client-Side HTML Sanitization
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.RichTextEditor
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Sanitized Editing in DataGrid
+
+The following example demonstrates sanitization patterns in a Syncfusion **DataGrid**. Inline editors use DataAnnotations for safe text entry, and the Rich Text Editor column sanitizes HTML both on the client and server.
+
+{% tabs %}
+{% highlight razor %}
+
+@page "/"
+
+@rendermode InteractiveServer
+@using System.ComponentModel.DataAnnotations
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Inputs
+@using Syncfusion.Blazor.RichTextEditor
+@inject ILogger Logger
+
+
+
+
+
+
+
+
+
+@code {
+ public class UserRecord
+ {
+ public int Id { get; set; }
+
+ [Required(ErrorMessage = "Username is required.")]
+ [StringLength(24, MinimumLength = 3, ErrorMessage = "Username must be 3–24 characters.")]
+ [RegularExpression(@"^[A-Za-z0-9_]+$", ErrorMessage = "Only letters, digits, and underscore are allowed.")]
+ public string UserName { get; set; } = string.Empty;
+
+ [Required, EmailAddress(ErrorMessage = "Enter a valid email address.")]
+ [StringLength(128)]
+ public string Email { get; set; } = string.Empty;
+
+ [StringLength(2000, ErrorMessage = "Notes cannot exceed 2000 characters.")]
+ public string? NotesHtml { get; set; }
+ }
+
+ private List Users = new()
+ {
+ new UserRecord { Id = 1, UserName = "alice_01", Email = "alice@example.com", NotesHtml = "
Hello
" },
+ new UserRecord { Id = 2, UserName = "bob_02", Email = "bob@example.com", NotesHtml = "
Team lead
" }
+ };
+
+ private EditContext editContext;
+
+ protected override void OnInitialized()
+ {
+ editContext = new EditContext(new UserRecord());
+ }
+
+ private Task OnValidSubmit()
+ {
+ // Server operations: canonicalize, validate, sanitize HTML again, then persist.
+ return Task.CompletedTask;
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Logging and Rejecting Malformed Payloads
+
+Reject invalid models and log structured details for security monitoring. Log anomalies (e.g., repeated failed validations, suspicious payload shapes) at appropriate levels and avoid storing raw malicious input without redaction.
+
+{% tabs %}
+{% highlight razor %}
+
+if (!ModelState.IsValid)
+{
+ _logger.LogWarning("Validation failed: {@Errors}", ModelState
+ .Where(kvp => kvp.Value?.Errors.Count > 0)
+ .ToDictionary(k => k.Key, v => v.Value!.Errors.Select(e => e.ErrorMessage)));
+
+ return BadRequest(ModelState);
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+Logging validation failures provides visibility into suspicious behavior while preventing harmful data from entering the system.
+
+## See also
+
+[Data Annotation in Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/data-annotation)
+[Xhtml validation in Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/xhtml-validation)
+[Create Edit Forms with FluentValidation and Syncfusion® Blazor Components](https://www.syncfusion.com/blogs/post/create-edit-forms-with-fluentvalidation-and-syncfusion-blazor-components)
From 3df038111778d78cac298ac835343505641fceb6 Mon Sep 17 00:00:00 2001
From: ponselvajeganathan
<68591831+ponselvajeganathan@users.noreply.github.com>
Date: Mon, 2 Mar 2026 19:42:53 +0530
Subject: [PATCH 2/5] 1011008: updated
---
blazor/common/security/input-sanitization.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/blazor/common/security/input-sanitization.md b/blazor/common/security/input-sanitization.md
index f4b97faf0f..d0a4533e96 100644
--- a/blazor/common/security/input-sanitization.md
+++ b/blazor/common/security/input-sanitization.md
@@ -1,13 +1,13 @@
---
layout: post
title: Input Sanitization in Syncfusion Blazor Components
-description: Learn how to implement secure input sanitization when using Syncfusion Blazor components.
+description: Discover effective techniques for securely sanitizing user input in Syncfusion Blazor components to protect your application from unsafe data.
platform: Blazor
control: Common
documentation: ug
---
-# Input Sanitization in Syncfusion Blazor Components
+# Input Sanitization with Syncfusion Blazor Components
Input sanitization protects applications from malformed or malicious user input by validating, cleaning, and transforming data before it is processed. Syncfusion Blazor components provide rich client‑side validation capabilities, but all input must still be validated and sanitized on the server to maintain a complete security boundary. This guide explains how to implement secure and consistent input sanitization patterns when working with Syncfusion Blazor components.
From 2da0e9a75e5f795111e058c0c03f2ddffd2cfbdb Mon Sep 17 00:00:00 2001
From: ponselvajeganathan
<68591831+ponselvajeganathan@users.noreply.github.com>
Date: Tue, 3 Mar 2026 12:29:31 +0530
Subject: [PATCH 3/5] 1011008: Modify
---
blazor/common/security/input-sanitization.md | 19 ++++++-------------
1 file changed, 6 insertions(+), 13 deletions(-)
diff --git a/blazor/common/security/input-sanitization.md b/blazor/common/security/input-sanitization.md
index d0a4533e96..751eafd79d 100644
--- a/blazor/common/security/input-sanitization.md
+++ b/blazor/common/security/input-sanitization.md
@@ -17,17 +17,17 @@ Input sanitization protects applications from malformed or malicious user input
Client-side validation improves the user experience by providing immediate feedback and reducing unnecessary server calls. Syncfusion components offer built‑in features such as `MaxLength`, `masked input`, and `form‑bound validation`. These client-side checks help users correct mistakes early, but they should never be considered authoritative.
-### Revalidate on the Server
+### Re-validate on the Server
-Server-side validation must always be performed regardless of the client’s behavior. The server should enforce rules using **DataAnnotations**, allowlists, HTML sanitization libraries, and `ModelState` validation. Even if the client reports valid data, the server must treat all inputs as untrusted.
+Server-side validation must always be performed regardless of the client’s behavior. The server should enforce rules using **DataAnnotations**, allow-lists, HTML sanitization libraries, and `ModelState` validation. Even if the client reports valid data, the server must treat all inputs as untrusted.
### Canonicalize Inputs
Before validation, normalize incoming data—trim whitespace, normalize Unicode, decode entities, and standardize encodings. Canonicalizing inputs prevents attackers from exploiting encoded variations or visually deceptive input forms.
-### Prefer Allowlisting
+### Prefer Allow-listing
-Whenever possible, define explicitly which characters, MIME types, or data formats are allowed. Blocklisting harmful patterns is incomplete and bypassable, whereas allowlisting offers predictable and secure boundaries.
+Whenever possible, define explicitly which characters, MIME types, or data formats are allowed. Block-listing harmful patterns is incomplete and by-passable, whereas allow-listing offers predictable and secure boundaries.
## DataAnnotations Model Validation
@@ -88,16 +88,12 @@ Syncfusion components integrate naturally with Blazor’s form validation and gi
-
-
-@using Microsoft.AspNetCore.Components.Forms
-
@code {
public class UserRecord
{
@@ -206,7 +202,7 @@ Syncfusion's **Uploader** component offers client-side validation for file type
{
if (file.FileInfo is not null && file.File is not null)
{
- var path = file.FileInfo.Name; // ✅ Consider a safe path: Path.Combine(_env.WebRootPath, "uploads", file.FileInfo.Name)
+ var path = Path.Combine(_env.WebRootPath, "uploads", file.FileInfo.Name)
using var filestream = new FileStream(path, FileMode.Create, FileAccess.Write);
await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream);
}
@@ -333,10 +329,9 @@ The following example demonstrates sanitization patterns in a Syncfusion **DataG
@{
var item = (UserRecord)itemContext;
- var sanitized = item?.NotesHtml ?? string.Empty; // rely on Syncfusion RTE sanitizer
}