Skip to main content
BuyLog In
Blazor
Search in…
Docs > Common Concepts > Content Security Policy
A newer version of this page is available. .
All docs
V21.2
Blazor Components
Prerequisites
Supported Browsers
Get Started
Troubleshooting
Demos
Videos
Common Concepts
Two-Way Data Binding
Update Data in Data-Bound Components
Localization
Customize Appearance
Add Components to the Toolbox
Reuse and Customize Components
Add DevExtreme Widgets to an Application
Content Security Policy
Validate User Input
Bind Components to Data with Entity Framework Core
Redistribution and Deployment
Grid
Pivot Grid
Charts
Reports
Scheduler
Rich Text Editor
Data Editors
Buttons
Navigation and Layout
File Management
Dashboard
XAF (App UI & Security API)
Maintenance Mode
API Reference
Download CHM

Content Security Policy

  • 2 minutes to read

A Content Security Policy (CSP) is a built-in browser mechanism that helps you to prevent certain types of attacks on your web application, including Cross-Site Scripting (XSS), clickjacking, and data injection attacks. CSP is supported in most modern browsers, including Chrome, Edge, Firefox, Opera, Safari, and mobile browsers.

To enable CSP protection, specify a Content-Security-Policy header or use the <meta> tag and explicitly define authorized functionality with CSP directives, such as allowed scripts and styles, and external domains to load resources.

The Blazor framework declares two lists of CSP directives: for Blazor WebAssembly and Blazor Server. The DevExpress Blazor components require almost the same policies with the following differences:

  • Our components do not require Bootstrap scripts and styles delivered by the Bootstrap CDN. You can exclude the https://stackpath.bootstrapcdn.com/ host source from the script-src and style-src directives.
  • In some scenarios, Blazor Server requires you to specify additional directives. For more information see the following section: Additional Requirements.

Blazor WebAssembly

Apply the following directives in the <head> content or in the Content-Security-Policy header of the wwwroot/index.html host page:

<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'
                          'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='
                          'unsafe-eval';
               style-src 'self'
                         'unsafe-inline';
               upgrade-insecure-requests;">

Blazor Server

Apply the following directives in the <head> content or in the Content-Security-Policy header of the Pages/_Host.cshtml host page:

<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;">

Additional Requirements

  • If you use the client-side editor masks, you must add the unsafe-eval rule in the script-src directive, because WebAssembly requires this rule.

  • If you use the Blazor Reports Viewer (JavaScript Based) or Blazor Reports Designer (JavaScript Based) component, you must add the unsafe-eval rule in the script-src directive, because these components use KnockoutJS that requires the eval functionality.

    <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';
               worker-src 'self' 
                         blob:;
               frame-src 'self' 
                         blob:;
               upgrade-insecure-requests;">
  ```

  • If you use the report printing functionality, you must add the blob rule in the worker-src directive.

    <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';
               worker-src: blob:; 
               upgrade-insecure-requests;">