diff --git a/blazor-toc.html b/blazor-toc.html index 7a60657a37..ea0ac0c504 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -5208,6 +5208,9 @@
  • Content Security Policy
    • +
  • + Input Sanitization +
  • 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..00c552855a --- /dev/null +++ b/blazor/common/security/input-sanitization.md @@ -0,0 +1,406 @@ +--- +layout: post +title: Input Sanitization in 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 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. + +## 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. + +### 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**, 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 Allow-listing + +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 + +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

    + + + + + + + + + + +@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 = 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 + +

    DataGrid Sanitized Editing

    + + + + + + + + + + + + + + + @{ + var ctx = (UserRecord)editContextItem; + } + + + + + + + + + + @{ + var ctx = (UserRecord)editNotesItem; + } + + + + + + + + + + + + +@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 %} + +if (!ModelState.IsValid) +{ + _logger.LogWarning("Validation failed: {@Errors}", ModelState + .Where(k => k.Value?.Errors.Count > 0) + .ToDictionary(k => k.Key, v => v.Value!.Errors.Select(e => e.ErrorMessage))); + + return BadRequest(ModelState); +} + +{% 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)