Content Security Policy
- 4 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 Core application, you need to apply CSP directives. The list of the minimum required directives depends on components used in your application. The following sections list DevExpress ASP.NET Core components and corresponding CSP directives.
DevExtreme-Based 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
ASP.NET Core 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")
Office-Inspired Components
Rich Text Editor
Specify the <meta> tag with the following directives and call the Nonce(String) method to enable CSP for the Rich Text Editor:
<head>
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' 'nonce-allowed-value';
img-src data:"
/>
</head>
@(Html.DevExpress().RichEdit("richEdit")
.Nonce("allowed-value")
// ...
)
Note that inserting content in HTML format violates the style-src 'self' CSP directive. Add the 'unsafe-inline' keyword to the directive to allow users to paste HTML content into a document opened in the Rich Text Editor.
Spreadsheet
The following <meta> tag specifies the minimum required directives for the Spreadsheet control:
<head>
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval';
style-src 'self' 'unsafe-inline';
img-src 'self' data:"
/>
</head>
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 ASP.NET Core components ship with methods that allow you to assign nonce values to them. DevExtreme-based components implement the AddCspNonce method, while other components (except Spreadsheet) implement the Nonce 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 or Nonce 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")
)