This documentation describes how to configure AdOpt with Content Security Policy (CSP) on your website, ensuring proper security for script, style, and external connection loading policies.
AdOpt Tag Code
The AdOpt tag consists of a meta tag and a script that injects the cookie banner into the website. The original code is as follows:
<meta
name="adopt-website-id"
content="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
/>
<script
src="//tag.goadopt.io/injector.js?website_code=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
class="adopt-injector"
></script>
CSP Configuration
To include this tag on your website and ensure that the cookie banner works correctly with Content Security Policy (CSP), follow the steps below.
1. Add Nonce to the Script and Meta Tag
The first step is to add a nonce (a unique or fixed value that ensures the secure execution of the script and the meta tag). In this example, we will use the nonce adopt, but you can use any value, as long as the same value is applied to both the script and the meta tag.
Example Code with Nonce:
<meta
http-equiv="Content-Security-Policy"
content="
default-src 'self';
script-src 'self' 'nonce-adopt';
connect-src 'self' disclaimer-api.goadopt.io;
style-src 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=';
"
/>
<meta
nonce="adopt"
name="adopt-website-id"
content="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
/>
<script
nonce="adopt"
src="//tag.goadopt.io/injector.js?website_code=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
class="adopt-injector"
></script>
2. Explanation of Nonce
The nonce is a value that ensures that the script and the meta tag can only be executed if the defined nonce matches.
In this example, we used the value adopt as the nonce, but you can customize this value as needed.
3. Style Hash
The style-src includes the SHA-256 of an inline style. This hash (sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=) ensures that the style is applied securely, preventing unauthorized styles from being executed.
Conclusion
By following these instructions, you ensure that the AdOpt cookie banner works properly on your website without compromising the security policies enforced by the Content Security Policy (CSP).