CORS, CSP et politiques d’en-têtes sécurisés
Verrouillez l’accès inter-origines et injectez des en-têtes de sécurité renforcés sans interrompre les clients légitimes.
CORS, CSP et politiques d’en-têtes sécurisés est une leçon FastAPI Backend Development Bootcamp gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage FastAPI Backend Development Bootcamp, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours FastAPI Backend Development Bootcamp comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Why Headers Are Your Outer Perimeter
Before a request ever reaches your business logic, the browser and your server negotiate trust through HTTP headers. Two families dominate API hardening:
- CORS (Cross-Origin Resource Sharing) decides which browser origins may read your responses.
- Security response headers (CSP, HSTS, X-Frame-Options, etc.) tell the browser how to constrain the page it renders.
The goal of this lesson is to lock down cross-origin access and inject hardened headers without breaking legitimate clients. Misconfigure them and you either leak data to any website or block your own frontend.
The CORS Mental Model
CORS is enforced by the browser, not your server. Your API simply emits Access-Control-* headers; the browser decides whether to expose the response to JavaScript.
- A simple request (GET/POST with safe headers) is sent immediately; the browser checks
Access-Control-Allow-Originon the response. - A preflight
OPTIONSrequest is sent first for non-simple methods (PUT, DELETE) or custom headers likeAuthorization.
Critically: CORS does not protect server-to-server calls, curl, or mobile apps. It is purely a browser same-origin relaxation mechanism.
Configuring CORSMiddleware
FastAPI ships Starlette's CORSMiddleware. The cardinal rule: never combine allow_origins=["*"] with allow_credentials=True — the browser rejects that pairing, and it would be a data-leak anyway.
Pin an explicit allow-list of origins instead of a wildcard.
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
app.add_middleware(
CORSMiddleware,
allow_origins=[
"https://app.example.com",
"https://admin.example.com",
],
allow_credentials=True,
allow_methods=["GET", "POST", "PUT", "DELETE"],
allow_headers=["Authorization", "Content-Type"],
max_age=600,
)Wildcards, Credentials and Regex
When you must accept many subdomains, do not fall back to "*". Use allow_origin_regex so the browser still gets back the exact origin it sent, which is required for credentialed requests.
allow_methods=["*"]andallow_headers=["*"]are tolerable, but only whenallow_credentials=False.- With credentials on, every value must be explicit or regex-matched.
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
app.add_middleware(
CORSMiddleware,
allow_origin_regex=r"https://([a-z0-9-]+)\.example\.com",
allow_credentials=True,
allow_methods=["*"],
allow_headers=["Authorization", "Content-Type"],
expose_headers=["X-Request-ID"],
)Validating an Origin Allow-List in Pure Python
The logic CORS middleware runs is conceptually simple: reflect the request origin only if it passes validation. Here is a standalone validator you could unit-test, mirroring how a custom origin check behaves before any framework is involved.
import re
ALLOWED = {"https://app.example.com", "https://admin.example.com"}
SUBDOMAIN = re.compile(r"^https://[a-z0-9-]+\.example\.com$")
def resolve_allow_origin(origin: str) -> str | None:
if origin in ALLOWED or SUBDOMAIN.match(origin):
return origin # echo exact origin back
return None # do not emit Access-Control-Allow-Origin
for test in [
"https://app.example.com",
"https://team-7.example.com",
"https://evil.com",
"http://app.example.com",
]:
print(test, "->", resolve_allow_origin(test))Hardening Headers with a Custom Middleware
CORS handles cross-origin reads; a separate middleware injects defensive headers on every response. The essentials:
Strict-Transport-Security(HSTS) forces HTTPS.X-Content-Type-Options: nosniffstops MIME sniffing.X-Frame-Options: DENYblocks clickjacking.Referrer-Policylimits leaked URLs.
from starlette.middleware.base import BaseHTTPMiddleware
HEADERS = {
"Strict-Transport-Security": "max-age=63072000; includeSubDomains; preload",
"X-Content-Type-Options": "nosniff",
"X-Frame-Options": "DENY",
"Referrer-Policy": "strict-origin-when-cross-origin",
"Permissions-Policy": "geolocation=(), microphone=(), camera=()",
}
class SecurityHeadersMiddleware(BaseHTTPMiddleware):
async def dispatch(self, request, call_next):
response = await call_next(request)
for key, value in HEADERS.items():
response.headers.setdefault(key, value)
return response
app.add_middleware(SecurityHeadersMiddleware)Content-Security-Policy Fundamentals
CSP is the most powerful header for stopping XSS. It tells the browser which sources are allowed for scripts, styles, images, and connections. For an API serving JSON, a very tight default works because no inline content is rendered.
default-src 'none'denies everything unless overridden.frame-ancestors 'none'is the modern replacement for X-Frame-Options.- For HTML pages, prefer a nonce over
'unsafe-inline'.
API_CSP = "; ".join([
"default-src 'none'",
"frame-ancestors 'none'",
"base-uri 'none'",
"form-action 'none'",
])
# Attach on the security middleware:
# response.headers.setdefault("Content-Security-Policy", API_CSP)
print(API_CSP)Nonce-Based CSP for HTML Responses
When your FastAPI app renders HTML (docs, an admin page), inline scripts need a per-response nonce. Generate a fresh random nonce on each request, place it in both the CSP header and the <script nonce=...> tag.
Here is the standalone nonce-generation logic you would reuse inside a request handler.
import secrets
def new_nonce() -> str:
return secrets.token_urlsafe(16)
def csp_with_nonce(nonce: str) -> str:
return "; ".join([
"default-src 'self'",
f"script-src 'self' 'nonce-{nonce}'",
"style-src 'self'",
"object-src 'none'",
"frame-ancestors 'none'",
])
n = new_nonce()
print("nonce:", n)
print(csp_with_nonce(n))Report-Only Rollout Without Breaking Clients
Deploying a strict CSP blindly will break legitimate pages. The safe path is Content-Security-Policy-Report-Only: the browser does not enforce the policy but reports violations to an endpoint you control.
- Ship report-only first, collect violations for days.
- Tighten directives until reports go quiet, then switch to the enforcing header.
This is the single most important practice for not locking out real users.
from fastapi import FastAPI, Request, Response
app = FastAPI()
CSP = "default-src 'self'; report-uri /csp-report"
@app.middleware("http")
async def csp_report_only(request: Request, call_next):
response: Response = await call_next(request)
response.headers.setdefault("Content-Security-Policy-Report-Only", CSP)
return response
@app.post("/csp-report")
async def collect(request: Request):
payload = await request.json()
# log payload["csp-report"] to your SIEM
return Response(status_code=204)Preflight, Caching and Performance
Each non-simple cross-origin call triggers a preflight OPTIONS round-trip. Tune it so you stay secure but fast:
- Set
max_age(emitted asAccess-Control-Max-Age) so browsers cache the preflight result. Chromium caps it at 2 hours. - Keep
allow_headersminimal — every custom header forces a preflight. - Avoid adding
Authorizationto simple GETs if you can pass it another safe way; otherwise expect a preflight.
Order matters in Starlette: middleware added last runs first (outermost). Add CORS so it wraps your security-header middleware, letting preflights short-circuit cleanly.
Putting It All Together
A hardened FastAPI bootstrap layers the pieces in the right order: security headers innermost, CORS outermost, with explicit origins and a tight CSP. This is the template you would deploy to production.
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from starlette.middleware.base import BaseHTTPMiddleware
SEC = {
"Strict-Transport-Security": "max-age=63072000; includeSubDomains; preload",
"X-Content-Type-Options": "nosniff",
"Referrer-Policy": "strict-origin-when-cross-origin",
"Content-Security-Policy": "default-src 'none'; frame-ancestors 'none'",
}
class SecHeaders(BaseHTTPMiddleware):
async def dispatch(self, request, call_next):
resp = await call_next(request)
for k, v in SEC.items():
resp.headers.setdefault(k, v)
return resp
app = FastAPI()
app.add_middleware(SecHeaders) # added first -> runs inner
app.add_middleware( # added last -> runs outer
CORSMiddleware,
allow_origins=["https://app.example.com"],
allow_credentials=True,
allow_methods=["GET", "POST", "PUT", "DELETE"],
allow_headers=["Authorization", "Content-Type"],
max_age=600,
)Quick Check: Credentialed CORS
Your React frontend at https://app.example.com sends authenticated requests with cookies, so it needs allow_credentials=True. What is the correct origin configuration?
Recap and Takeaways
You hardened the request perimeter without locking out real clients:
- CORS is browser-enforced: use an explicit allow-list or
allow_origin_regex, and never pair"*"withallow_credentials=True. - Security headers (HSTS, nosniff, Referrer-Policy, Permissions-Policy) belong on every response via a small middleware.
- CSP is your strongest anti-XSS control:
default-src 'none'for JSON APIs, nonce-based policies for HTML. - Roll out CSP with Report-Only first, watch violations, then enforce.
- Tune
max_ageand minimalallow_headersto keep preflights cheap, and remember middleware order: added last runs outermost.
Secure defaults plus a measured rollout is how you ship hardening that production traffic survives.
Questions Fréquemment Posées
La leçon « CORS, CSP et politiques d’en-têtes sécurisés » est-elle gratuite ?
Oui — le texte complet de « CORS, CSP et politiques d’en-têtes sécurisés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours FastAPI Backend Development Bootcamp, passe à CoddyKit PRO. Le cours FastAPI Backend Development Bootcamp comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « CORS, CSP et politiques d’en-têtes sécurisés » ?
Verrouillez l’accès inter-origines et injectez des en-têtes de sécurité renforcés sans interrompre les clients légitimes. Tu pratiques FastAPI Backend Development Bootcamp avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer FastAPI Backend Development Bootcamp ?
Aucune expérience préalable n'est requise. FastAPI Backend Development Bootcamp sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « CORS, CSP et politiques d’en-têtes sécurisés » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon FastAPI Backend Development Bootcamp ?
Oui. Chaque leçon FastAPI Backend Development Bootcamp inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Réduction des dix principaux risques de sécurité des API selon OWASP
- Limitation du débit et protection contre les abus de robots
- Gestion des secrets et rotation des clés
- CORS, CSP et politiques d’en-têtes sécurisés