Content Security Policy
- 2 minutes to read
A Content Security Policy (CSP) is a built-in browser mechanism that helps you to prevent certain types of attacks on your web application, including Cross-Site Scripting (XSS), clickjacking, and data injection attacks. CSP is supported in most modern browsers, including Chrome, Edge, Firefox, Opera, Safari, and mobile browsers.
To enable CSP protection, specify a Content-Security-Policy
header or use the <meta>
tag and explicitly define authorized functionality with CSP directives, such as allowed scripts and styles, and external domains to load resources.
The Blazor framework declares two lists of CSP directives: for Blazor WebAssembly and Blazor Server. The DevExpress Blazor components require almost the same policies with the following differences:
- Our components do not require Bootstrap scripts and styles delivered by the Bootstrap CDN. You can exclude the
https://stackpath.bootstrapcdn.com/
host source from thescript-src
andstyle-src
directives. - In some scenarios, Blazor Server requires you to specify additional directives. For more information see the following section: Additional Requirements.
Blazor WebAssembly
Apply the following directives in the <head>
content or in the Content-Security-Policy
header of the wwwroot/index.html
host page:
<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'
'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='
'unsafe-eval';
style-src 'self'
'unsafe-inline';
upgrade-insecure-requests;">
Blazor Server
Apply the following directives in the <head>
content or in the Content-Security-Policy
header of the Pages/_Host.cshtml
page:
<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;">
Additional Requirements
- If you use the client-side editor masks, you must add the
unsafe-eval
rule in thescript-src
directive, because WebAssembly requires this rule. If you use the Blazor Reports Viewer (JavaScript Based) or Blazor Reports Designer (JavaScript Based) component, you must add the
unsafe-eval
rule in thescript-src
directive, because these components use KnockoutJS that requires the eval functionality.<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' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; worker-src 'self' blob:; frame-src 'self' blob:; upgrade-insecure-requests;"> ```
If you use the report printing functionality, you must add the
blob
rule in theworker-src
directive.<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' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; worker-src: blob:; upgrade-insecure-requests;">