Content Security Policies
Content Security Policies (CSP) are sent as a header to your users' browsers by your web server. They are used to declare which dynamic resources are allowed to load on your page.
For many websites, this often involves declaring that only scripts and styles from your own domain and those from all the tools you use are allowed. However, this can become more problematic when more complex configurations are involved.
If you identify CSP errors on your site similar to those shown below, then your development team or hosting provider will need to adjust your CSP settings.
Adjust Your CSP Settings
1. Check for CSP errors.
If you encounter issues with statistics and consents in the Axeptio back-office, this can sometimes be caused by a CSP error. You can check for these errors in your browser's developer console. You can learn how to open the console by following the steps in this guide.
If there is a Content Security Policy problem, you will see an error similar to the one below:
2. Contact your web developer or hosting provider to adjust CSP settings.
Since all servers are different, the Axeptio support team will not be able to help resolve these issues beyond identifying a CSP error. When modifying your Content Security Policies, the best person to contact is your web developer, or whoever manages your website.
3. Choose which CSP settings to adjust.
If you are using a default CSP, then adding the following to your default-src rules will be sufficient.
The "..." in the examples below are placeholders for any existing rules you might have in place:
default-src ... https://.axept.io https://.axeptio.eu https://axeptio.imgix.net https://*.gstatic.com 'unsafe-inline'
If you want stricter restrictions, we recommend the pattern below to ensure your policies will be more resilient in the future as we expand our services. Here is an example of what this could look like:
default-src … 'unsafe-inline'
script-src … https://*.axept.io 'unsafe-inline'
connect-src … https://*.axept.io https://*.axeptio.eu https://*.axeptio.tech
img-src … https://axeptio.imgix.net https://*.axept.io https://*.gstatic.com
media-src … https://axeptio-videos.imgix.net
font-src … https://fonts.axept.io
If your CSP requires more granularity, here are the absolute minimum security permissions you need to add to your web server to allow Axeptio to function properly on your site:
script-src … https://static.axept.io 'unsafe-inline'
connect-src … https://*.axept.io https://*.axeptio.eu https://*.axeptio.tech
img-src … https://axeptio.imgix.net https://favicons.axept.io https://*.gstatic.com
media-src … https://axeptio-video.imgix.net
font-src … https://fonts.axept.io
Using a Nonce
To protect your website against unexpected code execution, you can rely on the Nonce attribute to identify and limit script execution only to those authorized. This helps prevent the execution of malicious code. The Axeptio widget integration supports the Nonce attribute and can be easily configured using the integration code.
Configure your Nonce ID in the HTTP header of your website pages and reuse it as an attribute for each script executed on the page.
<?php
$nonce = base64_encode(random_bytes(18));
header("Content-Security-Policy: default-src 'self'; script-src 'strict-dynamic' 'nonce-" . $nonce . "' https:");
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>CSP Nonce</title>
<script type="text/javascript" nonce="<?= $nonce ?>" src="..."></script>
</head>
<body>
<script type="text/javascript" nonce="<?= $nonce ?>">
myFunction();
</script>
</body>
</html>
2. The Axeptio widget is a script loaded on your website. Simply add the nonce attribute generated to the integration script and associate it with a dedicated axeptioSettings attribute, which is responsible for propagating the nonce value to all components managed by the Axeptio widget.
<!-- Integrate your JS script here -->
<script nonce=$nonce>
window.axeptioSettings = {
clientId: "axeptio-client-id",
cookiesVersion: "axeptio--cookie-version",
nonce: $nonce
};
(function(d, s) {
var t = d.getElementsByTagName(s)[0], e = d.createElement(s);
e.async = true;
e.src = "https://static.axept.io/sdk.js";
t.parentNode.insertBefore(e, t);
})(document, "script");
</script>
Now all inline HTML content generated by the Axeptio widget is validated via the nonce attribute and no longer triggers an unsafe-inline error.