Content Security Policy for Blazor Applications

• Dec 01, 2023
• 7 minutes to read

A Content Security Policy (CSP) is an additional layer of security built into most modern browsers. It allows the browser to recognize and mitigate certain types of risks, including Cross Site Scripting (XSS) and data injection attacks. These attacks include, but are not limited to, data theft, page spoofing, and malware distribution.

The CSP defines a list of policies/directives and initial values that specify which resources your site will allow/disallow.

To enable CSP, specify a Content-Security-Policy header or use the <meta> tag to explicitly define authorized functionality with CSP directives.

Native Report Viewer

Blazor Server

The following meta tag specifies minimum required directives for the Native Report Viewer in a Blazor Server application:

<meta http-equiv="Content-Security-Policy" content="default-src 'self';
    img-src data: https: http:;
    script-src 'self';
    style-src 'self' 'unsafe-inline';
    connect-src 'self';
    worker-src 'self' blob:;
    frame-src 'self' blob:;" />

default-src 'self';

Fallback for other fetch directives.

img-src data: https: http:;

Allows components to load specific images and document pages.

script-src 'self';

Allows only scripts loaded from the same source as the current page protected with CSP.

style-src 'self' 'unsafe-inline';

Allows the use of inline style elements.

connect-src 'self'

Restricts URLs that can be loaded using script interfaces.

worker-src 'self' blob:;

Required for printing.

frame-src 'self' blob: (optional) http:my_backend_url;

Required for printing. The optional my_backend_url value specifies the server endpoint. This is necessary if client and server applications have different URLs.

Blazor WebAssembly

The following meta tag specifies minimum required directives for the Native Report Viewer in a Blazor WebAssembly application:

<meta http-equiv="Content-Security-Policy" content="default-src 'self';
    img-src data: https: http:;
    script-src 'self' 'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA=' 'unsafe-eval';
    style-src 'self' 'unsafe-inline';
    connect-src 'self';
    worker-src 'self' blob:;
    frame-src 'self' blob:;" />

default-src 'self';

Fallback for other fetch directives.

img-src data: https: http:;

Allows components to load specific images and document pages.

script-src 'self' 'unsafe-eval';

Allows the use of inline scripts and script execution methods that create code from strings.

style-src 'self' 'unsafe-inline';

Allows the use of inline style elements.

connect-src 'self'

Restricts URLs that can be loaded using script interfaces.

worker-src 'self' blob:;

Required for printing.

frame-src 'self' blob: (optional) http:my_backend_url;

Required for printing. The optional my_backend_url value specifies the server endpoint. This is necessary if client and server applications have different URLs.

Report Designer and Document Viewer (JavaScript-Based)

Blazor Server

The following meta tag specifies minimum required directives for Report Designer and Document Viewer (JavaScript-Based) in a Blazor Server application:

<meta http-equiv="Content-Security-Policy" content="default-src 'self';
    img-src data: https: http:;
    script-src 'self';
    style-src 'self' 'unsafe-inline';
    connect-src 'self';
    worker-src 'self' blob:;
    frame-src 'self' blob:;" />

default-src 'self';

Fallback for other fetch directives.

img-src data: https: http:;

Allows components to load specific images and document pages.

script-src 'self';

Allows only scripts loaded from the same source as the current page protected with CSP.

style-src 'self' 'unsafe-inline';

Allows the use of inline style elements.

You can remove the unsafe-inline keyword for the style-src directive. For more information, refer to the following section: Disallow Inline Styles.

connect-src 'self' (optional) http:my_backend_url;

The optional my_backend_url value specifies the server endpoint. This is necessary for JavaScript-based reporting apps when client and server applications have different URLs.

worker-src 'self' blob:;

Required for printing.

frame-src 'self' blob: (optional) http:my_backend_url;

Required for printing. The optional my_backend_url value specifies the server endpoint. This is necessary if client and server applications have different URLs.

Blazor WebAssembly

The following meta tag specifies minimum required directives for Report Designer and Document Viewer (JavaScript-based) in a Blazor WebAssembly application:

<meta http-equiv="Content-Security-Policy" content="default-src 'self';
    img-src data: https: http:;
    script-src 'self' 'unsafe-eval' 'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA=';
    style-src 'self' 'unsafe-inline';
    connect-src 'self';
    worker-src 'self' blob:;
    frame-src 'self' blob:;" />

