Skip to main content
BuyLog In
XAF: Cross-Platform .NET App UI & Web API
Search in…
Docs > Application Security and Data Safety > Security Considerations > Content Security Policy (CSP) in XAF Blazor Apps
All docs
V24.2
.NET 8.0+
XAF: Cross-Platform .NET App UI & Web API
.NET Support and Migration
Getting Started
Installation, Upgrade, Version History
Backend Web API Service
UI Shell and Base Infrastructure
Storage, ORM, and Business Model Design
Data Manipulation and Business Logic
User Interface and Behavior Customization
Data Filtering
Application Security and Data Safety
Security (Access Control & Authentication)
Security Considerations
General Security Considerations
Content Security Policy (CSP) in XAF Blazor Apps
Content Security Policy (CSP) in XAF Web Forms Apps
Audit Trail (History of Data Changes)
Multi-Tenancy (Data per Tenant)
Validation (Prevent Data Errors)
Conditional Appearance (Manage State of UI Elements)
Reporting (Shape, Export & Print Data)
Analytics (Extract Data Insights)
Document Management
Business Process Management
Event Planning
Localization
Accessibility Support
Debugging, Testing and Error Handling
Deployment
Support, QA & Troubleshooting
API Reference
Download CHM

Content Security Policy (CSP) in XAF Blazor Apps

  • 3 minutes to read

Content Security Policy (CSP) is a built-in browser mechanism that helps you protect your web application against certain types of attacks, such as Cross-Site Scripting (XSS), clickjacking, and data injection. CSP is supported in most modern browsers, including Chrome, Edge, Firefox, Opera, Safari, and mobile browsers. For more information on how to use the Content Security Policy with an ASP.NET Core Blazor application, refer to the following Microsoft topic: Enforce a Content Security Policy for ASP.NET Core Blazor.

To enable CSP protection, specify a Content-Security-Policy header or use the <meta> tag and explicitly define authorized functionality with CSP directives. You can list allowed scripts, styles, and external domains that store required resources. Apply the following directives in the <head> content of the Pages/_Host.cshtml file:

<head>
    <!--...-->
    <meta http-equiv="Content-Security-Policy"
        content="base-uri 'self';
        block-all-mixed-content;
        default-src 'self';
        img-src data: https:;
        object-src 'none';
        script-src 'self';
        style-src 'self' 'unsafe-inline';
        upgrade-insecure-requests;">
    <!--...-->
</head>

For more information on each directive, refer to the following section: Content-Security-Policy: Directives.

Reports Module

If you use the Reports Module, list the following directives in the <head> section of the Pages/_Host.cshtml file. These directives allow print operations.

<head>
    <!--...-->
    <meta http-equiv="Content-Security-Policy"
        content="base-uri 'self';
        block-all-mixed-content;
        default-src 'self';
        img-src data: https:;
        object-src 'none';
        script-src 'self';
        style-src 'self' 'unsafe-inline';
        worker-src 'self' blob:;
        frame-src 'self' blob:;
        upgrade-insecure-requests;">
    <!--...-->
</head>

For more information about CSP support in Reports, refer to the following topic: Reports - Content Security Policy.

Dashboards Module

If you use the Dashboards Module, add the unsafe-eval rule to the script-src directive (the <head> section of the Pages/_Host.cshtml file):

<head>
    <!--...-->
    <meta http-equiv="Content-Security-Policy"
        content="base-uri 'self';
        block-all-mixed-content;
        default-src 'self';
        img-src data: https:;
        object-src 'none';
        script-src 'self' 'unsafe-eval';
        style-src 'self' 'unsafe-inline';
        upgrade-insecure-requests;">
    <!--...-->
</head>

Avoid the “unsafe-eval” Rule

To remove the unsafe-eval keyword from the script-src directive, remove the Knockout library loaded by the DxDashboard and reference it globally.

To do this in an XAF Blazor application, follow the steps below:

  1. Create a ViewController and handle the OnScriptsLoading event to remove the Knockout library:

    using DevExpress.DashboardBlazor;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Dashboards.Blazor.Components;
using Microsoft.AspNetCore.Components;

public class RemoveKnockoutController : ViewController<DetailView> {
    protected override void OnActivated() {
        base.OnActivated();
        View.CustomizeViewItemControl<BlazorDashboardViewerViewItem>(this, CustomizeDashboardViewerViewItem);
    }

    private void CustomizeDashboardViewerViewItem(BlazorDashboardViewerViewItem dashboardViewItem) {
        dashboardViewItem.JSCustomizationModel.OnScriptsLoading =
        EventCallback.Factory.Create<ScriptsLoadingEventArgs>(this, OnScriptsLoading);
    }

    private void OnScriptsLoading(ScriptsLoadingEventArgs args) {
        args.Scripts.Remove(ScriptIdentifiers.Knockout);
    }
}

  2. Add a global reference to the Knockout library to the _Host.cshtml file:

    <head>
    @*...*@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
    @*...*@
</head>

  3. Remove the unsafe-eval rule and allow scripts from https://cdnjs.cloudflare.com/ (the <head> section of the Pages/_Host.cshtml file):

    <head>
    <!--...-->
    <meta http-equiv="Content-Security-Policy"
        content="base-uri 'self';
        block-all-mixed-content;
        default-src 'self';
        img-src data: https:;
        object-src 'none';
        script-src 'self' https://cdnjs.cloudflare.com/;
        style-src 'self' 'unsafe-inline';
        upgrade-insecure-requests;">
    <!--...-->
</head>

For more information about CSP support in Dashboards, refer to the following topic: Dashboards - Content Security Policy.

See Also