Source: https://datafa.st/docs/fix-csp-content-security-policy-blocking-script Markdown source: https://datafa.st/docs/fix-csp-content-security-policy-blocking-script.md Description: DataFast script not loading? Your Content Security Policy headers may be blocking it. Learn how to update your CSP to allow DataFast analytics. # DataFast script blocked by Content Security Policy (CSP) If you installed the DataFast tracking script but don't see any pageviews, your site's **Content Security Policy (CSP) headers** are likely blocking it. ## How to tell if CSP is the problem 1. Open your website in Chrome or Firefox 2. Open DevTools (**F12** or **Cmd+Shift+I**) 3. Go to the **Console** tab 4. Look for an error like: ``` Refused to load the script 'https://datafa.st/js/script.js' because it violates the following Content Security Policy directive: "script-src 'self'" ``` If you see this, your CSP is blocking the DataFast script from loading. ## What is a Content Security Policy? A Content Security Policy is an HTTP header that tells browsers which external resources (scripts, styles, images, etc.) are allowed to load on your page. If `datafa.st` isn't listed in the policy, the browser blocks the script entirely — no errors in your analytics, just zero data. ## How to fix it You need to add `datafa.st` to the `script-src` directive of your CSP header. The exact steps depend on your setup. ### Next.js In your `next.config.js`, update the `Content-Security-Policy` header: ```js const ContentSecurityPolicy = \` script-src 'self' 'unsafe-inline' 'unsafe-eval' https://datafa.st; \`; module.exports = { async headers() { return [ { source: "/(.*)", headers: [ { key: "Content-Security-Policy", value: ContentSecurityPolicy.replace(/\n/g, ""), }, ], }, ]; }, }; ``` ### Vercel (vercel.json) ```json { "headers": [ { "source": "/(.*)", "headers": [ { "key": "Content-Security-Policy", "value": "script-src 'self' 'unsafe-inline' https://datafa.st;" } ] } ] } ``` ### Netlify (_headers file) ``` /* Content-Security-Policy: script-src 'self' 'unsafe-inline' https://datafa.st; ``` ### HTML meta tag If you don't have access to server headers, you can use a meta tag in your ``: ```html ``` > This only works if no server-level CSP header is already set. Server headers take priority over meta tags. ### Nginx ```nginx add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' https://datafa.st;" always; ``` ### Apache (.htaccess) ```apache Header set Content-Security-Policy "script-src 'self' 'unsafe-inline' https://datafa.st;" ``` ### WordPress If you use a security plugin like **WP Cerber**, **Sucuri**, or **Wordfence**, look for a CSP or "HTTP headers" section in the plugin settings and add `https://datafa.st` to the allowed script sources. If your theme sets CSP via `functions.php`: ```php header("Content-Security-Policy: script-src 'self' 'unsafe-inline' https://datafa.st;"); ``` ## Using a proxy? If you set up a [DataFast proxy](/docs/proxy-guide), the script loads from your own domain. In that case, your CSP already allows it under `'self'` and you shouldn't need any changes. If you're still having issues after proxying, make sure the proxy endpoint is on the same domain as your site. ## Using connect-src? If your CSP also restricts `connect-src` (which controls where the browser can send data via fetch/XHR), add `datafa.st` there too: ``` Content-Security-Policy: script-src 'self' https://datafa.st; connect-src 'self' https://datafa.st; ``` ## Still not working? - Make sure you're editing the **active** CSP header. Some hosting platforms or CDNs override headers. - Check for multiple CSP headers — browsers apply the **most restrictive** combination. - Clear your browser cache and test in an incognito window. - If you're using a proxy, make sure both `script-src` and `connect-src` allow your proxy domain.