{"id":685,"date":"2017-04-12T11:41:49","date_gmt":"2017-04-12T09:41:49","guid":{"rendered":"http:\/\/www.loicmathieu.fr\/wordpress\/?p=685"},"modified":"2017-04-12T11:53:30","modified_gmt":"2017-04-12T09:53:30","slug":"optimisez-vos-options-avec-access-control-max-age","status":"publish","type":"post","link":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/informatique\/optimisez-vos-options-avec-access-control-max-age\/","title":{"rendered":"Optimisez vos OPTIONS avec Access-Control-Max-Age"},"content":{"rendered":"<p>Bonjour,<\/p>\n<p>Aujourd&rsquo;hui, je partage avec vous un header HTTP que je viens de d\u00e9couvrir : <strong>Access-Control-Max-Age<\/strong>.<\/p>\n<p>Aujourd\u2019hui, on execute des requ\u00eates Ajax (ou XHR) sans arr\u00eat, et souvent d&rsquo;un site vers un autre. Pour des raisons de s\u00e9curit\u00e9, pour qu&rsquo;une page puisse r\u00e9aliser une requ\u00eate Ajax vers un autre site, il faut que celui-ci lui donne le droits, c&rsquo;est ce qu&rsquo;on appel CORS (Cross-Origine-Resource-Sharing) :  la possibilit\u00e9 de partager des resources web entre deux origine diff\u00e9rente depuis un navigateur.<\/p>\n<p>Ce qui se passe alors, c&rsquo;est que le navigateur va r\u00e9aliser, avant chaque appel vers une origine diff\u00e9rente, une requ\u00eate de <strong>prefligth<\/strong> (requ\u00eate de type HTTP <strong>OPTIONS<\/strong>) pour demander au serveur distant s&rsquo;il a le droits d&rsquo;effectuer des ressources vers lui. Si celui-ci est configur\u00e9 pour accepter les requ\u00eates distante, il va lui envoyer une r\u00e9ponse de status 200 avec des headers d\u00e9crivant les origines accept\u00e9e, les m\u00e9thodes accept\u00e9e et les headers HTTP accept\u00e9e. Si tout est OK, le navigateur va alors r\u00e9aliser la vrai requ\u00eate.<\/p>\n<p>Voici un exemple typique de configuration Apache http pour l&rsquo;envoi de ces header CORS : <\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n    \n        Header set Access-Control-Allow-Origin \"*\"\n        Header set Access-Control-Allow-Methods \"POST, GET, OPTIONS\"\n        Header set Access-Control-Allow-Headers \"Authorization, Content-Type, Accept\"\n    \n<\/pre>\n<p>Le probl\u00e8me est que si votre site fait des appels r\u00e9current vers la m\u00eame origine, cette requ\u00eate de preflight est rejou\u00e9e \u00e0 chaque appel (ou toute les 5s pour chrome) ce qui bien sur impact les performances. Voici une petite image qui illustre le probl\u00e8me (on voit bien la requ\u00eate OPTIONS faite avant chaque appel \u00e0 GET:\/styles?q=cool) :<\/p>\n<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/loicmathieu.fr\/wordpress\/wp-content\/uploads\/CORS_before.png?resize=640%2C117\" alt=\"\" width=\"640\" height=\"117\" class=\"alignnone size-full wp-image-688\" srcset=\"https:\/\/i0.wp.com\/loicmathieu.fr\/wordpress\/wp-content\/uploads\/CORS_before.png?w=718&amp;ssl=1 718w, https:\/\/i0.wp.com\/loicmathieu.fr\/wordpress\/wp-content\/uploads\/CORS_before.png?resize=300%2C55&amp;ssl=1 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/>\n<p>C&rsquo;est l\u00e0 que Access-Control-Max-Age entre en jeux, il permet de pr\u00e9ciser que l&rsquo;Acess-Control (le r\u00e9sultat du preflight) est valide pendant un certain temps et \u00e9viter donc de refaire \u00e0 chaque requ\u00eate un preflight. Certain navigateur ont une valeur maximum d&rsquo;autre pas (15mn pour chrome par exemple). Pour l&rsquo;activer, il suffit d&rsquo;ajouter le header avec une valeur en seconde.<\/p>\n<p>Voici un l&rsquo;exemple pr\u00e9c\u00e9dent de configuration Apache http avec un Access-Control-Max-Age \u00e0 un jour : <\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n    \n        Header set Access-Control-Allow-Origin \"*\"\n        Header set Access-Control-Allow-Methods \"POST, GET, OPTIONS\"\n        Header set Access-Control-Allow-Headers \"Authorization, Content-Type, Accept\"\n        Header set Access-Control-Max-Age 86400\n    \n<\/pre>\n<p>Et voici ce que donne maintenant la r\u00e9aliser de deux appels successif vers la m\u00eame origine : on n&rsquo;a plus qu&rsquo;un seul preflight!<\/p>\n<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/loicmathieu.fr\/wordpress\/wp-content\/uploads\/CORS_after.png?resize=640%2C81\" alt=\"\" width=\"640\" height=\"81\" class=\"alignnone size-full wp-image-689\" srcset=\"https:\/\/i0.wp.com\/loicmathieu.fr\/wordpress\/wp-content\/uploads\/CORS_after.png?w=673&amp;ssl=1 673w, https:\/\/i0.wp.com\/loicmathieu.fr\/wordpress\/wp-content\/uploads\/CORS_after.png?resize=300%2C38&amp;ssl=1 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/>\n<p>Pour plus d&rsquo;informations : <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Access_control_CORS\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Access_control_CORS<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Bonjour, Aujourd&rsquo;hui, je partage avec vous un header HTTP que je viens de d\u00e9couvrir : Access-Control-Max-Age. Aujourd\u2019hui, on execute des requ\u00eates Ajax (ou XHR) sans arr\u00eat, et souvent d&rsquo;un site vers un autre. Pour des raisons de s\u00e9curit\u00e9, pour qu&rsquo;une page puisse r\u00e9aliser une requ\u00eate Ajax vers un autre site, il faut que celui-ci lui donne le droits, c&rsquo;est ce qu&rsquo;on appel CORS (Cross-Origine-Resource-Sharing) : la possibilit\u00e9 de partager des resources web entre deux origine diff\u00e9rente depuis un navigateur. Ce&#8230;<p class=\"read-more\"><a class=\"btn btn-default\" href=\"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/informatique\/optimisez-vos-options-avec-access-control-max-age\/\">Lire la suite<span class=\"screen-reader-text\"> Lire la suite<\/span><\/a><\/p><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[9],"tags":[151,14],"class_list":["post-685","post","type-post","status-publish","format-standard","hentry","category-informatique","tag-informatique","tag-web"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":827,"url":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/informatique\/devfest-lille-2018\/","url_meta":{"origin":685,"position":0},"title":"Devfest Lille 2018","author":"admin","date":"vendredi  6 juillet 2018","format":false,"excerpt":"Il y a quelques semaines, j'ai eu la chance d'assister au DevFest Lille, organis\u00e9 par le GDG Lille. Mon impression globale : une tr\u00e8s bonne organisation, des locaux sympa (merci l'IMT Lille-Douai), des talks int\u00e9r\u00e9ssant et beaucoup de bonne humeur! Voici un petit retour sur les talks auxquels j'ai assist\u00e9s\u2026","rel":"","context":"Dans &quot;informatique&quot;","block_context":{"text":"informatique","link":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/category\/informatique\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1650,"url":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/informatique\/le-profiler-sql-de-visualvm\/","url_meta":{"origin":685,"position":1},"title":"Le profiler SQL de VisualVM","author":"admin","date":"mardi  4 avril 2023","format":false,"excerpt":"Il y a peu, j'ai d\u00e9couvert le profiler SQL de VisualVM et je me suis dit que je devais aussi vous le faire d\u00e9couvrir ;). VisualVM est un outil qui fournit une interface visuelle pour afficher des informations d\u00e9taill\u00e9es sur les applications qui s'ex\u00e9cutent sur une machine virtuelle Java (JVM).\u2026","rel":"","context":"Dans &quot;informatique&quot;","block_context":{"text":"informatique","link":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/category\/informatique\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/loicmathieu.fr\/wordpress\/wp-content\/uploads\/Capture-decran-du-2023-04-03-14-17-25-1024x624.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/loicmathieu.fr\/wordpress\/wp-content\/uploads\/Capture-decran-du-2023-04-03-14-17-25-1024x624.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/loicmathieu.fr\/wordpress\/wp-content\/uploads\/Capture-decran-du-2023-04-03-14-17-25-1024x624.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":92,"url":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/informatique\/rest-architecture-orientee-ressource\/","url_meta":{"origin":685,"position":2},"title":"REST &#8211; Architecture Orient\u00e9e Ressource","author":"admin","date":"mercredi 25 mars 2009","format":false,"excerpt":"Au menu aujourd'hui, un sujet tr\u00e8s tendance: REST. Abord\u00e9\u00a0 par le biais de l'Architecture Orient\u00e9 Ressource (ou ROA: Resource Oriented Architecture), autrement dit, comment cr\u00e9er une architecture de service bas\u00e9 sur REST. D\u00e9finitions Comme toujours, commen\u00e7ons par quelques d\u00e9finitions. Je vais les faire assez th\u00e9orique sinon apr\u00e8s, il ne me\u2026","rel":"","context":"Dans &quot;informatique&quot;","block_context":{"text":"informatique","link":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/category\/informatique\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":386,"url":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/informatique\/chti-jug-html5-websocket-et-autres-protocole-de-communication\/","url_meta":{"origin":685,"position":3},"title":"Ch&rsquo;ti JUG: HTML5: WebSocket et autres protocole de communication","author":"admin","date":"dimanche 13 d\u00e9cembre 2009","format":false,"excerpt":"Jeudi s'est tenu dans les locaux d'ADEO une session du Ch'ti Jug sur HTML5 et tout particuli\u00e8rement les WebSockets: Kaazing HTML5 WebSocket Talk at the Ch\u2019ti JUG Meeting in Lille, France Pour ceux qui ne savent pas ce qu'est le Ch'ti Jug ou ce qu'est un Jug, voir l'introduction de\u2026","rel":"","context":"Dans &quot;informatique&quot;","block_context":{"text":"informatique","link":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/category\/informatique\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1330,"url":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/informatique\/devoxx-france-2021-ledition-9-3-4\/","url_meta":{"origin":685,"position":4},"title":"Devoxx France 2021 &#8211; l&rsquo;\u00e9dition 9 3\/4","author":"admin","date":"vendredi  1 octobre 2021","format":false,"excerpt":"Cette semaine, c'est Devoxx France. Et pour la premi\u00e8re fois depuis pas mal de temps, je sors de chez moi, et j'y vais ! Je vous \u00e9cris ces mots dans le train de retour de la deuxi\u00e8me journ\u00e9e, pas de troisi\u00e8me pour moi cette ann\u00e9e. J'ai assist\u00e9 \u00e0 quelques talks,\u2026","rel":"","context":"Dans &quot;informatique&quot;","block_context":{"text":"informatique","link":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/category\/informatique\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1731,"url":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/informatique\/optimisation-dindex-postgresql\/","url_meta":{"origin":685,"position":5},"title":"Optimisation d&rsquo;index PostgreSQL","author":"admin","date":"mardi 22 ao\u00fbt 2023","format":false,"excerpt":"Il y a quelque temps, j\u2019avais travaill\u00e9 sur des optimisations de temps d'ex\u00e9cution de requ\u00eates pour PostgreSQL, j'en parle ici : LE PROFILER SQL DE VISUALVM. Kestra est une plate-forme d\u2019orchestration et de scheduling de donn\u00e9e hautement scalable, qui cr\u00e9e, ex\u00e9cute, planifie, et surveille des millions de pipelines complexes. C\u2019est\u2026","rel":"","context":"Dans &quot;informatique&quot;","block_context":{"text":"informatique","link":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/category\/informatique\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/wp-json\/wp\/v2\/posts\/685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/wp-json\/wp\/v2\/comments?post=685"}],"version-history":[{"count":0,"href":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/wp-json\/wp\/v2\/posts\/685\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/wp-json\/wp\/v2\/media?parent=685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/wp-json\/wp\/v2\/categories?post=685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loicmathieu.fr\/wordpress\/fr\/wp-json\/wp\/v2\/tags?post=685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}