Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Content Security Policy for ASP.NET MVC Applications

  • 6 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 allows/disallows.

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

The following meta tag specifies the minimum required directives for DevExpress Reporting components:

html
<head>
<!--...-->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self';
    img-src data: https: http:;
    script-src 'self' 'nonce-test-random-value';
    style-src 'self' 'nonce-test-random-value';
    worker-src 'self' blob:;
    frame-src 'self' blob:;" />
<!--...-->
</head>
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' 'nonce-test-random-value';

Allows only scripts loaded from the same source as the current page protected with CSP and inline scripts with the specified nonce.

Refer to the following section for more information on how to implement a nonce-based CSP: Disallow Inline Styles and Inline Scripts.

style-src 'self' 'nonce-test-random-value';

Allows the use of stylesheets from the same source as the current page protected with CSP and inline styles with the specified nonce. Specify other sources for stylesheets that are allowed (for example, https://fonts.googleapis.com/).

Refer to the following section for more information on how to implement a nonce-based CSP: Disallow Inline Styles and Inline Scripts.

worker-src 'self' blob:;
Required for printing.
frame-src 'self' blob:;
Required for printing.

#Disallow Inline Styles and Inline Scripts (Nonce-Based CSP)

In ASP.NET MVC applications, you can implement a nonce-based CSP to remove the unsafe-inline keyword from script-src and style-src directives. The main idea behind this approach is to generate a cryptographic nonce (“number used once”), include it in policy directives, and specify a matching nonce attribute in every script/style tag. The browser only executes inline code/styles that include the correct nonce value. The nonce value should regenerate each time you reload the page.

To disable inline styles and execution of inline scripts, do the following:

  1. Generate the nonce value and pass it to the ReportDesignerSettings.Nonce / WebDocumentViewerSettings.Nonce property.

    Note

    We are using the placeholder test-random-value to denote the nonce. You need to generate a random number, unique for each HTTP request.

  2. Define a CSP on your page and add the same nonce value to both script-src and style-src directives.

    plaintext
    default-src 'self';
    img-src data: https: http:;
    script-src 'self' 'nonce-test-random-value';
    style-src 'self' 'nonce-test-random-value';
    worker-src 'self' blob:;
    frame-src 'self' blob:;
    
  3. Create a CSS class that modifies the component. The class may look as follows:

    css
    .my-reporting-component {
            height: 850px;
            width: 100%;
        }
    

The following code configures the Report Designer in an ASP.NET MVC application:

cshtml
@Html.DevExpress().ReportDesigner(settings => {
    settings.Name = "ReportDesigner1";
    settings.Nonce = "test-random-value";
    settings.ControlStyle.CssClass = "my-reporting-component";
}).BindToUrl("TestReport").GetHtml()

If you are using DevExpress Components in trial mode, the web page may display a Trial Message that violates the CSP specified for Reporting components. Add additional style-src hashes as required to avoid CSP violation errors.

#Troubleshooting

#Error: Refused to Evaluate a String as JavaScript

An application feature or component may require the unsafe-eval expression in the script-src directive. If the expression is missing, the following error may occur:

Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script…”.

You may get this error in the following cases:

The application contains ASP.NET MVC Extensions other than Web Report Designer and/or Document Viewer.
DevExpress ASP.NET MVC Extensions require the unsafe-eval expression in the script-src directive. For more information refer to the following topic: How to Use DevExpress Controls with Content Security Policy (CSP).
The application utilizes partial page updates.

Partial page updates with jQuery AJAX require the unsafe-eval expression in the script-src directive. Use the Knockout-based integration to avoid this limitation:

For more information, refer to the following topic: Content Security Policy for Knockout Applications.

#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 as follows: it generates a function as a JavaScript string and passes the string to the new Function constructor.

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

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

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

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

#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:

console
npm i @devexpress/analytics-core-cli

To process custom templates, execute the following command:

console
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):

CLI Template Utility

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