default-src 'self';

Fallback for other fetch directives.

img-src data: https: http:;

Allows components to load specific images and document pages.

script-src 'self';

Allows only scripts loaded from the same source as the current page protected with CSP.

style-src 'self' 'unsafe-inline';

Allows the use of inline style elements.

You can remove the unsafe-inline keyword for the style-src directive. For more information, refer to the following section: Disallow Inline Styles.

connect-src 'self' (optional) http:my_backend_url;

The optional my_backend_url value specifies the server endpoint. This is necessary for JavaScript-based reporting apps when client and server applications have different URLs.

worker-src 'self' blob:;

Required for printing.

frame-src 'self' blob: (optional) http:my_backend_url;

Required for printing. The optional my_backend_url value specifies the server endpoint. This is necessary if client and server applications have different URLs.

Disallow Inline Styles

To remove the unsafe-inline keyword for the style-src directive, set the Height and Width properties of the DxDocumentViewer / DxWasmDocumentViewer and DxReportDesigner / DxWasmReportDesigner to null. You can specify the required height and width in a CSS class.

The following code snippets show how to set Height and Width properties of the DxDocumentViewer to null and use a CSS class:

DocumentViewer.razor

@page "/documentviewer"

<DxDocumentViewer ReportName="TestReport" Height="@null" Width="@null" CssClass="my-reporting-element-container">
    <DxDocumentViewerTabPanelSettings Width="340" />
</DxDocumentViewer>

You can define a CSS class as follows:

site.css

/*...*/
.dx-blazor-reporting .dx-designer.my-reporting-element-container {
    width: 100%;
    height: calc(100vh - 130px);
}

Troubleshooting

Error with ‘unsafe-eval’ Directive

The use strict directive in scripts may generate a “Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script…” error.

To address this error, include the Knockout library in the global scope and use an alias to reference the library.

Custom Templates Do Not Work

DevExpress Reporting custom templates are based on the Knockout JavaScript library. The Knockout library uses the data-bind attribute to render a value in the following manner: it generates a function as a JavaScript string and passes the string to the new Function constructor.

To function properly, Knockout templates require the script-src 'unsafe-eval' CSP directive.

Important

We do not recommend the inclusion of the script-src 'unsafe-eval' directive in your content security policy. This directive may introduce a vulnerability as it enables script execution from a string on your page.

DevExpress Reporting stores JavaScript functions related to data-bind attributes in the cache, thus eliminating the need to run the script on the page. Our components do not need the ‘unsafe-eval’ directive.

Follow the steps below to use custom templates.

Call the addToBindingsCache Function

To add a custom template to the function cache, call the addToBindingsCache function before the component is rendered. You can handle the BeforeRender event to call the function.

• Example: DevExtreme Template

  DevExtreme Template

  <div data-options="dxTemplate: { name: 'content' }"></div>
  

  Function

  DevExpress.Analytics.Utils.addToBindingsCache('dxTemplate: { name: \'content\' }', function () { return { dxTemplate: { name: 'content' } } });
  

• Example: Knockout Binding

  DevExtreme Template

  <div data-bind="text: text, attr: { title: text }"></div>
  

  Function

  DevExpress.Analytics.Utils.addToBindingsCache('text: text, attr: { title: text }', function($context,$element) {
  return {
      'text':function(){ 
          return $context.$data.text 
      },
      'attr':function(){ 
          return {
              'title':$context.$data.text
              } 
          }
      } 
  });
  

Use the CLI Utility

v22.2 and later ships with our @devexpress/analytics-core-cli CLI utility package. It includes the processBindings command. You can use this command to automatically generate a file with the code that calls the addToBindingsCache function to add your templates to the cache.

Run the following command to install the package:

npm i @devexpress/analytics-core-cli

To process custom templates, execute the following command:

node node_modules/@devexpress/analytics-core-cli/utils/processBindings <templates folder path> <result file path>

Command parameters are as follows:

templates folder path

A folder that contains template files (.HTML)

result file path

Path to the file being created

When prompted, select application type (Modules or Namespaces):

The generated file contains JavaScript code that must be run in the DevExpress Reporting component’s BeforeRender event handler.