How to Use DevExpress Controls with Content Security Policy (CSP)
- 4 minutes to read
Content Security Policy (CSP) helps detect and mitigate certain attack vectors, including clickjacking, cross-site scripting (XSS), or other code injection-related attacks.
To enable CSP for DevExpress products, you need to apply platform-specific directives. Specify a Content-Security-Policy
header or use the <meta>
tag to explicitly define authorized functionality with CSP directives.
ASP.NET Web Forms and Bootstrap
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
script-src 'unsafe-inline' 'unsafe-eval' 'self';
style-src 'unsafe-inline' 'self';
img-src 'self' data:" />
ASP.NET MVC
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
script-src 'unsafe-inline' 'unsafe-eval' 'self';
style-src 'unsafe-inline' 'self';
img-src 'self' data:" />
Blazor
Blazor WebAssembly
<meta http-equiv="Content-Security-Policy"
content="base-uri 'self';
default-src 'self';
img-src data: https:;
object-src 'none';
script-src 'self'
'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='
'wasm-unsafe-eval';
style-src 'self'
'unsafe-inline';
upgrade-insecure-requests;">
Review the following topic for additional information: Content Security Policy for Blazor Apps.
Blazor Server
<meta http-equiv="Content-Security-Policy"
content="base-uri 'self';
default-src 'self';
img-src data: https:;
object-src 'none';
script-src 'self';
style-src 'self'
'unsafe-inline';
upgrade-insecure-requests;">
Read the following help topic for additional information: Content Security Policy for Blazor Apps.
BI Dashboard
The following <meta>
tag specifies the minimum required directives for the DevExpress Web BI Dashboard:
<head>
<!--...-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
img-src data: https: http:;
script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline'; "/>
<!--...-->
</head>
Blazor applications require the unsafe-eval
rule in the script-src
directive. To remove unsafe-eval
from the script-src
directive, you must remove the Knockout library (loaded by DxDashboard) and reference it globally.
In ASP.NET Core, ASP.NET MVC, ASP Web Forms, and Blazor applications, implement a nonce-based CSP to remove unsafe-inline
from script-src
and style-src
directives.
For more information, review the following platform-specific CSP help topics:
- Content Security Policy for BI Dashboard (ASP.NET Core)
- Content Security Policy for BI Dashboard (ASP.NET MVC)
- Content Security Policy for BI Dashboard (ASP.NET Web Forms)
- Content Security Policy for BI Dashboard (Blazor)
- Content Security Policy for BI Dashboard (Angular)
- Content Security Policy for BI Dashboard (React)
- Content Security Policy for BI Dashboard (Vue)
- Content Security Policy for BI Dashboard (JavaScript)
DevExtreme
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self';
img-src https://* data:;
child-src 'none';"
/>
Review the following help topic for additional information: Content Security Policy for DevExtreme-powered Applications.
DevExtreme-based ASP.NET Core Controls
Specify the <meta>
tag with directives and call the AddCspNonce(String) method:
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src https://* data:; child-src 'none';
script-src 'self' 'nonce-allowed-value';"
/>
@Html.DevExtreme().AddCspNonce("allowed-value")
@(Html.DevExtreme().Button()
.Text("Submit")
)
Review the following topic for additional information: Content Security Policy for DevExtreme-powered ASP.NET Core Applications.
Reporting
The following <meta>
tag specifies the minimum required directives for DevExpress Reports:
<head>
<!--...-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
img-src data: https: http:;
script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline';
connect-src 'self';
worker-src 'self' blob:;
frame-src 'self' blob:;" />
<!--...-->
</head>
Blazor WebAssembly applications require the unsafe-eval
rule in the script-src
directive.
In ASP.NET Core, ASP.NET MVC, and ASP.NET Web Forms applications and Blazor applications with JavaScript-based controls, you can remove unsafe-inline
from script-src
and style-src
directives.
For more information, review the following platform-specific CSP help topics:
- Content Security Policy for DevExpress Reports (ASP.NET Core)
- Content Security Policy for DevExpress Reports (ASP.NET MVC)
- Content Security Policy for DevExpress Reports (ASP.NET Web Forms)
- Content Security Policy for DevExpress Reports (Blazor)
- Content Security Policy for DevExpress Reports (Angular)
- Content Security Policy for DevExpress Reports (React)
- Content Security Policy for DevExpress Reports (Vue)
- Content Security Policy for DevExpress Reports (JavaScript)
XAF
XAF Blazor
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>
Review the following topic for additional information: Content Security Policy for XAF-powered Blazor Apps.
XAF Web Forms
Apply the following directives in the <head>
content of Default.aspx and Login.aspx files:
<head>
<!--...-->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'unsafe-inline' 'unsafe-eval' 'self';
style-src 'unsafe-inline' 'self';
img-src 'self' data:" />
<!--...-->
</head>
Review the following topic for additional information: Content Security Policy for XAF-powered Web Forms Apps.