Content Security Policy

If your application sends a Content-Security-Policy header, the browser will block the tracker’s network call to https://events.vektis.io unless you explicitly allow it.

You need to add https://events.vektis.io to the connect-src directive of your CSP.

Note

If your CSP uses default-src 'self' and no connect-src directive, the browser falls back to default-src for fetch requests — which means you must add a connect-src directive that includes both 'self' and https://events.vektis.io.

Symptoms of a CSP block

• Events appear queued in vektis.getStatus().queueLength but never send
• Browser console shows: Refused to connect to 'https://events.vektis.io/...' because it violates the following Content Security Policy directive: "connect-src ..."
• The claude /vektis-troubleshoot skill flags VEK_TRK_NETWORK_ERROR with a CSP hypothesis

Snippets by platform

Next.js

Add a CSP header in next.config.ts:

next.config.ts

import type { NextConfig } from "next";

const csp = [
  "default-src 'self'",
  "script-src 'self' 'unsafe-inline'",
  "style-src 'self' 'unsafe-inline'",
  "img-src 'self' data: https:",
  "connect-src 'self' https://events.vektis.io",
].join("; ");

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [{ key: "Content-Security-Policy", value: csp }],
      },
    ];
  },
};

export default nextConfig;

Vercel

Add a CSP header in vercel.json:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; connect-src 'self' https://events.vektis.io;"
        }
      ]
    }
  ]
}

Netlify

Add a CSP header in public/_headers (or wherever your static asset directory lives):

/*
  Content-Security-Policy: default-src 'self'; connect-src 'self' https://events.vektis.io;

Cloudflare Pages

Add a CSP header in _headers at the project root:

/*
  Content-Security-Policy: default-src 'self'; connect-src 'self' https://events.vektis.io;

Express

Use the helmet middleware:

import express from "express";
import helmet from "helmet";

const app = express();

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        connectSrc: ["'self'", "https://events.vektis.io"],
      },
    },
  }),
);

Verifying CSP is correctly set

After deploying with the updated header, send a test event and confirm vektis.getStatus().queueLength returns to 0 within a few seconds. If the queue length stays elevated, open the browser Network tab and look for a request to events.vektis.io — a CSP block surfaces there as a (blocked:csp) status.

Related

• Reset on logout
• Troubleshooting