DOCS

Using Cantclone with a strict Content-Security-Policy

If your dashboard shows ⚠ CSP blocking: add data-nonce on a domain, your site is running a strict Content-Security-Policy that blocks Cantclone's stylesheet. Here's what that means and the one-line fix.

What's happening

Cantclone adds a small <style> tag to power its visual protections (the loading gate, copy-protection, and the page-scrambling overlay shown to a capture tool). A strict CSP with a style-src directive but no matching nonce tells the browser to reject that stylesheet, so those visual protections quietly stop applying on your site.

Your protection isn't fully off: the JavaScript-level defenses (blanking computed styles, canvas, and CSS rules a cloning tool tries to read) keep working regardless. But the visual layer needs the fix below to come back on.

The fix: add data-nonce

Add a data-nonce attribute to the Cantclone script tag, set to the same nonce your server puts in the CSP. Cantclone forwards it to its stylesheet so the browser accepts it.

<script
  src="https://cdn.cantclone.com/cantclone.js"
  data-key="YOUR_KEY"
  data-nonce="YOUR_CSP_NONCE"
  defer></script>

The nonce is generated fresh on every request by your server and must appear in both your CSP header and the script tag. For example, in a server-rendered template:

Content-Security-Policy: style-src 'self' 'nonce-{NONCE}'

<script src="https://cdn.cantclone.com/cantclone.js"
        data-key="YOUR_KEY"
        data-nonce="{NONCE}"
        defer></script>

After you add it

Load a protected page once. Cantclone's stylesheet will be accepted, and the dashboard warning clears itself within a day or two (it stops detecting the block). No other change is needed.

Most sites (Webflow, Framer, Shopify, plain HTML) don't run a strict CSP and never see this warning. Still stuck? Email protect@cantclone.com.