ZK Developer's Reference/Security Tips/Content Security Policy

What is Content security policy?

Content-security-policy (CSP) is a security mechanism which helps web applications to prevent XSS attacks (cross-site scripting) and other content injection attacks.

To reduce those injection risks, CSP declares permissions to load script from specific, trusted sources. We could configure our web server to return the CSP HTTP header, or use <meta> element.

See more: Content Security Policy Level 2

How to use Content security policy?

To use CSP in your web application, the first thing you need to know that not all the browsers support CSP.

(Support browsers: Content Security Policy 1.0, Content Security Policy Level 2)

There are several "directive" recommended to be defined, which is in order to protect against XSS attacks.

1. default-src

The default-src is the default policy for loading content such as Javascript, CSS, fonts, etc. .

2. script-src / style-src / img-src / font-src

Defines valid sources of JavaScript/stylesheets/images/fonts.

3. connect-src

Applies to AJAX, WebSocket or EventSource.

4. child-src

Governs the creation of nested browsing contexts as well as Worker execution contexts.

Examples

1. Only allows loading resources from the same origin.

default-src 'self';

2. Allows loading scripts from the same origin and Google Analytics.

script-src 'self' www.google-analytics.com;

Use Content security policy in ZK

CSP is not fully supported in ZK, because we still need to use some 'unsafe-eval' and 'unsafe-inline' declaration when loading scripts and CSS from ZK. Which means that there still are risks when attackers use eval() script or inline scripts.

But you can still use CSP in ZK by declaring the following directives. Example

<?header name="Content-Security-Policy-Report-Only"
    value="default-src 'none'; script-src 'self' 'unsafe-eval'; frame-src 'self'; connect-src 'self' ws://your.server.name:8080/;
    img-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self';" ?>