CORS & Security Headers

1. CORS Explained in 20 Seconds - Zomato Example

Browser Rule: For security, JS can only call APIs from same "origin" = Protocol + Domain + Port.

Zomato App: https://zomato.com calls https://api.zomato.com. Different domains! Browser blocks by default.

Solution: API server must send header: Access-Control-Allow-Origin: https://zomato.com = "I trust this site".

2. Fix CORS in 3 Lines - Program.cs

var builder = WebApplication.CreateBuilder(args);

// 1. Define Policy
builder.Services.AddCors(options => {
  options.AddPolicy("AllowReactApp", policy => {
    policy.WithOrigins("http://localhost:3000", "https://myapp.com")
         .AllowAnyHeader()
         .AllowAnyMethod(); // GET, POST, PUT, DELETE
  });
});

var app = builder.Build();

// 2. Use it - ORDER MATTERS: Before Auth, Before Controllers
app.UseCors("AllowReactApp");
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();
app.Run();

Done. React app can now call API. No more red errors.

3. Security Headers - Stop XSS + Clickjacking in 1 Middleware

Problem: Your API might return HTML. Hackers iframe it, steal clicks. Or inject scripts.

Fix: Add security headers to every response.

// Program.cs - Add after UseCors
app.Use(async (context, next) => {
  context.Response.Headers.Add("X-Content-Type-Options", "nosniff");
  context.Response.Headers.Add("X-Frame-Options", "DENY");
  context.Response.Headers.Add("X-XSS-Protection", "1; mode=block");
  context.Response.Headers.Add("Referrer-Policy", "strict-origin-when-cross-origin");
  context.Response.Headers.Add("Content-Security-Policy", "default-src 'self'");
  await next();
});

Result: Scan your API on securityheaders.com = A+ rating. Takes 5 mins.

1. Theory: Preflight OPTIONS Request

Question: "Why do I see OPTIONS request before my POST in DevTools?"

Answer: For "complex" requests = POST with JSON, or custom headers like Authorization, browser sends preflight OPTIONS first.

1. Browser → API: OPTIONS /api/orders + Header: Origin: http://localhost:3000 + Access-Control-Request-Method: POST
2. API → Browser: Access-Control-Allow-Origin: http://localhost:3000 + Access-Control-Allow-Methods: POST
3. Browser: "OK approved" → Sends actual POST /api/orders

If preflight fails: Browser never sends POST. You see CORS error. app.UseCors() handles preflight automatically.

2. CORS with Credentials - The JWT Cookie Trap

Scenario: You store JWT in HttpOnly cookie. React calls API.

Must configure:

policy.WithOrigins("http://localhost:3000")
     .AllowCredentials() // MUST add this
     .AllowAnyHeader()
     .AllowAnyMethod();

And in JS: fetch(url, { credentials: 'include' })

Critical: If you use AllowCredentials(), you CANNOT use AllowAnyOrigin(). Must specify exact origin. Browser spec forbids * with credentials.

3. Content-Security-Policy CSP - The XSS Killer

Theory: CSP tells browser: "Only load scripts from these domains". Stops injected scripts.

Strict CSP for API: default-src 'none'; frame-ancestors 'none' = API returns JSON only, no HTML, can't be iframed.

For Swagger UI: default-src 'self'; script-src 'self' 'unsafe-inline' because Swagger needs inline JS.

Test: Browser console shows CSP violations. Fix until clean.

4. CORS Policies Per Endpoint

Global policy in Program.cs applies to all. Override per controller:

[ApiController]
[EnableCors("AllowPartnerApp")] // Different policy
[Route("api/[controller]")]
public class PartnerController : ControllerBase {...}

// Or disable
[DisableCors]
[HttpGet("public")]
public IActionResult GetPublic() {...}