CORS vs CSP — How Cross-Origin Resource Sharing and Content Security Policy Differ

In this tutorial, you will learn about CORS vs CSP. We cover key concepts, practical examples, and best practices to help you master this topic.

CORS and CSP are complementary browser security mechanisms: CORS controls whether JavaScript can read responses from cross-origin servers, while CSP controls which resources can be loaded and executed on a page.

What You'll Learn

• The distinct purposes of CORS and CSP
• How CORS and CSP overlap and differ
• Best practices for using both together

Why It Matters

Relying on CORS alone for security is insufficient. CSP provides protection against XSS and data injection that CORS cannot. Combined, they provide defense in depth. DodaTech's security policy requires both CORS and CSP headers on all web applications.

flowchart LR
    subgraph "CORS"
        READ["Controls cross-origin response reading"]
        API["API security: who can read responses"]
    end
    subgraph "CSP"
        LOAD["Controls resource loading"]
        EXEC["Prevents XSS and code injection"]
    end
    CORS -->|"Server opt-in"| API
    CSP -->|"Page opt-in"| EXEC
    style CORS fill:#dbeafe,stroke:#2563eb
    style CSP fill:#fef08a,stroke:#ca8a04

Code Examples

// CORS controls response reading
// This request might be sent (CSP allows script), but:
fetch('https://api.example.com/data', {
  credentials: 'include'
})
.then(response => {
  // CORS determines if we can read the response
  return response.json();
});

// CSP controls if this script executes
// Content-Security-Policy: script-src 'self'
// If the page CSP does not allow inline scripts,
// this entire fetch call would never run

# CORS headers (server-side, response-level)
response.headers['Access-Control-Allow-Origin'] = 'https://app.example.com'
response.headers['Access-Control-Allow-Credentials'] = 'true'

# CSP headers (page-serving, document-level)
# These go on the HTML page response, not the API
response.headers['Content-Security-Policy'] = \
    "default-src 'self'; " \
    "script-src 'self' https://cdn.example.com; " \
    "connect-src 'self' https://api.example.com;"

// Both CORS and CSP needed for a secure API client
// CSP on the HTML page:
// Content-Security-Policy: connect-src https://api.example.com
// This restricts which APIs the page can call

// CORS on the API:
// Access-Control-Allow-Origin: https://app.example.com
// This restricts which origins can read the API response

// CSP would block this if api.example.com is not in connect-src
fetch('https://api.example.com/data');

# Check both CORS and CSP headers
curl -I https://app.example.com | grep -i "content-security-policy"
curl -I -H "Origin: https://app.example.com" \
  https://api.example.com/data | grep -i "access-control"

Common Mistakes

1. Using CSP to Enforce Cross-Origin Read Restrictions

CSP does not control response reading. Use CORS for that.

2. Thinking CORS Prevents XSS

CORS has nothing to do with XSS. CSP is the primary XSS defense.

3. Confusing connect-src (CSP) with Access-Control-Allow-Origin (CORS)

connect-src controls which URLs the page can connect to. ACAO controls which origins can read the response.

4. Relying Only on CORS for API Security

CORS is browser-enforced. Server-side authentication is always required.

5. Ignoring CSP Report-Only Mode

CSP can be deployed in report-only mode to monitor violations before enforcement.

Practice Questions

1. What does CORS control?
2. What does CSP control?
3. Can CSP replace CORS?
4. Which header controls whether an API response can be read cross-origin?
5. Which header controls whether a script from a CDN can execute?

Answers:

1. Whether JavaScript can read cross-origin API responses.
2. Which resources a page can load and execute.
3. No. They serve different purposes and complement each other.
4. Access-Control-Allow-Origin (CORS header on the API response).
5. Content-Security-Policy (CSP header on the HTML page).

Challenge: Configure both CORS and CSP for a single-page application. Set CSP to restrict connect-src to the API origin, and CORS to restrict the API to the SPA origin. Verify that both policies are enforced and test scenarios where one is misconfigured.

FAQ

Mini Project

Build a security configuration tool that generates both CORS and CSP headers for a given application architecture. Input your API origins, CDN domains, and third-party services. Output the correct CORS config for your API server and CSP config for your HTML page. Include interactive testing.

What's Next

Review the CORS project to apply all concepts in a real-world application, or explore CORS vs OpenAPI CORS configuration patterns.