Content Security Policy

CSP

سياسة أمان المحتوى (CSP)

Advancedsecurity1 min read
cspcontent-security-policysecurity headershttp security headers

Definition

An HTTP header that tells browsers which sources of scripts, styles, and media are allowed to load on a page.

ترويسة HTTP تُخبر المتصفحات بمصادر السكريبتات والأنماط والوسائط المسموح بتحميلها على الصفحة.

Why It Matters

A CSP header on 404Fault would prevent injected scripts from malicious glossary content (if someone corrupts a term) from executing in users' browsers.

ترويسة CSP على 404Fault ستمنع السكريبتات المحقونة من محتوى قاموس خبيث (إذا فسد مصطلح ما) من التنفيذ في متصفحات المستخدمين.

Full Definition

CSP is an HTTP response header (or meta tag) that restricts what resources a page can load. Example policy: `script-src 'self' 'nonce-{token}'` prevents loading scripts from third-party domains, mitigating XSS. `frame-ancestors 'none'` prevents clickjacking. Next.js supports CSP via `next.config.js` headers. A strict CSP is one of the strongest defenses against XSS attacks.
CSP ترويسة استجابة HTTP (أو meta tag) تُقيّد الموارد التي يمكن للصفحة تحميلها. مثال: `script-src 'self'` يمنع تحميل السكريبتات من نطاقات الجهات الخارجية، مما يُخفّف XSS. `frame-ancestors 'none'` يمنع clickjacking.

Example Usage

// next.config.js headers: { key: 'Content-Security-Policy', value: `script-src 'self'; object-src 'none'; frame-ancestors 'none'` }

// next.config.js headers: { key: 'Content-Security-Policy', value: `script-src 'self'; object-src 'none'; frame-ancestors 'none'` }

Knowledge Graph

Avoid these mistakes when using Content Security Policy:

1

Starting with a policy that's too strict and breaks the app — use report-only mode first

2

Forgetting to include CDN domains in `script-src` — third-party scripts will be blocked

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Content Security Policy.

Explain:
1. What is Content Security Policy and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Starting with a policy that's too strict and breaks the app — use report-only mode first, Forgetting to include CDN domains in `script-src` — third-party scripts will be blocked
5. Best practices and production tips

Official Resources