Skip to main content

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