[{"data":1,"prerenderedAt":427},["ShallowReactive",2],{"blog-prompts/add-csp-headers":3},{"id":4,"title":5,"body":6,"category":407,"date":408,"dateModified":409,"description":410,"draft":411,"extension":412,"faq":413,"featured":411,"headerVariant":414,"image":413,"keywords":413,"meta":415,"navigation":100,"ogDescription":416,"ogTitle":413,"path":417,"readTime":413,"schemaOrg":418,"schemaType":419,"seo":420,"sitemap":421,"stem":422,"tags":423,"twitterCard":425,"__hash__":426},"blog/blog/prompts/add-csp-headers.md","Add Content Security Policy with AI Prompts",{"type":7,"value":8,"toc":397},"minimark",[9,16,21,24,72,76,79,181,191,195,198,260,264,267,319,328,344,348,351,371,385],[10,11,12],"tldr",{},[13,14,15],"p",{},"CSP tells browsers which resources are allowed to load. It's defense in depth against XSS - even if injection exists, CSP can block the malicious script. Start with report-only mode, fix violations, then enforce. These prompts help you build a working CSP.",[17,18,20],"h2",{"id":19},"basic-csp-setup","Basic CSP Setup",[13,22,23],{},"Copy this prompt to generate a restrictive Content Security Policy configuration for your platform. Your AI will produce the header directives for same-origin scripts, styles, images, and fonts, plus instructions for report-only testing.",[25,26,28,31,38,41,66,69],"prompt-box",{"title":27},"Configure CSP Headers",[13,29,30],{},"Set up Content Security Policy headers for my application.",[13,32,33,34],{},"Platform: ",[35,36,37],"span",{},"Next.js/Vercel/Netlify/Express",[13,39,40],{},"Start with a restrictive policy:",[42,43,44,48,51,54,57,60,63],"ol",{},[45,46,47],"li",{},"default-src 'self' (only same origin)",[45,49,50],{},"script-src 'self' (no inline scripts)",[45,52,53],{},"style-src 'self' 'unsafe-inline' (most CSS needs this)",[45,55,56],{},"img-src 'self' data: https: (images from anywhere via HTTPS)",[45,58,59],{},"font-src 'self' (fonts from same origin)",[45,61,62],{},"connect-src 'self' (API calls to same origin)",[45,64,65],{},"frame-ancestors 'none' (prevent clickjacking)",[13,67,68],{},"For Next.js, set in next.config.js headers.\nFor Vercel, use vercel.json headers.\nFor Express, use helmet middleware.",[13,70,71],{},"Start with Content-Security-Policy-Report-Only to test\nbefore switching to enforcing Content-Security-Policy.",[17,73,75],{"id":74},"allow-third-party-services","Allow Third-Party Services",[13,77,78],{},"Use this prompt to expand your CSP for third-party services like Google Analytics, Stripe, and Google Fonts. Your AI will generate the minimum required origin allowlists for each service and combine them into a complete CSP header.",[25,80,82,85,88,133,136,150,162,178],{"title":81},"CSP for Common Services",[13,83,84],{},"Update my CSP to allow these third-party services:",[13,86,87],{},"Services I use:",[89,90,93,103,109,115,121,127],"ul",{"className":91},[92],"contains-task-list",[45,94,97,102],{"className":95},[96],"task-list-item",[98,99],"input",{"disabled":100,"type":101},true,"checkbox"," Google Analytics",[45,104,106,108],{"className":105},[96],[98,107],{"disabled":100,"type":101}," Google Fonts",[45,110,112,114],{"className":111},[96],[98,113],{"disabled":100,"type":101}," Stripe",[45,116,118,120],{"className":117},[96],[98,119],{"disabled":100,"type":101}," Intercom/Crisp",[45,122,124,126],{"className":123},[96],[98,125],{"disabled":100,"type":101}," YouTube embeds",[45,128,130,132],{"className":129},[96],[98,131],{"disabled":100,"type":101}," CDN (cloudflare, jsdelivr)",[13,134,135],{},"For each service, add the minimum required origins:",[13,137,138,139,145,146],{},"Google Analytics:\nscript-src: ",[140,141,142],"a",{"href":142,"rel":143},"https://www.googletagmanager.com",[144],"nofollow","\nconnect-src: ",[140,147,148],{"href":148,"rel":149},"https://www.google-analytics.com",[144],[13,151,152,153,157,158],{},"Google Fonts:\nstyle-src: ",[140,154,155],{"href":155,"rel":156},"https://fonts.googleapis.com",[144],"\nfont-src: ",[140,159,160],{"href":160,"rel":161},"https://fonts.gstatic.com",[144],[13,163,164,165,169,170,173,174],{},"Stripe:\nscript-src: ",[140,166,167],{"href":167,"rel":168},"https://js.stripe.com",[144],"\nframe-src: ",[140,171,167],{"href":167,"rel":172},[144]," ",[140,175,176],{"href":176,"rel":177},"https://hooks.stripe.com",[144],[13,179,180],{},"Generate the complete CSP header combining all services\nI've checked above.",[182,183,184],"warning-box",{},[13,185,186,190],{},[187,188,189],"strong",{},"Avoid 'unsafe-inline' for scripts:"," It defeats much of CSP's protection. Use nonces or hashes instead. 'unsafe-inline' for styles is often necessary but less dangerous.",[17,192,194],{"id":193},"use-nonces-for-inline-scripts","Use Nonces for Inline Scripts",[13,196,197],{},"Paste this prompt to implement per-request CSP nonces that allow your inline scripts while blocking injected ones. Your AI will generate the nonce creation logic, middleware integration, and Script component usage for your framework.",[25,199,201,204,210,213,216,230,233,240,243,246,257],{"title":200},"Implement CSP Nonces",[13,202,203],{},"Implement CSP nonces for inline scripts.",[13,205,206,207],{},"Framework: ",[35,208,209],{},"Next.js/Express",[13,211,212],{},"Nonces allow specific inline scripts while blocking injected ones.",[13,214,215],{},"Flow:",[42,217,218,221,224,227],{},[45,219,220],{},"Generate random nonce per request",[45,222,223],{},"Add nonce to CSP header: script-src 'nonce-{random}'",[45,225,226],{},"Add nonce attribute to allowed scripts",[45,228,229],{},"Injected scripts without nonce are blocked",[13,231,232],{},"Implementation:\n// Generate nonce\nconst nonce = crypto.randomBytes(16).toString('base64');",[13,234,235,236],{},"// Add to CSP header\n",[237,238,239],"code",{},"script-src 'nonce-${nonce}'",[13,241,242],{},"// Add to script tags\n...",[13,244,245],{},"For Next.js:",[89,247,248,251,254],{},[45,249,250],{},"Use middleware to generate nonce",[45,252,253],{},"Pass nonce to pages via headers",[45,255,256],{},"Apply to Script components",[13,258,259],{},"Show complete implementation for my framework.",[17,261,263],{"id":262},"csp-violation-reporting","CSP Violation Reporting",[13,265,266],{},"Use this prompt to set up a CSP violation reporting endpoint. Your AI will create an API route that receives violation reports, filters browser extension noise, and logs actionable violations for monitoring.",[25,268,270,273,276,279,293,296,310,313,316],{"title":269},"Set Up CSP Reports",[13,271,272],{},"Set up CSP violation reporting to monitor issues.",[13,274,275],{},"Add reporting directives:\nreport-uri /api/csp-report\nreport-to csp-endpoint",[13,277,278],{},"Create report endpoint:",[42,280,281,284,287,290],{},[45,282,283],{},"Receive POST with JSON body",[45,285,286],{},"Log violation details",[45,288,289],{},"Filter noise (browser extensions, false positives)",[45,291,292],{},"Alert on new/significant violations",[13,294,295],{},"Report payload includes:",[89,297,298,301,304,307],{},[45,299,300],{},"document-uri: page where violation occurred",[45,302,303],{},"violated-directive: which rule was broken",[45,305,306],{},"blocked-uri: what was blocked",[45,308,309],{},"source-file: file containing violation",[13,311,312],{},"Use Report-Only header during development:\nContent-Security-Policy-Report-Only: ...",[13,314,315],{},"This reports violations without blocking, so you can\nbuild your policy without breaking the site.",[13,317,318],{},"Consider using a service like report-uri.com for aggregation.",[320,321,322],"tip-box",{},[13,323,324,327],{},[187,325,326],{},"Pro tip:"," Use browser DevTools console to see CSP violations in real-time. Each blocked resource shows what directive blocked it and why.",[329,330,331,338],"faq-section",{},[332,333,335],"faq-item",{"question":334},"CSP is breaking my site. What do I do?",[13,336,337],{},"Use Report-Only mode first. Check browser console for violations. Add necessary sources one at a time. Avoid 'unsafe-inline' and 'unsafe-eval' if possible - use nonces or refactor code instead.",[332,339,341],{"question":340},"Does CSP replace XSS prevention?",[13,342,343],{},"No, CSP is defense in depth. You still need to properly escape output and sanitize input. CSP is a safety net that limits damage if XSS gets through, not a replacement for secure coding.",[17,345,347],{"id":346},"further-reading","Further Reading",[13,349,350],{},"Want to understand the vulnerability before fixing it? These guides explain what's happening and why.",[89,352,353,359,365],{},[45,354,355],{},[140,356,358],{"href":357},"/blog/vulnerabilities/exposed-api-keys","Understanding exposed API keys",[45,360,361],{},[140,362,364],{"href":363},"/blog/how-to/hide-api-keys","How to hide API keys step-by-step",[45,366,367],{},[140,368,370],{"href":369},"/blog/best-practices/secrets","Secret management best practices",[372,373,374,380],"related-articles",{},[375,376],"related-card",{"description":377,"href":378,"title":379},"Primary XSS defense","/blog/prompts/fix-xss-vulnerabilities","Fix XSS Vulnerabilities",[375,381],{"description":382,"href":383,"title":384},"All security headers","/blog/prompts/add-security-headers","Add Security Headers",[386,387,390,394],"cta-box",{"href":388,"label":389},"/","Start Free Scan",[17,391,393],{"id":392},"check-your-csp","Check Your CSP",[13,395,396],{},"Scan your headers for security misconfigurations.",{"title":398,"searchDepth":399,"depth":399,"links":400},"",2,[401,402,403,404,405,406],{"id":19,"depth":399,"text":20},{"id":74,"depth":399,"text":75},{"id":193,"depth":399,"text":194},{"id":262,"depth":399,"text":263},{"id":346,"depth":399,"text":347},{"id":392,"depth":399,"text":393},"prompts","2026-02-11","2026-03-06","AI prompts to implement Content Security Policy headers. Prevent XSS, clickjacking, and other injection attacks with proper CSP configuration.",false,"md",null,"cyan",{},"AI prompts to configure CSP headers for defense in depth.","/blog/prompts/add-csp-headers","[object Object]","BlogPosting",{"title":5,"description":410},{"loc":417},"blog/prompts/add-csp-headers",[424],"Frontend","summary_large_image","cjNmn1-X-Rm0hcvPl2YibEX3XQ0-8XHFTFDpSMEH8CQ",1775843939109]