Content Security Policies
Content Security Policies (CSP) are delivered as a header to your users' browser 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 that of any tools that you are using are allowed. However, this can become more involved when complex setups are in play.
If you identify CSP errors on your site that are similar to what is shown below, then your development team or hosting provider will need to adjust your CSP settings.
Adjusting your CSP settings
1. Check to see if there are CSP errors.
If you're seeing issues with statistics and consents in Axeptio back-office, this can sometimes be caused by a CSP error. You can check your browser's developer console for these errors. You can learn how to open the console by following the steps in this guide.
If there is a Content Security Policy issue, you will see something similar to the below error:
2. Consult with your web developer or hosting provider to adjust CSP settings.
Since all servers are different, Axeptio’s Support team won't be able to help troubleshoot these issues beyond identifying whether there's a CSP error. When making changes to your Content Security Policies, the best person to reach out to 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 below to your default-src rules will be sufficient.
The "..." in the examples below is a placeholder 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 would recommend the template below to ensure that your policies will be more future-proof as we expand our services. Here's an example of what that would 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 CSPs require more granularity, then here are the absolute minimum security allowances that 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 you website from unexpected code execution, you can rely on Nonce attribute to identify and limit script execution to allowed one. It will prevent the execution of malicious code. Axeptio widget integration support Nonce attribute and can be easily setup using the integration code.
Setup you nonce ID on your HTTP header of your website pages and reuse as an attribute of any script running 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. Axeptio widget is a script loaded on your website. You will just have to add the generated nonce attribute attached to the integration script and associate it to a dedicated axeptioSetting attribute that will be in charge to propagate the nonce value to all components managed by 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 HTML inline content generated by Axeptio widget are validated through the nonce attribute and do not trigger unsafe-line anymore