A Content Security Policy tells browsers which scripts, styles and connections a page may use. Your site sends it as a Content-Security-Policy header, or as a <meta http-equiv="Content-Security-Policy"> tag. When the policy leaves out something the Kukie.io banner needs, browsers refuse it: the banner does not appear, or it appears but cannot record visitors' consent choices.
This applies to every installation method. With Google Tag Manager, the Kukie.io tag still shows as fired, because the browser refuses the banner script only after GTM has added it to the page.
What the banner needs
| Directive | Add | What it allows |
|---|---|---|
script-src | https://cdn.kukie.io | Your site's banner script, from the embed code or the Google Tag Manager tag. |
style-src | 'unsafe-inline' | The styles the banner draws itself with. They are style elements without a nonce, so 'unsafe-inline' is the only way to allow them. If your style-src lists a hash or a nonce, read If your style-src lists a hash or a nonce. |
connect-src | https://app.kukie.io | The banner's requests to Kukie.io: the visitor's region, which decides the consent rules, and the record of each consent choice in your Consent Log. |
Add each value to the directive your policy uses for that kind of resource. If your policy has no script-src or connect-src, browsers use default-src instead, so add the value there. If it restricts styles only through default-src, add a style-src directive with the sources from default-src plus 'unsafe-inline', so that 'unsafe-inline' never applies to scripts.
Some settings need one more source:
- HTTP consent cookies: add your consent subdomain to
connect-src, for examplehttps://cookies.example.com. - A custom icon or logo: if you uploaded a banner icon, add
https://app.kukie.iotoimg-src. If your banner shows a logo from a URL, add that URL's host toimg-src. - Debug mode: while you debug with
?kukie_debug=1, the banner loads its debug report fromhttps://app.kukie.io, so add it toscript-srcfor that time. Debug mode explains the report.
Example
A policy that blocks the banner:
default-src 'self'; script-src 'self' https://www.googletagmanager.com; style-src 'self' https://fonts.googleapis.com; connect-src 'self' https://*.google-analytics.comThe same policy with what the banner needs:
default-src 'self'; script-src 'self' https://www.googletagmanager.com https://cdn.kukie.io; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; connect-src 'self' https://*.google-analytics.com https://app.kukie.ioIf your style-src lists a hash or a nonce
Browsers ignore 'unsafe-inline' in a list that also holds a hash ('sha256-...') or a nonce ('nonce-...'). Adding it to such a style-src changes nothing. Add a style-src-elem directive instead, with the sources from your style-src except the hashes and nonces, plus 'unsafe-inline':
style-src 'self' 'unsafe-hashes' 'sha256-AbC...=' https://fonts.googleapis.com; style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.comstyle-src-elem covers style elements and stylesheets, so it must also list the hosts your own stylesheets come from. Your style-src keeps covering style attributes, hashes included. Chrome 75, Firefox 108, Safari 15.4 and later versions read style-src-elem. Older browsers use style-src and show the banner without its styles.
If you use Google Tag Manager
- Allow Google Tag Manager itself as Google's Content Security Policy guide describes, then add the Kukie.io sources above.
- If your
script-srcuses'strict-dynamic'and gives the Google Tag Manager script a nonce, scripts that Google Tag Manager adds are allowed, the Kukie.io banner script included. Addhttps://cdn.kukie.ioanyway: browsers without'strict-dynamic'support rely on it. - In Tag Assistant, a fired tag means GTM ran it, not that the browser loaded the banner. Open the browser console on your site: a blocked banner shows an error that mentions
cdn.kukie.ioand the directive that blocked it.
Check the result
- Publish the new policy on your site.
- In the dashboard, open your site's Overview, find the Installation card and select Verify installation.
- If your homepage's policy still blocks the banner, the result shows Blocked by security policy and lists each change still needed. Otherwise the check continues as How to verify your banner installation describes.
The check reads the policy your homepage sends. Your next cookie scan checks the other pages too: Cookies & Scripts then tells you when a page's policy refused the banner. You can also open a page in a private browser window and look for Content Security Policy errors in the browser console.
