Security Headers

رؤوس الأمان

IntermediateSecurity1 min read

security-headershttp-security-headerscsphsts

Definition

HTTP response headers that instruct browsers how to behave securely — preventing XSS, clickjacking, MIME sniffing, and forcing HTTPS connections.

رؤوس استجابة HTTP تُعلّم المتصفحات كيفية التصرف بأمان — منع XSS والنقر الخادع واستنشاق MIME وإجبار اتصالات HTTPS.

Why It Matters

Security headers are a low-effort, high-impact defense layer. A proper CSP alone prevents most XSS attacks even if your app has XSS vulnerabilities — the browser refuses to execute scripts from unauthorized sources.

رؤوس الأمان طبقة دفاعية منخفضة الجهد وعالية التأثير. يمنع CSP المناسب وحده معظم هجمات XSS حتى لو كان التطبيق يحتوي على ثغرات — لأن المتصفح يرفض تنفيذ النصوص من مصادر غير مُفوَّض بها.

Full Definition

Security headers are HTTP response headers that add browser-enforced protections. Key headers: Content-Security-Policy (CSP) — defines which sources scripts may be loaded from, blocking XSS; Strict-Transport-Security (HSTS) — forces HTTPS, preventing protocol downgrade attacks; X-Frame-Options — prevents clickjacking by blocking iframe embedding; X-Content-Type-Options: nosniff — prevents MIME sniffing; Referrer-Policy — controls referrer info; Permissions-Policy — restricts browser features (camera, geolocation). In Next.js, configure in `next.config.js` under `headers()`.

رؤوس الأمان هي رؤوس استجابة HTTP تُضيف حمايات يُطبّقها المتصفح. الرؤوس الرئيسية: CSP لحجب XSS وHSTS لإجبار HTTPS وX-Frame-Options لمنع clickjacking. في Next.js تُكوَّن في next.config.js تحت headers().

Example Usage

“Security headers are a low-effort, high-impact defense layer. A proper CSP alone prevents most XSS attacks even if your app has XSS vulnerabilities — the browser refuses to execute scripts from unauthorized sources.”

“رؤوس الأمان طبقة دفاعية منخفضة الجهد وعالية التأثير. يمنع CSP المناسب وحده معظم هجمات XSS حتى لو كان التطبيق يحتوي على ثغرات — لأن المتصفح يرفض تنفيذ النصوص من مصادر غير مُفوَّض بها.”

Knowledge Graph

AI Builder Tips

Avoid these mistakes when using Security Headers:

Setting CSP to `default-src *` (wildcard) → This defeats the entire purpose of CSP. Use specific origins: `default-src 'self'; script-src 'self' https://trusted.cdn.com`.

Not testing headers after deployment → Vercel and other platforms may strip or override custom headers. Verify with securityheaders.com after every deploy.

Forgetting to apply headers to API routes → API responses with CORS misconfigurations can bypass security headers on the page. Apply headers everywhere.

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 Security Headers.

Explain:
1. What is Security Headers and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Setting CSP to `default-src *` (wildcard) → This defeats the entire purpose of CSP. Use specific origins: `default-src 'self'; script-src 'self' https://trusted.cdn.com`., Not testing headers after deployment → Vercel and other platforms may strip or override custom headers. Verify with securityheaders.com after every deploy., Forgetting to apply headers to API routes → API responses with CORS misconfigurations can bypass security headers on the page. Apply headers everywhere.
5. Best practices and production tips

Official Resources

No official documentation link on file for Security Headers yet.

Browse all AI terms Create free account