Skip to main content
All docs
V25.1
  • ClientControlContentBuilderBase<TSettings, TImpl>.Nonce(String) Method

    Specifies the nonce value.

    Namespace: DevExpress.AspNetCore.Reporting

    Assembly: DevExpress.AspNetCore.Reporting.v25.1.dll

    NuGet Package: DevExpress.AspNetCore.Reporting

    Declaration

    public TImpl Nonce(
        string nonce
    )

    Parameters

    Name Type Description
    nonce String

    A string that is the nonce value

    Returns

    Type Description
    TImpl

    A builder instance that can be used to further configure the reporting component.

    Remarks

    The Nonce property enables you to implement a nonce-based Content Security Policy.

    Examples

    Document Viewer

    This example demonstrates how to implement a nonce-based Content Security Policy (CSP) for an ASP.NET Core Application through an HTTP response header:

    View Example

    In the HomeController.cs file, generate the nonce value. The RandomNumberGenerator class is used to generate cryptographically strong random values. Add an HTTP header with the Content Security Policy with nonce for the script-src directive.

    The following code snippet shows how to add a nonce-based CSP for the Document Viewer component:

    using DevExpress.AspNetCore.Reporting.WebDocumentViewer;
    using DevExpress.XtraReports.Web.WebDocumentViewer;
    using Microsoft.AspNetCore.Mvc;
    using System;
    using System.Security.Cryptography;
    using System.Threading.Tasks;
    //...
    public async Task<IActionResult> Viewer(
        [FromServices] IWebDocumentViewerClientSideModelGenerator clientSideModelGenerator,
        [FromQuery] string reportName) {
        var nonceBytes = new byte[32];
        using var generator = RandomNumberGenerator.Create();
        generator.GetBytes(nonceBytes);
        var nonce = Convert.ToBase64String(nonceBytes);
        HttpContext.Response.Headers.Add("Content-Security-Policy",
                    string.Format("script-src 'self' 'nonce-{0}';", nonce) +
                    "img-src data: https: http:;" +
                    "style-src 'self';" +
                    "connect-src 'self';" +
                    "worker-src 'self' blob:;" +
                    "frame-src 'self' blob:;"
                );
        var reportToOpen = string.IsNullOrEmpty(reportName) ? "TestReport" : reportName;
        var model = new Models.ViewerModel {
            ViewerModelToBind = await clientSideModelGenerator.GetModelAsync(reportToOpen, WebDocumentViewerController.DefaultUri),
            Nonce = nonce
        };
        return View(model);
    }
    //...
    

    The new nonce value is generated each time the page loads.

    On the page, pass the nonce value to the Nonce method:

    @*...*@
    @{
        var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
            .Height(null)
            .Width(null)
            .Nonce(Model.Nonce)
            .CssClassName("my-reporting-component")
            .Bind(Model.ViewerModelToBind);
        @viewerRender.RenderHtml()
    }
    

    Note

    Set the Height and Width to null for the application to work properly. You can specify the required height and width in a CSS class.

    Report Designer

    This example implements a nonce-based Content Security Policy (CSP) for an ASP.NET Core Application through an HTTP response header:

    View Example

    In the HomeController.cs file, generate the nonce value. The RandomNumberGenerator class is used to generate cryptographically strong random values. Add an HTTP header with the Content Security Policy with nonce for the script-src directive.

    The following code snippet adds a nonce-based CSP for the Report Designer component:

    using DevExpress.XtraReports.Web.ReportDesigner;
    using Microsoft.AspNetCore.Mvc;
    using System;
    using System.Collections.Generic;
    using System.Security.Cryptography;
    using System.Threading.Tasks;
    //...
    public async Task<IActionResult> Designer(
        [FromServices] IReportDesignerClientSideModelGenerator clientSideModelGenerator,
        [FromQuery] string reportName) {
    
        var nonceBytes = new byte[32];
        using var generator = RandomNumberGenerator.Create();
        generator.GetBytes(nonceBytes);
        var nonce = Convert.ToBase64String(nonceBytes);
    
        HttpContext.Response.Headers.Add("Content-Security-Policy",
                    string.Format("script-src 'self' 'nonce-{0}';", nonce) +
                    "img-src data: https: http:;" +
                    "style-src 'self';" +
                    "connect-src 'self';" +
                    "worker-src 'self' blob:;" +
                    "frame-src 'self' blob:;"
                );
    
        Models.ReportDesignerCustomModel model = new Models.ReportDesignerCustomModel();
        model.ReportDesignerModel = await CreateDefaultReportDesignerModel(clientSideModelGenerator, reportName, null);
        model.Nonce = nonce;
        return View(model);
    }
    //...
    

    The new nonce value is generated each time the page loads.

    On the page, pass the nonce value to the Report Designer’s Nonce method:

    @{
        var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
            .Height(null)
            .Width(null)
            .Nonce(Model.Nonce)
            .CssClassName("my-reporting-component")
            .Bind(Model.ReportDesignerModel);
        @designerRender.RenderHtml()
    }
    

    Note

    Set the Height and Width properties to null for the application to work properly. You can specify the required height and width in a CSS class.

    See Also