Optimisez vos OPTIONS avec Access-Control-Max-Age

Optimisez vos OPTIONS avec Access-Control-Max-Age

Bonjour,

Aujourd’hui, je partage avec vous un header HTTP que je viens de découvrir : Access-Control-Max-Age.

Aujourd’hui, on execute des requêtes Ajax (ou XHR) sans arrêt, et souvent d’un site vers un autre. Pour des raisons de sécurité, pour qu’une page puisse réaliser une requête Ajax vers un autre site, il faut que celui-ci lui donne le droits, c’est ce qu’on appel CORS (Cross-Origine-Resource-Sharing) : la possibilité de partager des resources web entre deux origine différente depuis un navigateur.

Ce qui se passe alors, c’est que le navigateur va réaliser, avant chaque appel vers une origine différente, une requête de prefligth (requête de type HTTP OPTIONS) pour demander au serveur distant s’il a le droits d’effectuer des ressources vers lui. Si celui-ci est configuré pour accepter les requêtes distante, il va lui envoyer une réponse de status 200 avec des headers décrivant les origines acceptée, les méthodes acceptée et les headers HTTP acceptée. Si tout est OK, le navigateur va alors réaliser la vrai requête.

Voici un exemple typique de configuration Apache http pour l’envoi de ces header CORS :

    <ifmodule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
        Header set Access-Control-Allow-Methods "POST, GET, OPTIONS"
        Header set Access-Control-Allow-Headers "Authorization, Content-Type, Accept"
    </ifmodule>

Le problème est que si votre site fait des appels récurrent vers la même origine, cette requête de preflight est rejouée à chaque appel (ou toute les 5s pour chrome) ce qui bien sur impact les performances. Voici une petite image qui illustre le problème (on voit bien la requête OPTIONS faite avant chaque appel à GET:/styles?q=cool) :

C’est là que Access-Control-Max-Age entre en jeux, il permet de préciser que l’Acess-Control (le résultat du preflight) est valide pendant un certain temps et éviter donc de refaire à chaque requête un preflight. Certain navigateur ont une valeur maximum d’autre pas (15mn pour chrome par exemple). Pour l’activer, il suffit d’ajouter le header avec une valeur en seconde.

Voici un l’exemple précédent de configuration Apache http avec un Access-Control-Max-Age à un jour :

    <ifmodule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
        Header set Access-Control-Allow-Methods "POST, GET, OPTIONS"
        Header set Access-Control-Allow-Headers "Authorization, Content-Type, Accept"
        Header set Access-Control-Max-Age 86400
    </ifmodule>

Et voici ce que donne maintenant la réaliser de deux appels successif vers la même origine : on n’a plus qu’un seul preflight!

Pour plus d’informations : https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.