Modern web applications rely heavily on browsers to deliver rich user experiences and integrate with multiple backend services and third-party tools. While this flexibility enables rapid innovation, it also increases the attack surface.

Two foundational browser security mechanisms, Content Security Policy (CSP) and Cross-Origin Resource Sharing (CORS), help enforce strict trust boundaries between the frontend, backend, and external services.

📌 What You'll Learn

  • What CSP and CORS are
  • Why are they important
  • Their benefits
  • How to enable them
  • How to whitelist domains

🏗️ Where CSP and CORS Fit in Architecture

None

🔐 Content Security Policy (CSP)

What is CSP?

Content Security Policy is a browser security feature that defines which resources a web page is allowed to load and execute.

CSP acts as a resource allowlist enforced by the browser

CSP helps mitigate

  • Cross-Site Scripting (XSS)
  • Script injection attacks
  • Unauthorized data exfiltration
  • Malicious third-party resources

✅ Benefits of CSP

  • Prevents execution of injected scripts
  • Restricts data transmission to trusted endpoints
  • Protects authentication tokens
  • Limits supply-chain risk
  • Reduces vulnerability exposure

⚙️ Enabling CSP

Basic Policy

Content-Security-Policy: default-src 'self';

Example Production Policy

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  connect-src 'self' https://api.example.com;
  img-src 'self' data: https://images.example.com;
  frame-ancestors 'none';

🧾 How to Whitelist a Domain in CSP

Allow scripts

script-src 'self' https://cdn.partner.com;

Allow API communication

connect-src 'self' https://api.partner.com;

Allow images

img-src 'self' https://images.partner.com;

🌐 Cross-Origin Resource Sharing (CORS)

What is CORS?

CORS is a browser mechanism that controls which external origins are allowed to access your APIs.

👉 CORS acts as a caller allowlist for backend services

✅ Benefits of CORS

  • Prevents unauthorized websites from calling APIs
  • Protects session cookies and tokens
  • Enables secure integrations
  • Reduces data leakage risk
  • Enforces origin-level access control

⚙️ Enabling CORS

Basic Header

Access-Control-Allow-Origin: https://app.example.com

Example API Configuration

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

🧾 How to Whitelist Domains in CORS

Single Domain

Access-Control-Allow-Origin: https://app.example.com

🔄 Request Flow Interaction

None

⚠️ Common Mistakes to Avoid

  • Using wildcard (*) in production
  • Allowing unsafe-inline scripts unnecessarily
  • Not handling preflight requests
  • Allowing excessive domains
  • Not monitoring CSP violations

🛡️ Recommended Security Headers Bundle

Deploy CSP and CORS alongside:

  • Strict-Transport-Security (HSTS)
  • X-Content-Type-Options
  • X-Frame-Options
  • Referrer-Policy
  • Permissions-Policy

🧠 Key Takeaway

CSP and CORS establish critical trust boundaries in modern web applications. They control what your app can load and who can interact with your APIs, significantly reducing the attack surface while enabling safe integrations.

✍️ Final Note

Implementing CSP and CORS thoughtfully with monitoring, governance, and phased rollout ensures strong security without compromising user experience.

None