From 6 CSP Errors to Zero: Debugging Content Security Policy for AdSense

Don't guess what's blocked. See it fail in real-time by following these steps:

1. Disable ad blockers (they hide the real CSP errors).
2. Open DevTools → Console.
3. Load your page and look for the red "Refused to load..." errors.
4. Write down every blocked domain.

If you just look at production errors, you'll miss the development-only requirements.

In development (Next.js npm run dev), you need two extra permissions:

1. unsafe-eval: Next.js uses eval() for Hot Module Replacement (HMR).
2. ws://localhost: Extensions like Console Ninja and HMR use WebSockets.

If you block these, your local dev environment will break.

const isDev = process.env.NODE_ENV === "development";
const nonce = crypto.randomUUID().replace(/-/g, "");

const scriptSrc = [
  "'self'",
  `'nonce-${nonce}'`,
  isDev ? "'unsafe-eval'" : "", // Allow eval in dev
  "https://www.googletagmanager.com",
  // ... other domains
]
  .filter(Boolean)
  .join(" ");

const connectSrc = [
  "'self'",
  isDev ? "ws://localhost:* ws://127.0.0.1:*" : "", // Allow WebSockets in dev
  "https://www.google-analytics.com",
  "https://ep1.adtrafficquality.google", // AdSense SODAR endpoints
  "https://ep2.adtrafficquality.google",
  // ... other domains
]
  .filter(Boolean)
  .join(" ");

Through trial and error, here is the list of domains Google AdSense actually needs for production:

• script-src: googletagmanager.com, google-analytics.com, pagead2.googlesyndication.com, fundingchoicesmessages.google.com
• connect-src: googleads.g.doubleclick.net, tpc.googlesyndication.com, fundingchoicesmessages.google.com, ep1.adtrafficquality.google, ep2.adtrafficquality.google
• frame-src: googleads.g.doubleclick.net, tpc.googlesyndication.com, fundingchoicesmessages.google.com, ep1.adtrafficquality.google, ep2.adtrafficquality.google

Note: Avoid broad wildcards when possible. Add new domains only after confirming a real console error.

Here is the final configuration in src/proxy.ts that handles both Development (HMR) and Production (AdSense):

const nonce = crypto.randomUUID().replace(/-/g, "");
const isDev = process.env.NODE_ENV === "development";

const scriptSrc = [
  "'self'",
  `'nonce-${nonce}'`,
  "'strict-dynamic'",
  "https://www.googletagmanager.com",
  "https://www.google-analytics.com",
  "https://pagead2.googlesyndication.com",
  "https://fundingchoicesmessages.google.com",
  "https://tpc.googlesyndication.com",
  "https://googleads.g.doubleclick.net",
  isDev ? "'unsafe-eval'" : "",
]
  .filter(Boolean)
  .join(" ");

const connectSrc = [
  "'self'",
  "https://www.google-analytics.com",
  "https://region1.google-analytics.com",
  "https://www.googletagmanager.com",
  "https://pagead2.googlesyndication.com",
  "https://googleads.g.doubleclick.net",
  "https://adtrafficquality.google",
  "https://ep1.adtrafficquality.google",
  "https://ep2.adtrafficquality.google",
  "https://fundingchoicesmessages.google.com",
  "https://challenges.cloudflare.com",
  isDev ?  : ,
]
  .()
  .();

 csp = [
  ,
  ,
  ,
  ,
  ,
  ,
  ,
].();