Aller au contenu principal

CORS (approfondi)

Progression

#CORS (approfondi)

Le navigateur impose la politique de même origine par défaut. CORS (Cross‑Origin Resource Sharing) définit comment un serveur peut autoriser des requêtes depuis une autre origine de manière fine.

#Prévol (preflight) et simples requêtes

Les simples requêtes (GET/HEAD/POST) sans en‑têtes personnalisés et avec des types sûrs n’envoient pas de prévol. Dès que vous utilisez des en‑têtes non simples ou des méthodes différentes, le navigateur émet un OPTIONS de prévol pour vérifier les autorisations.

En‑têtes clés côté serveur:

  • Access-Control-Allow-Origin: origine autorisée ou * (attention aux credentials).
  • Access-Control-Allow-Methods: méthodes permises.
  • Access-Control-Allow-Headers: en‑têtes personnalisés permises.
  • Access-Control-Allow-Credentials: true: autorise cookies/Authorization; interdit * pour l’origine.
  • Access-Control-Max-Age: mise en cache du prévol.

#Bonnes pratiques

Une politique CORS précise réduit la surface: répondez avec l’origine exacte attendue et limitez méthodes et en‑têtes autorisés; variez la réponse sur Origin (Vary: Origin). Évitez les credentials pour des API publiques; si vous les utilisez, n’employez jamais * pour Allow-Origin. Pour des échanges inter‑origines embarqués (iframes), préférez un protocole postMessage bien borné plutôt qu’une politique CORS large.

#Explorateur CORS interactif

Explorateur CORS (Origin, Credentials, Preflight)
Preflight: OKRequête: AUTORISÉE
Client (navigateur)
Origin
Méthode
Content-Type
Serveur (API)
Politique
Allow-Credentials
Allow-Methods
Allow-Headers
Expose-Headers
Preflight (OPTIONS)
Preflight: OK
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, X-Auth-Token
Credentials: include
Réponse préflight
Access-Control-Allow-Methods: OPTIONS, GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, X-Auth-Token
Vary: Origin
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Credentials: true
Réponse finale
Requête: AUTORISÉE
Access-Control-Allow-Origin: https://app.example.com
Vary: Origin
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: X-Request-ID
Rappel: avec credentials, ne pas utiliser `Access-Control-Allow-Origin: *`. Faites écho de l’origine autorisée et ajoutez Vary: Origin.
Conseils: préférez listes blanches par origin, exposez les en-têtes utiles via Expose-Headers, et gardez les règles cohérentes côté proxy/API et app. Les en-têtes de requête personnalisés déclenchent un preflight.

#Aides visuelles

  • Jamais * avec credentials; écho précis de Origin et Vary: Origin.
  • Réduire Allow-Methods/Allow-Headers au minimum utile.
  • Configurer Access-Control-Max-Age pour amortir les prévols.
  • Exposer uniquement ce qui est nécessaire (Access-Control-Expose-Headers).

#Flow: décision CORS

1/4

#Atelier

Écrivez deux réponses: (1) API publique sans credentials avec Allow-Origin: https://app.exemple, (2) API privée avec cookies (Allow-Origin: https://admin.exemple, Allow-Credentials: true, Vary: Origin). Comparez le comportement du navigateur avec et sans Max-Age sur le prévol pour observer l’impact sur la latence perçue.

#Diagramme: prévol puis requête

Navigateur
API
1. OPTIONS /resource (preflight)
2. 204 + ACAO/ACAM/ACAH + Max-Age
3. POST /resource (avec headers)
4. 200 + Access-Control-Allow-Origin

Mini‑exercice: listez les en‑têtes de votre requête front (méthode, headers). Déterminez si elle est « simple ». Si non, proposez une politique CORS minimale côté serveur (origines, méthodes, en‑têtes, Max‑Age) et justifiez.