Content Security Policy (CSP)¶
Introduction¶
Specifying Content Security Policy is a common way to secure web applications. This mechanism allows specifying which scripts and styles can execute on page. It can be done either by adding a Content-Security-Policy
header or an appropriate meta tag.
You can read about Consent Security Policy here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
Content Security Policy configuration¶
It is common to allow only scripts and connections from known domains.
JavaScript Tracking Client¶
To load all necessary assets for JavaScript Tracking Client to work you need to define source with script-src
, img-src
and connect-src
sources:
script-src <your-sources> https://client.piwik.pro/ppms.js;
img-src <your-sources> https://client.piwik.pro/ppms.php;
connect-src <your-sources> https://client.piwik.pro/ppms.php;
Note
These paths may require adjusting if you don’t use default settings.
For instance JavaScript library may be loaded as an alternative build that doesn’t conflict with Matomo script: https://client.piwik.pro/ppas.js
.
Tracking with custom domain¶
If your tracking domain is custom, then you need to define it in CSP sources:
script-src <your-sources> https://your-custom-domain.com/ppms.js;
img-src <your-sources> https://your-custom-domain.com/ppms.php;
connect-src <your-sources> https://your-custom-domain.com/ppms.php;
Allowing Site Inspector extention to work on site¶
Site Inspector is a Chrome browser extension that helps visualize analytics data (e.g. click heat map, scroll map) on tracked pages. Default configuration of JavaScript Tracking Client will add configuration for this extension (in a page HTML), but it is possible to disable this behavior if necessary (setSiteInspectorSetup).
This extension integrates with a page on which it is run so additional CSP rules are needed to allow it’s normal functioning:
connect-src <your-sources+necessary-Piwik-PRO-sources> https://client.piwik.pro/api/;
frame-src <your-sources+necessary-Piwik-PRO-sources> https://client.piwik.pro/site-inspector/;
Note
If you use custom domain for tracking then the domain used in CSP rules should be adjusted accordingly.
Example Content Security Policy definition¶
Following example configuration of CSP assumes:
- client’s website address: client.com
- client’s organization name in Piwik PRO: client
- client’s domain: client.piwik.pro
- client uses default tracking domain: client.piwik.pro
- client wants to also allow Site Inspector extention on their site
- configuration allows
'self'
source which is: client.com
Content-Security-Policy: default-src 'none';
script-src 'self' https://client.piwik.pro/ppms.js;
img-src 'self' https://client.piwik.pro/ppms.php;
connect-src 'self' https://client.piwik.pro/ppms.php https://client.piwik.pro/api/;
frame-src https://client.piwik.pro/site-inspector/;