0Pricing
FastAPI Backend Development Bootcamp · レッスン

CORS、CSP、安全なヘッダーポリシー

正当なクライアントを壊さずにクロスオリジンアクセスを制限し、強化されたセキュリティヘッダーを付与します。

「CORS、CSP、安全なヘッダーポリシー」はCoddyKit上の無料FastAPI Backend Development Bootcampレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFastAPI Backend Development Bootcamp学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 FastAPI Backend Development Bootcampコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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-Origin on the response.
  • A preflight OPTIONS request is sent first for non-simple methods (PUT, DELETE) or custom headers like Authorization.

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=["*"] and allow_headers=["*"] are tolerable, but only when allow_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: nosniff stops MIME sniffing.
  • X-Frame-Options: DENY blocks clickjacking.
  • Referrer-Policy limits 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 as Access-Control-Max-Age) so browsers cache the preflight result. Chromium caps it at 2 hours.
  • Keep allow_headers minimal — every custom header forces a preflight.
  • Avoid adding Authorization to 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 "*" with allow_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_age and minimal allow_headers to 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.

よくある質問

「CORS、CSP、安全なヘッダーポリシー」レッスンは無料ですか？

はい。「CORS、CSP、安全なヘッダーポリシー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、FastAPI Backend Development Bootcampコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 FastAPI Backend Development Bootcampコースには全4レッスンが含まれています。

「CORS、CSP、安全なヘッダーポリシー」で何を学びますか？

正当なクライアントを壊さずにクロスオリジンアクセスを制限し、強化されたセキュリティヘッダーを付与します。 ブラウザで直接実行するハンズオンコードでFastAPI Backend Development Bootcampを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

FastAPI Backend Development Bootcampを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFastAPI Backend Development Bootcampは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「CORS、CSP、安全なヘッダーポリシー」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFastAPI Backend Development Bootcampレッスンでコードを書いて実行できますか？

はい。すべてのFastAPI Backend Development Bootcampレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. OWASP API Security Top 10への対策
  2. レート制限とボット悪用対策
  3. シークレット管理とキーのローテーション
  4. CORS、CSP、安全なヘッダーポリシー
← FastAPI Backend Development Bootcampに戻る