Security Policy

You can set the Content Security Policy header as a response header. You can also configure a report submission endpoint to send violation information to the server when unauthorized resources are loaded. This feature was added in [v3.3.0].

Caution

• Enabling CSP may block scenarios if they violate the policy.
  It is recommended to thoroughly test in a development environment before enabling in production.

Security Policy

You can enable the security policy by setting it to Enabled and deploying the application.

CSP Directives

You can allow the browser to load content. The following settings are available by default:

No	Directive	Value
1	default-src	’self’
2	script-src	’self’ ‘wasm-unsafe-eval’ cdn.dhtmlx.com
3	connect-src	’self’ ‘wasm-unsafe-eval’ cdn.dhtmlx.com
4	font-src	’self’ ‘wasm-unsafe-eval’ cdn.dhtmlx.com
5	object-src	’self’ *.webperformer.jp
6	frame-src	www.google.com www.gstatic.com
7	img-src	’self’ data: *.webperformer.jp
8	style-src	’self’ ‘unsafe-inline’ fonts.googleapis.com cdn.dhtmlx.com
9	frame-ancestors	’none’
10	worker-src	’self’ blob:

Note

• When loading external images, add the allowed domain to the img-src directive.
• Directive options and examples are as follows:

No	Category	Directive	Description	Typical Examples
1	Resource Loading Control	default-src	Default source restriction when no explicit directive is specified	’self’
2		script-src	JavaScript source	’self’ https://cdn.example.com
3		style-src	CSS source	’self’ ‘unsafe-inline’
4		img-src	Image source	’self’ data:
5		font-src	Web font source	’self’ https://fonts.gstatic.com
6		connect-src	XHR / fetch / WebSocket / EventSource connection destination	’self’ https://api.example.com
7		media-src	<audio> / <video> / <track> source	’self’
8		object-src	<object> / <embed> / <applet> source	’none’
9		frame-src	<frame> / <iframe> source	’self’ https://player.vimeo.com
10		worker-src	Web Workers / Shared Workers source	’self’
11		manifest-src	Web App Manifest (manifest.json) source	’self’
12	Document Control	base-uri	URI restriction for <base> element	’self’
13		form-action	Restrict <form action> submission destination	’self’
14		frame-ancestors	Restrict domains that can embed this page in <frame> / <iframe>	’none’
15		sandbox	Apply HTML5 sandbox attributes to the entire page	allow-scripts allow-same-origin
16	Script Control	script-src-elem	Script source control from <script> elements (CSP Level 3)	‘self’
17		script-src-attr	Control HTML attribute scripts like onclick (CSP Level 3)	‘none’
18		style-src-elem	External loading of <link rel="stylesheet"> or <style>	’self’
19		style-src-attr	Inline CSS like style="..."	’none’
20	Security Enhancement	require-trusted-types-for	Enforce Trusted Types API	’script’
21		trusted-types	Define Trusted Types policy	default
22		upgrade-insecure-requests	Automatically upgrade HTTP requests to HTTPS	{no value}
23		report-to	Specify Endpoint Name in Reporting Endpoints table	Endpoint name specified in Report Submission Endpoint

Report Submission Endpoint

You can configure a report submission endpoint by setting it to Enabled and deploying the application.

Configuration Method

When using the report submission feature, you need to specify the endpoint name set in the CSP directive report-to value.

Note

• Multiple endpoints can be configured.
• By setting a REST API application as an endpoint, it is possible to output CSP violation reports to the console log.