Fix CSP violations: Allow inline scripts/styles and Cloudflare Insights #226
Conversation
- Added 'unsafe-inline' to script-src for Next.js inline scripts - Added 'unsafe-eval' to script-src for dynamic script evaluation - Added 'unsafe-inline' to style-src for Google Fonts and inline styles - Added https://static.cloudflareinsights.com to script-src for Cloudflare Analytics - This resolves the 35+ CSP violations preventing site from loading properly
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughUpdated vercel.json to broaden the Content-Security-Policy for all paths: added 'unsafe-inline' and 'unsafe-eval' to script-src, included https://static.cloudflareinsights.com, and added 'unsafe-inline' to style-src. Other directives remain unchanged. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
✨ Finishing Touches🧪 Generate unit tests
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
vercel.json (4)
76-76: Add CSP reporting to catch regressions while tightening policy.Enable a reporting endpoint so you can iterate away from 'unsafe-inline' safely.
You can append a report endpoint (replace with your endpoint):
- "value": "default-src 'self'; script-src 'self' 'unsafe-inline' https://vercel.live https://va.vercel-scripts.com https://static.cloudflareinsights.com; script-src-attr 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://*.supabase.co https://*.vercel.app https://cloudflareinsights.com https://*.cloudflareinsights.com wss://*.supabase.co; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;" + "value": "default-src 'self'; script-src 'self' 'unsafe-inline' https://vercel.live https://va.vercel-scripts.com https://static.cloudflareinsights.com; script-src-attr 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://*.supabase.co https://*.vercel.app https://cloudflareinsights.com https://*.cloudflareinsights.com wss://*.supabase.co; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests; report-uri https://your.domain.example/csp-report;"If you prefer Report-To/Reporting-Endpoints, I can propose that header addition as well.
59-61: Permissions-Policy: replace deprecated interest-cohort with browsing-topics.
interest-cohortis obsolete. Usebrowsing-topics=()instead; consider also disabling ad-related APIs if not needed.- "value": "camera=(), microphone=(), geolocation=(), interest-cohort=()" + "value": "camera=(), microphone=(), geolocation=(), browsing-topics=()"Optional extras: join-ad-interest-group=(), run-ad-auction=(). I can add them if desired.
47-49: X-XSS-Protection is deprecated and can be removed.Modern browsers ignore it or may behave unexpectedly; CSP already covers XSS.
- { - "key": "X-XSS-Protection", - "value": "1; mode=block" - },
76-76: Allow Cloudflare Web Analytics beacon endpoint via connect-srcCloudflare Web Analytics loads beacon scripts from static.cloudflareinsights.com (script-src already permits) and sends POSTs to
<your-site>/cdn-cgi/rum(covered by 'self') or, for non-proxied setups, to https://cloudflareinsights.com/cdn-cgi/rum. Add the latter to connect-src to avoid silent failures.Optional tweak:
- "value": "default-src 'self'; script-src 'self' 'unsafe-inline' https://vercel.live https://va.vercel-scripts.com https://static.cloudflareinsights.com; script-src-attr 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://*.supabase.co https://*.vercel.app wss://*.supabase.co; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;" + "value": "default-src 'self'; script-src 'self' 'unsafe-inline' https://vercel.live https://va.vercel-scripts.com https://static.cloudflareinsights.com; script-src-attr 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://*.supabase.co https://*.vercel.app https://cloudflareinsights.com wss://*.supabase.co; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
vercel.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Test Suite
| { | ||
| "key": "Content-Security-Policy", | ||
| "value": "default-src 'self'; script-src 'self' https://vercel.live https://va.vercel-scripts.com; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://*.supabase.co https://*.vercel.app wss://*.supabase.co; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;" | ||
| "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://vercel.live https://va.vercel-scripts.com https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://*.supabase.co https://*.vercel.app wss://*.supabase.co; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;" |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Avoid 'unsafe-eval' and broadly allowing inline scripts; prefer nonces/hashes.
'unsafe-eval' meaningfully widens the XSS risk surface and is rarely needed in production Next.js builds. Keep it out of prod and replace broad 'unsafe-inline' with a nonce- or hash-based policy (Next.js supports per-request nonces via headers/middleware). If you must keep inline temporarily, at least add script-src-attr 'none' to block inline event handlers.
Consider this tighter interim CSP (remove eval; add script-src-attr). Apply only if your prod build still loads:
- "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://vercel.live https://va.vercel-scripts.com https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://*.supabase.co https://*.vercel.app wss://*.supabase.co; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;"
+ "value": "default-src 'self'; script-src 'self' 'unsafe-inline' https://vercel.live https://va.vercel-scripts.com https://static.cloudflareinsights.com; script-src-attr 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://*.supabase.co https://*.vercel.app wss://*.supabase.co; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;"If you want, I can draft a Next.js headers() + middleware approach that injects a per-request nonce and drops 'unsafe-inline' entirely.
🏁 Script executed:
#!/bin/bash
set -e
file="vercel.json"
if [ ! -f "$file" ]; then
echo "Error: $file not found"
exit 1
fi
# Show CSP directives around script-src
rg -n -C2 '"value": ".*script-src' "$file"
# Check for presence of unsafe-eval
rg -n -C2 "'unsafe-eval'" "$file"
# Check for presence of unsafe-inline
rg -n -C2 "'unsafe-inline'" "$file"Length of output: 1841
Restrict CSP: drop ‘unsafe-eval’ and limit inline scripts
script-src currently allows both ‘unsafe-eval’ and broad ‘unsafe-inline’, significantly expanding the XSS attack surface. Remove ‘unsafe-eval’, add script-src-attr 'none' to block inline handlers, and migrate to per-request nonces or hashes via Next.js headers/middleware:
- "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://vercel.live https://va.vercel-scripts.com https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://*.supabase.co https://*.vercel.app wss://*.supabase.co; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;"
+ "value": "default-src 'self'; script-src 'self' 'unsafe-inline' https://vercel.live https://va.vercel-scripts.com https://static.cloudflareinsights.com; script-src-attr 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://*.supabase.co https://*.vercel.app wss://*.supabase.co; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;"In production, drop all inline allowances by injecting nonces via Next.js middleware and removing ‘unsafe-inline’ entirely.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://vercel.live https://va.vercel-scripts.com https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://*.supabase.co https://*.vercel.app wss://*.supabase.co; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;" | |
| "value": "default-src 'self'; script-src 'self' 'unsafe-inline' https://vercel.live https://va.vercel-scripts.com https://static.cloudflareinsights.com; script-src-attr 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://*.supabase.co https://*.vercel.app wss://*.supabase.co; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;" |
🤖 Prompt for AI Agents
In vercel.json at line 76, the Content-Security-Policy currently allows
'unsafe-eval' and broad 'unsafe-inline' which increases XSS risk; update the
script-src directive to remove 'unsafe-eval' and remove 'unsafe-inline', add
script-src-attr 'none' to block inline handlers, and replace inline allowances
with a nonce- or hash-based approach injected per request via Next.js
middleware/headers (implement middleware to generate and set nonces and update
server-side rendered/script tags to use those nonces, or compute and publish
hashes), then update the CSP header string in vercel.json accordingly and verify
no legitimate inline scripts remain before deploying.
Summary by CodeRabbit