{"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\/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&#8217;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&#8217;un site vers un autre. Pour des raisons de s\u00e9curit\u00e9, pour qu&#8217;une page puisse r\u00e9aliser une requ\u00eate Ajax vers un autre site, il faut que celui-ci lui donne le droits, c&#8217;est ce qu&#8217;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&#8217;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&#8217;il a le droits d&#8217;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&#8217;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&#8217;est l\u00e0 que Access-Control-Max-Age entre en jeux, il permet de pr\u00e9ciser que l&#8217;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&#8217;autre pas (15mn pour chrome par exemple). Pour l&#8217;activer, il suffit d&#8217;ajouter le header avec une valeur en seconde.<\/p>\n<p>Voici un l&#8217;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&#8217;a plus qu&#8217;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&#8217;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&#8217;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&#8217;un site vers un autre. Pour des raisons de s\u00e9curit\u00e9, pour qu&#8217;une page puisse r\u00e9aliser une requ\u00eate Ajax vers un autre site, il faut que celui-ci lui donne le droits, c&#8217;est ce qu&#8217;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\/informatique\/optimisez-vos-options-avec-access-control-max-age\/\"> Read More<span class=\"screen-reader-text\">  Read More<\/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\/informatique\/devfest-lille-2018\/","url_meta":{"origin":685,"position":0},"title":"Devfest Lille 2018","author":"admin","date":"Friday July  6th, 2018","format":false,"excerpt":"gRPC ----- - Rappel r\u00e9seau, internet - Probl\u00e9matique du format de donn\u00e9e dans les systeme distribu\u00e9 => modification difficile - Historique des protocoles RCP : CORBA, RMI, EJB, SOAP, REST -> 2008 Protocol Buffers : s\u00e9rialization (pr\u00e9mice du RCP chez Google : open sourcing partiel) -> 2009 Thrift (Fb) ->\u2026","rel":"","context":"In &quot;informatique&quot;","block_context":{"text":"informatique","link":"https:\/\/www.loicmathieu.fr\/wordpress\/category\/informatique\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1650,"url":"https:\/\/www.loicmathieu.fr\/wordpress\/informatique\/le-profiler-sql-de-visualvm\/","url_meta":{"origin":685,"position":1},"title":"VisualVM SQL profiler SQL","author":"admin","date":"Tuesday April  4th, 2023","format":false,"excerpt":"A little while ago, I discovered the SQL profiler of VisualVM and I thought I should share it with you ;). VisualVM is a tool that provides a visual interface to display detailed information about applications running on a Java Virtual Machine (JVM). VisualVM is designed for use in development\u2026","rel":"","context":"In &quot;informatique&quot;","block_context":{"text":"informatique","link":"https:\/\/www.loicmathieu.fr\/wordpress\/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\/informatique\/rest-architecture-orientee-ressource\/","url_meta":{"origin":685,"position":2},"title":"REST &#8211; Architecture Orient\u00e9e Ressource","author":"admin","date":"Wednesday March 25th, 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":"In &quot;informatique&quot;","block_context":{"text":"informatique","link":"https:\/\/www.loicmathieu.fr\/wordpress\/category\/informatique\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":386,"url":"https:\/\/www.loicmathieu.fr\/wordpress\/informatique\/chti-jug-html5-websocket-et-autres-protocole-de-communication\/","url_meta":{"origin":685,"position":3},"title":"Ch&#8217;ti JUG: HTML5: WebSocket et autres protocole de communication","author":"admin","date":"Sunday December 13th, 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":"In &quot;informatique&quot;","block_context":{"text":"informatique","link":"https:\/\/www.loicmathieu.fr\/wordpress\/category\/informatique\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1330,"url":"https:\/\/www.loicmathieu.fr\/wordpress\/informatique\/devoxx-france-2021-ledition-9-3-4\/","url_meta":{"origin":685,"position":4},"title":"(Fran\u00e7ais) Devoxx France 2021 &#8211; l&#8217;\u00e9dition 9 3\/4","author":"admin","date":"Friday October  1st, 2021","format":false,"excerpt":"Sorry, this entry is only available in Fran\u00e7ais.","rel":"","context":"In &quot;informatique&quot;","block_context":{"text":"informatique","link":"https:\/\/www.loicmathieu.fr\/wordpress\/category\/informatique\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1731,"url":"https:\/\/www.loicmathieu.fr\/wordpress\/informatique\/optimisation-dindex-postgresql\/","url_meta":{"origin":685,"position":5},"title":"PostgreSQL index optimization","author":"admin","date":"Tuesday August 22nd, 2023","format":false,"excerpt":"Some time ago, I worked on query execution time optimizations for PostgreSQL, I talk about it here: The VISUALVM SQL PROFILE. Kestra is a highly scalable data orchestration and scheduling platform that creates, executes, schedules, and monitors millions of complex pipelines. It's also the company I work for! The open\u2026","rel":"","context":"In &quot;informatique&quot;","block_context":{"text":"informatique","link":"https:\/\/www.loicmathieu.fr\/wordpress\/category\/informatique\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.loicmathieu.fr\/wordpress\/wp-json\/wp\/v2\/posts\/685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loicmathieu.fr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loicmathieu.fr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loicmathieu.fr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loicmathieu.fr\/wordpress\/wp-json\/wp\/v2\/comments?post=685"}],"version-history":[{"count":0,"href":"https:\/\/www.loicmathieu.fr\/wordpress\/wp-json\/wp\/v2\/posts\/685\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.loicmathieu.fr\/wordpress\/wp-json\/wp\/v2\/media?parent=685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loicmathieu.fr\/wordpress\/wp-json\/wp\/v2\/categories?post=685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loicmathieu.fr\/wordpress\/wp-json\/wp\/v2\/tags?post=685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}