DataSag guides · Updated 27 October 2026

Configure CSP for DataSag analytics on React with Vite

A restrictive Content Security Policy must permit the tracker script and its delivery endpoint. Merge DataSag's exact origin into the relevant directives while preserving the rest of your policy. This guide applies to React with Vite.

Start with the React with Vite installation

Open the root index.html that Vite uses as its entry point. Paste the script into head once, outside the React component tree. Build and deploy the app, then inspect the deployed HTML. The tracker is a browser script and needs no npm package.

A React effect can run more than once during development or component remounts. Avoid inserting the tracker from useEffect when index.html already contains it. Development activity is not a substitute for checking the production build.

Use the public project key from the DataSag project you are inspecting. A test on a preview domain does not confirm that the production domain has the same code or settings.

Configure CSP for DataSag analytics in React with Vite

  1. Inspect CSP on the response from the actual static host. Vite index.html does not establish which production response headers your hosting service sends. Find any existing meta policy and upstream header before changing either.
  2. Update the policy where the host manages it, retaining application script requirements. Permit the tracker origin for script loading and its delivery requests. If both header and meta policies exist, satisfy both rather than adding a looser replacement.
  3. Rebuild only if the policy lives in the project, deploy the actual header change, and test a direct deep route too. Confirm that both the React entry bundle and tracking requests load under enforcement.

The effective static-host policy permits the application and DataSag on all tested entry routes without a broad CSP exception.

Complete the collection checks

  1. Read the existing response Content-Security-Policy headers and the browser violation message. Identify the directive actually blocking the resource. Multiple policies apply together, so adding a looser second header may not solve the block.
  2. Allow https://www.datasag.com in script-src or the applicable script-src-elem directive. Keep your existing nonce, hash and strict-dynamic rules; nonce-based policies may require your site's nonce on the script tag.
  3. Permit https://www.datasag.com in connect-src for sendBeacon and fetch requests to /api/track. The script derives the endpoint from its own source origin.
  4. If you want the tracker's image fallback to be available, allow the same origin in img-src. A successful normal beacon does not require the image fallback to run.
  5. Test a real pageview and custom event with the policy active. If your deployment supports it, use a report-only policy to evaluate a change before enforcing it.
  6. Keep inline handlers and unsafe-inline out of the solution. DataSag's external script does not require you to disable CSP or broadly allow every third-party origin.
/* Merge into existing directives; this is NOT a complete policy. */
script-src: add https://www.datasag.com
connect-src: add https://www.datasag.com
img-src: add https://www.datasag.com if enabling image fallback

What a successful check looks like

The exact tracker origin is permitted under the site's actual policy, tracking requests succeed and the Console no longer reports the corresponding violation.

Record the public path you tested, the browser state, the approximate time and the observed request. Check one direct page load and one later navigation so the result covers more than the homepage.

Common mistake

Do not paste the illustrative lines as a response header. Your host, framework or security middleware owns the complete policy, including syntax and nonces.

Installation snippet for React with Vite

The shared installation belongs in the head of the root index.html. Use this as the installation reference while checking the procedure above.

<script defer src="https://www.datasag.com/tracker.js" data-datasag-key="YOUR_PUBLIC_KEY"></script>

Related React with Vite guides

Full React with Vite setup guide · Search and AI visibility

References

Official React with Vite documentation covers the integration point. For policy directives, see the CSP documentation. Use support if a request fails after these checks.