Content Security Policy
- 3 minutes to read
Content Security Policy (CSP) is a built-in browser mechanism designed to prevent external security-related threats, including Cross-Site Scripting (XSS), clickjacking, and data injection attacks. CSP is supported in most modern browsers, including Chrome, Edge, Firefox, Opera, and Safari.
To enable CSP in an ASP.NET MVC application, apply CSP directives. The list of the minimum required directives depends on components used in your application. The following sections list DevExpress ASP.NET MVC components and corresponding CSP directives.
DevExtreme-based UI Components
To enable CSP for DevExtreme-Based components, specify the <meta> tag with the following directives and call the AddCspNonce method:
<head>
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src https://* data:; child-src 'none';
script-src 'self' 'nonce-allowed-value';"
/>
</head>
@Html.DevExtreme().AddCspNonce("allowed-value")
@(Html.DevExtreme().Button()
.Text("Submit")
)
DataGrid and PivotGrid Export
DevExtreme DataGrid and PivotGrid components use the ExcelJS third-party library to export data to Excel. If you implement export functionality, include the following initialization code before ExcelJS sources:
<head>
<!-- ... -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' 'nonce-allowed-value' cdnjs.cloudflare.com;"
/>
<script nonce="allowed-value">
window.regeneratorRuntime = null;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/3.3.1/exceljs.min.js"></script>
<!-- reference the DevExtreme sources here -->
</head>
@Html.DevExtreme().AddCspNonce("allowed-value")
Map
Specify the following set of CSP directives to integrate DevExtreme-Based UI components with Google or Bing maps API:
<head>
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' https://*.googleapis.com/ https://*.gstatic.com;
script-src 'unsafe-inline' 'unsafe-eval' 'self' 'nonce-allowed-value' https://*.googleapis.com/ https://*.gstatic.com;
style-src 'unsafe-inline' 'self' https://*.googleapis.com/ https://*.gstatic.com;
img-src 'self' data: https://*.googleapis.com/ https://*.gstatic.com;"
/>
</head>
@Html.DevExtreme().AddCspNonce("allowed-value")
Reporting Controls
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>
You can implement a nonce-based CSP and remove unsafe-inline from script-src and style-src directives. Read the following topic for more information: Content Security Policy for DevExpress Reports.
Dashboard Controls
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>
You can implement a nonce-based CSP to remove the unsafe-inline keyword for script-src and style-src directives. Review the following help topic for more information: Content Security Policy for BI Dashboard (ASP.NET Core).
Use Third-Party Libraries to Obtain Nonce
Most DevExpress components ship with methods that allow you to assign nonce values to them. DevExtreme-based components implement the AddCspNonce method.
You can use a third-party library to build a CSP configuration and generate nonce values. In this case, pass a generated nonce value to the AddCspNonce method to implement a nonce-based CSP for your application. The example below uses Joonasw.AspNetCore.SecurityHeaders to generate unique nonce values for DevExtreme-based components:
@inject Joonasw.AspNetCore.SecurityHeaders.Csp.ICspNonceService NonceService
@Html.DevExtreme().AddCspNonce(NonceService.GetNonce())
@(Html.DevExtreme().Button()
.Text("Submit")
)