D&eacute;connexion automatique &agrave; l'expiration du JWT


Customisation du nom du cookie d&rsquo;autorisation


Possibilit&eacute; de passer le JWT en utilisant un param&egrave;tre de requ&ecirc;te


Guide de mise &agrave; niveau et compatibilit&eacute;&nbsp;


Versions manag&eacute;e et haute disponibilit&eacute;


Rencontrez la communaut&eacute; &agrave; la API Platform Con !


Am&eacute;lioration des performances et de l&rsquo;utilisation de la m&eacute;moire


<a href="https://dunglas.fr/2022/09/mercure-0-14/" target="_blank" rel="noreferrer noopener">Read the original version of this post</a>



Nous l’évoquions déjà dans <a href="https://twitter.com/coopTilleuls/status/1565001804680683529?s=20&amp;t=0EawZAtHW5JXyrdE6t76Jg" target="_blank" rel="noreferrer noopener">notre Twitter Space de vendredi dernier</a>, nous sommes ravis de vous annoncer la <a href="https://github.com/dunglas/mercure/releases/" target="_blank" rel="noreferrer noopener">disponibilité immédiate</a> de la version 0.14 du hub <a href="https://mercure.rocks/" target="_blank" rel="noreferrer noopener">Mercure.rocks</a> !&nbsp;



Mercure est une solution libre et open-source pour créer des applications temps réel. Avec Mercure, vous poussez en toute sécurité des données vers tous vos utilisateurs connectés grâce à une simple requête POST. Aucune bibliothèque tierce ou SDK n&rsquo;est nécessaire : le navigateur (ou tout autre type de client) reçoit les données par le biais d&rsquo;un composant serveur que nous appelons hub, et émet un événement JavaScript auquel votre code peut s&rsquo;abonner.



<h2>Amélioration des performances et de l’utilisation de la mémoire</h2>



Mercure est une technologie de plus en plus populaire. Il vient d&rsquo;atteindre <a href="https://github.com/dunglas/mercure/stargazers" target="_blank" rel="noreferrer noopener">3 000 étoiles sur GitHub</a> et est désormais utilisé pour des projets de haut vol par des organisations telles que l&rsquo;ONU, l&rsquo;UEFA, Lush, Intermountain Healthcare ou encore le groupe M6.



Le protocole est également utilisé par des projets publics à fort trafic tels que <a href="https://mail.tm/" target="_blank" rel="noreferrer noopener">Mail.tm</a>, un service de messagerie électronique qui aide les utilisateurs à se protéger contre les spams, les bots, le phishing ou d’autres abus en ligne sans exposer leur véritable adresse électronique. Mail.tm envoie environ 8 millions de notifications par jour en utilisant un seul hub Mercure sur un serveur à 6,90 €/mois (<a href="https://les-tilleuls.coop/en/blog/mail-tm-mercure-rocks-and-api-platform" target="_blank" rel="noreferrer noopener">voir l&rsquo;étude de cas complète postée sur notre blog</a>). Ce type de déploiement est une vraie mine d&rsquo;or pour optimiser au maximum le hub ! Et grâce à l&rsquo;équipe derrière Mail.tm et à la communauté, c&rsquo;est ce qui a été fait pendant le développement de cette version !



Tout d&rsquo;abord, nous avons amélioré <a href="https://github.com/dunglas/mercure/issues/463" target="_blank" rel="noreferrer noopener">l&rsquo;utilisation de la mémoire</a> et corrigé <a href="https://github.com/dunglas/mercure/issues/507" target="_blank" rel="noreferrer noopener">certaines fuites</a>, notamment au niveau du logger et de l&rsquo;intégration Prometheus. Après ces premières améliorations, nous avons détecté que <a href="https://github.com/dunglas/mercure/issues/558" target="_blank" rel="noreferrer noopener">l&rsquo;utilisation du CPU</a> s’envolait lorsqu&rsquo;un grand nombre d&rsquo;abonnés étaient connectés. <a href="http://kevburnsjr.com/" target="_blank" rel="noreferrer noopener">Kevin Burns</a> a proposé <a href="https://github.com/dunglas/mercure/issues/558#issuecomment-917599547" target="_blank" rel="noreferrer noopener">un patch qui améliore considérablement l&rsquo;utilisation du CPU</a>, notamment en cas de charges très élevées. Sous le capot, le correctif de Kevin utilise une nouvelle bibliothèque Go qu&rsquo;il a créée pour l’occasion, <a href="https://github.com/kevburnsjr/skipfilter" target="_blank" rel="noreferrer noopener">skipfilter</a>, qui combine des <a href="https://en.wikipedia.org/wiki/Skip_list" target="_blank" rel="noreferrer noopener">skip lists</a> avec des <a href="https://www.roaringbitmap.org/" target="_blank" rel="noreferrer noopener">roaring bitmaps</a>. Selon les benchmarks écrits par Kevin, le nouvel algorithme est 20 à 50% plus efficace que le précédent. Ce patch a réduit l&rsquo;utilisation du CPU sur la machine exécutant le hub Mercure de Mail.tm de 100% à ~10% !



<h2>Déconnexion automatique à l&rsquo;expiration du JWT</h2>



Mercure prend en charge l&rsquo;envoi de mises à jour uniquement aux clients autorisés. Pour ce faire, le client doit fournir un JSON Web Token (JWT) au hub. Ce JWT doit contenir une liste de topics (ou un sélecteur de topics) auxquels le client peut s&rsquo;abonner et recevoir des mises à jour privées.



Si <a href="https://www.rfc-editor.org/rfc/rfc7519#section-4.1.4" target="_blank" rel="noreferrer noopener">le champ (claim) expiration `exp` standard du JWT</a> est défini, le token ne peut plus être accepté une fois qu’il a expiré.



À partir de Mercure 0.14, les clients Mercure sont automatiquement déconnectés lorsque le JWT expire. Grâce au système de réconciliation natif fourni par Mercure (via les Server-Sent events), après la déconnexion, le client se reconnectera automatiquement et récupérera les événements manqués lors de la déconnexion, à condition qu&rsquo;un nouveau JWT non expiré ait été généré.



<h2>Customisation du nom du cookie d’autorisation</h2>



Lors de l&rsquo;utilisation de l&rsquo;autorisation, le JWT peut être transmis au hub Mercure par le biais d&rsquo;un cookie nommé <code>mercureAuthorization</code> ou de l&rsquo;en-tête HTTP <code>Authorization</code>.



Parfois, il peut être pratique d&rsquo;avoir plusieurs hubs Mercure sur le même domaine. Malheureusement, cela crée un conflit de nom à cause du nom fixe du cookie. Avec Mercure 0.14, le nom du cookie peut maintenant être configuré, pour permettre l&rsquo;utilisation de plusieurs hubs sur le même domaine.



<h2>Possibilité de passer le JWT en utilisant un paramètre de requête</h2>



Depuis le départ, Mercure supporte la transmission du JWT au hub en utilisant un cookie ou un l’en-tête HTTP Authorization. Il est maintenant également possible d&rsquo;utiliser un paramètre de requête nommé <code>authorization</code>. Cette nouvelle méthode est <a href="https://mercure.rocks/spec#security-considerations" target="_blank" rel="noreferrer noopener">difficile à sécuriser</a> et son utilisation est déconseillée. L&rsquo;utilisation d&rsquo;un cookie ou de l&rsquo;en-tête <code>Authorization</code> devrait toujours être préférée, mais elle peut être pratique pour des scénarios complexes inter-domaines.



Pour utiliser cette méthode en toute sécurité, la connexion doit être chiffrée (ce qui est requis par la spécification Mercure), et il faut veiller à ne pas loguer le JWT. Le hub Mercure.rocks expurge par défaut le paramètre de requête <code>authorization</code>&nbsp; (ainsi que les cookies et l&rsquo;en-tête <code>Authorization</code>). Pour ce faire, <a href="https://dunglas.fr/2022/04/caddy-logging-security-improvements/" target="_blank" rel="noreferrer noopener">nous avons ajouté de nouveaux filtres de logs à Caddy</a>, le serveur web que nous utilisons.



<h2>Caddy 2.5</h2>



En parlant de Caddy, Mercure 0.14 est maintenant construit sur la base de Caddy 2.5. Consultez <a href="https://caddy.community/t/caddy-2-5-released/15749" target="_blank" rel="noreferrer noopener">le changelog de Caddy</a> pour découvrir toutes les nouvelles fonctionnalités apportées ! Vous pouvez toutes les utiliser avec Mercure en personnalisant le fichier Caddy fourni.



Rappel : le hub Mercure est également disponible sous forme de middleware HTTP pour Go, qui peut être intégré dans n&rsquo;importe quelle application (typiquement des serveurs web) écrite en Go.



<h2>Guide de mise à niveau et compatibilité&nbsp;</h2>



Quelques changements introduits dans la version 0.14 peuvent nécessiter une mise à jour de vos clients. N&rsquo;oubliez pas de lire le <a href="https://mercure.rocks/docs/UPGRADE" target="_blank" rel="noreferrer noopener">guide de mise à jour</a> !



Même si les modifications sont mineures et ne devraient pas affecter la plupart des utilisateurs, nous prenons la rétrocompatibilité très au sérieux, et il est possible d&rsquo;activer la compatibilité avec les anciennes versions du protocole public en définissant la nouvelle directive <code>protocol_version_compatibility</code> introduite dans la version 0.14.



<h2>Versions managée et haute disponibilité</h2>



La <a href="https://mercure.rocks/pricing" target="_blank" rel="noreferrer noopener">version managée</a> de Mercure.rocks ainsi que la version <a href="https://mercure.rocks/docs/hub/cluster#purchasing" target="_blank" rel="noreferrer noopener">haute disponibilité</a> sont déjà construites sur la base de la v0.14 et supportent toutes les fonctionnalités listées dans cet article.



Si vous utilisez la version managée, vous pouvez passer à la dernière version directement à partir de la page des paramètres. Les nouveaux projets sont directement créés en l&rsquo;utilisant. Les utilisateurs de la version haute disponibilité peuvent télécharger les binaires et les images Docker via les canaux de mise à jour habituels.



<h2>Rencontrez la communauté à la API Platform Con !</h2>



De nombreuses et nombreux spécialistes des APIs asynchrones, de Mercure ou des applications en temps réel comme <a href="https://api-platform.com/con/2022/conferences/building-schema-first-event-driven-architectures-with-async-api/" target="_blank" rel="noreferrer noopener">Fran Mendez</a> (le créateur d&rsquo;AsyncAPI), <a href="https://api-platform.com/con/2022/conferences/php-websockets-or-how-to-communicate-with-clients-in-real-time/" target="_blank" rel="noreferrer noopener">Pauline Vos</a> (experte en Websockets), <a href="https://api-platform.com/con/2022/conferences/what-s-new-in-caddy-the-webserver-of-api-platform/" target="_blank" rel="noreferrer noopener">Francis Lavoie</a> (Core Team de Caddy), <a href="https://api-platform.com/con/2022/conferences/real-time-and-beyond-with-mercure/" target="_blank" rel="noreferrer noopener">Brian Mc Cluskey</a> (expert Mercure) et <a href="https://api-platform.com/con/2022/conferences/opening-keynote-introduction-to-API-platform-3/" target="_blank" rel="noreferrer noopener">Kévin Dunglas</a> interviendront la semaine prochaine à la <a href="https://api-platform.com/con/2022/" target="_blank" rel="noreferrer noopener">API Platform Conference</a> 2022.&nbsp;



Il est encore temps d&rsquo;acheter vos billets, <a href="https://api-platform.com/con/2022/#pricing" target="_blank" rel="noreferrer noopener">rejoignez-nous</a> à Lille ou en ligne !



<h2>Support ou signalement de bugs</h2>



Comme d&rsquo;habitude, <a href="https://github.com/dunglas/mercure/issues" target="_blank" rel="noreferrer noopener">n&rsquo;hésitez pas à signaler tout dysfonctionnement sur GitHub</a> et si vous souhaitez <a href="https://les-tilleuls.coop/masterclass/formations/decouvrir-le-protocole-mercure" target="_blank" rel="noreferrer noopener">découvrir Mercure</a> ou être aidé·e dans la création de votre application en temps réel, <a href="mailto:contact@les-tilleuls.coop">contactez-nous</a> !&nbsp;

Sortie de Mercure 0.14 : nouvelles fonctionnalités et amélioration des performances

Détails des nouvelles fonctionnalités et amélioration des performances de la version 0.14 du hub Mercure.

Sortie de Mercure 0.14 : nouvelles fonctionnalités et amélioration des performances | Les-Tilleuls.coop

Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/08/mercure.png

Accueil

https://secure.gravatar.com/avatar/362ea08993d784535d1758b2d2f4adb1?s=96&d=mm&r=g

Kevin Dunglas

La seconde édition de la <a href="https://api-platform.com/con/2022/">conférence internationale consacrée à API Platform</a> se déroulera dans moins de deux mois ! Ne manquez pas&nbsp; cet évènement qui sera riche en apprentissages et en surprises ! La conférence aura lieu le jeudi 15 et vendredi 16 septembre à Lille, au sein du campus d&rsquo;<a href="https://www.euratechnologies.com/">Euratechnologies</a>. Deux scènes sont au programme : une francophone et une anglophone qui accueillera des experts du monde entier (Europe, Amérique, Afrique). L’intégralité de la conférence sera également retransmise en direct sur le web.



La conférence sera précédée de deux jours de formation animés par les créateurs de API Platform et suivie d’un hack day au cours duquel vous pourrez apprendre à contribuer au logiciel libre aux côtés de développeurs renommés.&nbsp;



Le <a href="https://api-platform.com/con/2022/#schedule">programme complet</a> est publié, voyons ce que vous ne devez pas rater! Plus de 25 conférencières et conférenciers se partageront les deux scènes à travers des conférences de 40 minutes en moyenne. Nous aurons notamment le plaisir d&rsquo;écouter :



<ul><li><a href="https://api-platform.com/con/2022/conferences/dilemmas-and-decisions-what-we-ve-learned-designing-the-new-sylius-api/">Lukasz Chrusciel</a>, core team Sylius &#8211; Dilemmas and decisions. What we’ve learned designing the new sylius API.</li><li><a href="https://api-platform.com/con/2022/conferences/domain-driven-design-with-api-platform-3/">Robin Chalas et Mathias Arlaud</a>, expert et core team Symfony &#8211; du DDD avec API Platform 3 !</li><li><a href="https://api-platform.com/con/2022/conferences/gerer-les-operations-sequentielles-avec-REST/">Grégoire Hébert</a>, expert PHP et Formateur Les Tilleuls Coop &#8211; Comment Gérer les opérations séquentielles avec REST. </li><li><a href="https://api-platform.com/con/2022/conferences/comment-alices-garden-gere-t-elle-son-code-metier-via-les-evenements/">Nicolas Lemahieu</a>, symfony expert Alice’s Garden &#8211; Comment Alice&rsquo;s Garden gère-t-elle son code méier via les événements ?</li><li><a href="https://api-platform.com/con/2022/conferences/building-schema-first-event-driven-architectures-with-async-api/">Fran Mendez</a>, founder Asyncapi &#8211; Building schema-first event-driven architectures with ASYNCAPI.</li><li><a href="https://api-platform.com/con/2022/conferences/API-platform-au-quotidien-dans-une-entreprise-e-commerce-et-logistique/">Kévin Verschaeve et Clément Sanchez </a>, lead developers Perfect Draft (Saveurs Bières) &#8211; REX : API Platform au quotidien dans une entreprise e-commerce et logistique.</li><li><a href="https://api-platform.com/con/2022/conferences/decentralizaion-query-apis-and-other-myths/">Ruben Verborgh</a>, decentralized web expert Project Solid &#8211; Decentralization, query APIs and other myths.</li><li><a href="https://api-platform.com/con/2022/conferences/reutiliser-et-partager-vos-operations-API-platform-personnalis%C3%A9es/">Hubert Lenoir et Jérémy Jarrié</a>, lead developers Sensiolabs &#8211; Réutiliser et partager vos opérations personnalisées avec API Platform</li><li><a href="https://api-platform.com/con/2022/conferences/4-years-later-the-components-web-app/">Daniel West</a>, Creator Components Web App &#8211; 4 years later: the « Components web App » (CWA)</li><li><a href="https://api-platform.com/con/2022/conferences/la-revue-de-code-est-un-art/">Smaïne Millianni</a>, Symfony certified developer &#8211; La revue de code est un art !</li><li><a href="https://api-platform.com/con/2022/conferences/fighting-impostor-syndrome-a-pratical-handbook/">Marine Gandy</a>, Php developer &amp; Drupalista Ekino &#8211; Fighting impostor syndrome, a practical handbook.</li><li><a href="https://api-platform.com/con/2022/conferences/apis-the-next-10-years-beyond-the-interface/">Mehdi Medjaoui</a>, founder Apidays &amp; Oauth.io &#8211; APIS, the next 10 years : beyond the interface?</li><li><a href="https://api-platform.com/con/2022/speakers/helene-maitre-marchois/">Hélène Marchois</a>, agilliste Fairness &#8211; Table ronde à découvrir prochainement!</li><li><a href="https://api-platform.com/con/2022/speakers/antoine-bluchet/">Antoine Bluchet</a> alias <a href="mailto:antoine@les-tilleuls.coop">soyuka</a>, core team API Platform &#8211; Introduction to the new feature of API Platform 3.</li><li><a href="https://api-platform.com/con/2022/conferences/what-s-new-in-caddy-the-webserver-of-api-platform/">Francis Lavoie</a>, team member Caddy Server &#8211; What&rsquo;s new in caddy, the webserver of API Platform. </li><li><a href="https://api-platform.com/con/2022/conferences/pourquoi-je-n-utilise-pas-API-platform/">Frédéric Bouchery</a>, PHP Expert CCMBenchmark &#8211; Pourquoi je n’utilise pas API Platform ?</li><li><a href="https://api-platform.com/con/2022/conferences/mon-combat-contre-l-arachnophobie/">Jérôme Tanghe</a>, developer Les Tilleuls.coop &#8211; Mon combat contre l’arachnophobie.</li><li><a href="https://api-platform.com/con/2022/conferences/webauthn-se-debarrasser-des-mots-de-passe-definitivement/">Florent Morselli</a>, PHP developer &amp; symfony lover &#8211; Webauthn: se débarrasser des mots de passe. Définitivement.</li><li><a href="https://api-platform.com/con/2022/conferences/real-time-and-beyond-with-mercure/">Brian McCluskey</a>, Director of engineering Raven controls &#8211; Realtime and beyond with Mercure.</li><li><a href="https://api-platform.com/con/2022/conferences/php-websockets-or-how-to-communicate-with-clients-in-real-time/">Pauline Vos</a>, Lead software engineer &#8211; PHP Websockets: OR how to communicate with clients in real-time?</li><li><a href="https://api-platform.com/con/2022/conferences/tests-avances/">Olivier Doucet</a>, co-founder Oxeva &#8211; Tests avancés</li><li><a href="https://api-platform.com/con/2022/conferences/finding-the-path-to-scaling-API-success/">Darrel Miller</a>, APi Architect Microsoft Graph &amp; OPENAPI initiative &#8211; Finding the Path to scaling API success</li><li><a href="https://api-platform.com/con/2022/conferences/france-televisions-quand-API-Platform-tombe-a-PIC/">Albin Kester et Georges King Njock Bôt</a>, lead developer les Tilleuls Coop &amp; PHP Expert Freelance &#8211; REX: France Télévisions, quand API Platform tombe à pic!</li><li><a href="https://api-platform.com/con/2022/conferences/nicolas-grekas-talk/">Nicolas Grekas</a>, core team Symfony. A découvrir prochainement !</li></ul>



Concernant les formations,&nbsp; cela se passe les mardi 13, mercredi 14 septembre :&nbsp;



<ul><li>Mardi 13/09 : <a href="https://api-platform.com/con/2022/conferences/designing-and-building-an-api-first-project-with-API-Platform-3/">Conception et élaboration d&rsquo;un 1er projet API avec API Platform 3</a>, avec <a href="https://twitter.com/dunglas">Kévin Dunglas</a> et <a href="https://twitter.com/s0yuka">Antoine Bluchet</a></li><li>Mercredi 14/09 :&nbsp; <a href="https://api-platform.com/con/2022/conferences/workshop-domain-driven-design-with-API-Platform-3/">du Domain Driven Design avec Api Platform 3</a>, avec <a href="https://twitter.com/chalas_r">Robin Chalas</a> et <a href="https://twitter.com/matarld">Mathias Arlaud</a></li></ul>



&nbsp;Le <a href="https://api-platform.com/con/2022/conferences/API-platform-3-hack-day/">Hack Day </a> se déroulera Samedi 17/09 et sera animé par core team API Platform ! Et c’est gratuit.



Nous espérons que ce programme vous plaira autant que nous avons eu à le préparer ! <a href="https://api-platform.com/con/2022/#pricing">Les places au tarif regular sont encore disponibles jusqu&rsquo;au 20 août</a> et des places en présentiel sont encore disponibles. D’ailleurs, si vous êtes étudiant ou en recherche d’emploi, nous offrons cette année les places en ligne mais aussi sur place!&nbsp;



<a href="https://api-platform.com/con/2022/">Inscrivez-vous</a> avant que le changement de tarif n&rsquo;ait lieu et préparez-vous à une semaine où différentes communautés de devs vont se rejoindre pour partager, échanger et apprendre ensemble.



Enfin, déjà <a href="https://api-platform.com/con/2022/#partners">8 partenaires</a> soutiennent notre événement. Vous souhaitez que votre entreprise y soit associée ?&nbsp;



Contactez-nous pour recevoir le dossier de sponsoring ! <a href="https://api-platform.com/con/2022/transparency">Tous les bénéfices générés par les recettes de l&rsquo;événement seront reversés au développement d&rsquo;API Platform</a>, et rien d&rsquo;autre.



On se voit en Septembre ?

API Platform Conference #2 : venez rencontrer les plus grand•es expert•es des API web !

La seconde édition de la conférence internationale consacrée à API Platform se déroulera dans moins de deux mois ! Ne manquez pas&nbsp; cet évènement qui sera riche en apprentissages et en surprises ! La conférence aura lieu le jeudi 15 et vendredi 16 septembre à Lille, au sein du campus d&rsquo;Euratechnologies. Deux scènes sont au [&hellip;]

API Platform Conference #2 : venez rencontrer les plus grand•es expert•es des API web ! | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/11/vignette-con.png

https://secure.gravatar.com/avatar/40dfc350a09c1b2f7391856a676253c3?s=96&d=mm&r=g

tilleuls

// This Go program demonstrates the behavior of runtime.LockOSThread() and runtime.UnlockOSThread().
// runtime.LockOSThread() forces the wiring of a Goroutine to a system thread.
// No other goroutine can run in the same thread, unless runtime.UnlockOSThread() is called at some point.
//
// According to the manual of phthread_self, when many threads are created, the system may reassign an ID that was used by a terminated thread to a new thread.
//
// This programs shows that thread IDs are indeed reused (tested on Linux and Mac), but that the thread itself is actually destroyed.
// To prove this, we store used thread IDs in a global variable, and some data in each local thread using pthread_setspecific().
//
// When we hint the Go runtime to reuse the threads by calling runtime.UnlockOSThread(), we can see that the local data is still available when a thread is reused.

package main

/*
#include &lt;stdlib.h>
#include &lt;pthread.h>

int setspecific(pthread_key_t key, int i) {
	int *ptr = calloc(1, sizeof(int)); // memory leak on purpose
	*ptr = i;
	return pthread_setspecific(key, ptr);
}
*/
import "C"
import (
	"bytes"
	"fmt"
	"runtime"
	"strconv"
	"sync"
)

const nbGoroutines = 1000

type goroutine struct {
	num int    // App specific goroutine ID
	id  uint64 // Internal goroutine ID (debug only, do not rely on this in real programs)
}

var seenThreadIDs map[C.pthread_t]goroutine = make(map[C.pthread_t]goroutine, nbGoroutines+1)
var seenThreadIDsMutex sync.RWMutex

// getGID gets the current goroutine ID (copied from https://blog.sgmansfield.com/2015/12/goroutine-ids/)
func getGID() uint64 {
	b := make([]byte, 64)
	b = b[:runtime.Stack(b, false)]
	b = bytes.TrimPrefix(b, []byte("goroutine "))
	b = b[:bytes.IndexByte(b, ' ')]
	n, _ := strconv.ParseUint(string(b), 10, 64)
	return n
}

// isThreadIDReused checks if the passed thread ID has already be used before
func isThreadIDReused(t1 C.pthread_t, currentGoroutine goroutine) bool {
	seenThreadIDsMutex.RLock()
	defer seenThreadIDsMutex.RUnlock()
	for t2, previousGoroutine := range seenThreadIDs {
		if C.pthread_equal(t1, t2) != 0 {
			fmt.Printf("Thread ID reused (previous goroutine: %v, current goroutine: %v)\n", previousGoroutine, currentGoroutine)

			return true
		}
	}

	return false
}

func main() {
	runtime.LockOSThread()
	seenThreadIDsMutex.Lock()
	seenThreadIDs[C.pthread_self()] = goroutine{0, getGID()}
	seenThreadIDsMutex.Unlock()

	// It could be better to use C.calloc() to prevent the GC to destroy the key
	var tlsKey C.pthread_key_t
	if C.pthread_key_create(&amp;tlsKey, nil) != 0 {
		panic("problem creating pthread key")
	}

	for i := 1; i &lt;= nbGoroutines; i++ {
		go func(i int) {
			runtime.LockOSThread()
			// Uncomment the following line to see how the runtime behaves when threads can be reused
			//defer runtime.UnlockOSThread()

			// Check if data has already been associated with this thread
			oldI := C.pthread_getspecific(tlsKey)
			if oldI != nil {
				fmt.Printf("Thread reused, getspecific not empty (%d)\n", *(*C.int)(oldI))
			}

			g := goroutine{i, getGID()}



// Get the current thread ID
			t := C.pthread_self()
			isThreadIDReused(t, g)

			// Associate some data to the local thread
			if C.setspecific(tlsKey, C.int(i)) != 0 {
				panic("problem setting specific")
			}

			// Add the current thread ID in the list of already used IDs
			seenThreadIDsMutex.Lock()
			defer seenThreadIDsMutex.Unlock()
			seenThreadIDs[C.pthread_self()] = g
		}(i)
	}
}

Thread ID reused (previous goroutine: {6 9}, current goroutine: {1 4})
Thread ID reused (previous goroutine: {1 4}, current goroutine: {13 16})
Thread ID reused (previous goroutine: {3 6}, current goroutine: {32 52})

Thread reused, getspecific not empty (35)
Thread ID reused (previous goroutine: {35 53}, current goroutine: {1 19})
Thread reused, getspecific not empty (26)
Thread ID reused (previous goroutine: {26 44}, current goroutine: {19 37})
Thread reused, getspecific not empty (19)
Thread reused, getspecific not empty (84)
Thread ID reused (previous goroutine: {84 102}, current goroutine: {36 54})
Thread reused, getspecific not empty (36)
Thread ID reused (previous goroutine: {36 54}, current goroutine: {37 55})
Thread reused, getspecific not empty (37)
Thread ID reused (previous goroutine: {37 55}, current goroutine: {38 56})
Thread reused, getspecific not empty (38)
Thread ID reused (previous goroutine: {38 56}, current goroutine: {39 57})
Thread reused, getspecific not empty (18)
Thread reused, getspecific not empty (39)
Thread ID reused (previous goroutine: {39 57}, current goroutine: {40 58})
Thread reused, getspecific not empty (40)
Thread ID reused (previous goroutine: {18 36}, current goroutine: {2 20})
Thread reused, getspecific not empty (1)
Thread ID reused (previous goroutine: {40 58}, current goroutine: {41 59})

<a href="https://dunglas.fr/2022/05/goroutines-threads-and-thread-ids/" target="_blank" rel="noreferrer noopener">Découvrez ici l&rsquo;article original</a>







Si vous avez assisté à l’AFUP Day 2022 le 20 mai à Lille, vous savez peut-être que je travaille actuellement sur un module PHP pour serveurs web écrit en Go.



En testant ma future bibliothèque, j&rsquo;ai rencontré d&rsquo;étranges problèmes d&rsquo;accès à la mémoire liés aux threads créés par le runtime Go (vous savez, cgo&#8230;).



Par défaut, le planificateur de Go exécute de nombreuses goroutines sur les mêmes threads système. Ce comportement est incompatible avec le code C qui s&rsquo;appuie sur le stockage local des threads, comme PHP compilé avec l&rsquo;option ZTS.



Heureusement, la bibliothèque standard de Go fournit une fonction utilitaire pour contourner ce problème : runtime.LockOSThread(). Go garantit que la goroutine qui appelle cette fonction s&rsquo;exécute toujours dans le même thread système, et qu&rsquo;aucune autre goroutine ne peut s&rsquo;exécuter dans le même thread jusqu&rsquo;à ce que runtime.UnlockOSThread() soit appelée.



En déboguant ma bibliothèque, j&rsquo;ai découvert que PHP utilise l&rsquo;ID du thread actuel comme clé pour accéder aux données locales du thread. Cela peut-il être un problème ? Sommes-nous sûrs que le système ne réutilise jamais le même ID de thread alors que le même processus est en cours d&rsquo;exécution ?&nbsp;



La page de manuel de pthread_self() fournie par Apple sur Mac OS X (de 1996 !) ne donne aucune information à ce sujet, cependant, la page de manuel de Linux indique ceci :



Un identifiant de thread peut être réutilisé après qu&rsquo;un thread terminé ait été rejoint, ou qu&rsquo;un thread détaché se soit terminé.



Écrivons un programme de test pour comprendre comment runtime.LockOSThread() fonctionne, et si le système réutilise vraiment les IDs des threads :





Voici un exemple de sortie lorsque runtime.UnlockOSThread() est commenté.





Donc oui, les ID des threads sont réutilisés, tandis que les threads eux-mêmes sont correctement détruits. Nous avons peut-être un problème avec la base de code de PHP !



Et voici un exemple lorsque runtime.UnlockOSThread() est décommenté.





Nous pouvons voir que les threads sont réutilisés, comme documentés !



Si vous cherchez des experts Go, C ou PHP, contactez<a href="https://les-tilleuls.coop/" target="_blank" rel="noreferrer noopener"> Les-Tilleuls.coop </a>! Nous sommes là pour échanger avec vous  et voir ensemble comment on peut répondre à vos besoins !

Goroutines, threads, et IDs de threads

Découvrez ici l&rsquo;article original Si vous avez assisté à l’AFUP Day 2022 le 20 mai à Lille, vous savez peut-être que je travaille actuellement sur un module PHP pour serveurs web écrit en Go. En testant ma future bibliothèque, j&rsquo;ai rencontré d&rsquo;étranges problèmes d&rsquo;accès à la mémoire liés aux threads créés par le runtime Go [&hellip;]

Goroutines, threads, et IDs de threads | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/10/logo-grand.jpg

Nouveau dans Symfony 6.1 : Constructeurs de contexte de s&eacute;rialiseur

Nouveau dans Symfony 6.1 : Profilage du s&eacute;rialiseur

Comme plusieurs de nos collaborateurs, <a href="https://twitter.com/matarld" target="_blank" rel="noreferrer noopener">Mathias Arlaud </a>attribue du temps à l&rsquo;open source. Récemment, il a apporté quelques contributions à Symfony. Vous pouvez les découvrir juste ici ! 



<h2>Nouveau dans Symfony 6.1 : Constructeurs de contexte de sérialiseur</h2>



<a href="https://symfony.com/blog/new-in-symfony-6-1-serializer-context-builders" target="_blank" rel="noreferrer noopener">Découvrez ici l&rsquo;article original</a>



Chaque fois que vous sérialisez et désérialisez des données, le sérialiseur de Symfony vous permet de lui fournir un certain contexte pour configurer le processus de sérialisation/désérialisation.



Ce contexte peut par exemple être utilisé pour sérialiser des dates dans un format spécial, pour ignorer certaines propriétés, pour utiliser un délimiteur CSV spécifique, [&#8230;].



Le contexte est un simple tableau associatif qui associe une chaîne de caractères quelconque à une valeur :



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="358" src="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-1-1-1024x358.png" alt="" class="wp-image-5226" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-1-1-1024x358.png 1024w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-1-1-600x210.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-1-1-300x105.png 300w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-1-1-768x269.png 768w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-1-1.png 1114w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



Pour éviter les erreurs de frappe, vous pouvez utiliser les constantes exposées par chaque normalisateur/encodeur :



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="282" src="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-2-1-1024x282.png" alt="" class="wp-image-5227" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-2-1-1024x282.png 1024w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-2-1-600x165.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-2-1-300x83.png 300w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-2-1-768x212.png 768w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-2-1.png 1416w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



À partir de Symfony 6.1, vous serez en mesure de créer ce contexte de sérialisation en utilisant des constructeurs de contexte.



Ces constructeurs de contexte sont des objets qui abstraient le tableau associatif du contexte et fournissent à la place une interface fluide pour le construire.



Ainsi, en utilisant les context builders, il sera possible de créer un contexte de sérialisation tout en bénéficiant de l&rsquo;autocomplétion, de la validation et de la documentation :



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="210" src="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3-1-1024x210.png" alt="" class="wp-image-5228" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3-1-1024x210.png 1024w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3-1-600x123.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3-1-300x61.png 300w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3-1-768x157.png 768w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3-1-1536x315.png 1536w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3-1.png 1854w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



Les constructeurs de contextes peuvent être initialisés à partir d&rsquo;un tableau ordinaire ou même d&rsquo;un autre constructeur de contexte. Et ils peuvent bien entendu être transformés en un tableau associatif, requis par les méthodes du sérialiseur.



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="564" src="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-4-1024x564.png" alt="" class="wp-image-5229" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-4-1024x564.png 1024w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-4-600x330.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-4-300x165.png 300w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-4-768x423.png 768w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-4.png 1366w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



Symfony est livré avec un constructeur de contexte par normalisateur/encodeur.



Mais vous pouvez tout aussi bien créer le vôtre en implémentant la ContextBuilderInterface et en utilisant le ContextBuilderTrait !



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="576" src="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-5-1024x576.png" alt="" class="wp-image-5230" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-5-1024x576.png 1024w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-5-600x338.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-5-300x169.png 300w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-5-768x432.png 768w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-5.png 1400w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2>Nouveau dans Symfony 6.1 : Profilage du sérialiseur</h2>



<a href="https://symfony.com/blog/new-in-symfony-6-1-serializer-profiling" target="_blank" rel="noreferrer noopener">Découvrez ici l&rsquo;article original</a>



Lors de la sérialisation, le sérialiseur de Symfony doit trouver un normalisateur et un encodeur appropriés.



Pour ce faire, il passe en revue tous les normalisateurs/encodeurs connus et leur demande s&rsquo;ils sont en mesure de normaliser/encoder.



Le premier normalisateur/encodeur qui répond qu&rsquo;il est capable de procéder cette normalisation/cet encodage est sélectionné et utilisé.



Ce modèle de conception est super, mais il rend difficile le fait de savoir quel normalisateur ou encodeur est utilisé pendant tout le processus de (dé)sérialisation. C&rsquo;est pourquoi un nouveau panneau Symfony Profiler a été ajouté !



<img loading="lazy" src="https://lh4.googleusercontent.com/jmZhHFQpiwpfGCxfCguDB7byo6utoVfcqxBT3_TAhTQS0G38fM1Y0HK-6yImlosEUFRwclvOltrlhoBbMYpVBp-sC3XC3I7dLdKmWurApEaTkK4_UfHow5NNOLL2F8MhfK3Y7uHR2Ja4_aX5CA" width="602" height="181">



Le service de sérialisation est donc décoré pour tracer l&rsquo;activité des appels aux méthodes serialize(), deserialize(), normalize(), denormalize(), encode() et decode().



Chaque normalisateur et encodeur individuel est également décoré, de sorte que le panneau de debug puisse fournir de nombreux détails sur le processus de sérialisation, tels que la durée, le contexte, l&rsquo;entrée, &#8230;



Rien n&rsquo;est nécessaire pour bénéficier de cette fonctionnalité, il suffit de mettre à jour votre framework et d&rsquo;en profiter !















Notre collaborateur<a href="https://twitter.com/matarld"> Mathias </a>est basé dans nos bureaux de Lyon, n&rsquo;hésitez pas à <a href="https://les-tilleuls.coop/blog/category/symfony/p/2" target="_blank" rel="noreferrer noopener">nous contacter</a> selon vos besoins ! Notre équipe se fera un plaisir d’y répondre 🙂



Retrouvez aussi Mathias avec<a href="https://twitter.com/chalas_r" target="_blank" rel="noreferrer noopener"> Robin</a>, lors de notre conférence <a href="https://api-platform.com/con/2022/" target="_blank" rel="noreferrer noopener">API platform Con en septembre 2022</a>, ils animeront tous les 2 un talk qui promet d’être passionnant !

Nouveautés dans Symfony 6.1 : Notre coopérateur Mathias vous en dit plus !

Comme plusieurs de nos collaborateurs, Mathias Arlaud attribue du temps à l&rsquo;open source. Récemment, il a apporté quelques contributions à Symfony. Vous pouvez les découvrir juste ici ! Nouveau dans Symfony 6.1 : Constructeurs de contexte de sérialiseur Découvrez ici l&rsquo;article original Chaque fois que vous sérialisez et désérialisez des données, le sérialiseur de Symfony [&hellip;]

Nouveautés dans Symfony 6.1 : Notre coopérateur Mathias vous en dit plus ! | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/08/symfony.png

Caviarder des en-t&ecirc;tes HTTP sensibles

Des filtres suppl&eacute;mentaires !

<a href="https://dunglas.fr/2022/04/caddy-logging-security-improvements/" target="_blank" rel="noreferrer noopener">Découvrez ici l&rsquo;article original</a>



<figure class="wp-block-image size-full"><img loading="lazy" width="693" height="343" src="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/caddy-logging-sercurity-1.png" alt="" class="wp-image-5152" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/caddy-logging-sercurity-1.png 693w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/caddy-logging-sercurity-1-600x297.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/caddy-logging-sercurity-1-300x148.png 300w" sizes="(max-width: 693px) 100vw, 693px" /></figure>



Caddy est l&rsquo;étoile montante des serveurs web : rapide, facile à configurer, complet (génération et renouvellement automatique des certificats TLS, HTTP/3, cloud-native, rechargement à chaud de la configuration&#8230;) et sécurisé (écrit en Go et pas en C).



Grâce à son extensibilité inégalée, Caddy est une plateforme applicative de premier ordre, disposant d&rsquo;un écosystème florissant !



Pour mieux saisir sa puissance, jetez un coup d&rsquo;œil aux modules Mercure (capacités push) et Vulcain (API hypermédia pilotées par le client) auxquels j&rsquo;ai contribué ! Caddy est également le serveur web utilisé dans la distribution API Platform et dans Symfony Docker.



Il y a quelques jours, après un an de travail, Matt Holt a publié Caddy 2.5 ! Cette nouvelle version contient quelques nouvelles fonctionnalités que j&rsquo;ai contribué ou aidé à concevoir, améliorant la sécurité du système de logs.







<h2>Caviarder des en-têtes HTTP sensibles</h2>



Contrairement à la plupart des autres serveurs web, Caddy émet des logs structurés verbeux. Bien qu&rsquo;il soit pratique de pouvoir inspecter et analyser chaque détail des messages HTTP, cela peut également être dangereux. Jusqu&rsquo;à la version 2.5, tous les en-têtes HTTP étaient enregistrés lorsque la journalisation est activée, y compris les en-têtes sensibles.



Cela peut entraîner de graves problèmes de sécurité si le système qui traite et stocke les logs (ELK, Datadog&#8230;) n&rsquo;est pas configuré correctement. Et ils ne le sont pas par défaut ! Même des entreprises telles que Facebook, Twitter et GitHub ont stocké des millions de mots de passe d&rsquo;utilisateurs en clair en raison de mauvaises configurations similaires.



Dans la version 2.5, les en-têtes HTTP standard susceptibles de contenir des informations d&rsquo;identification, tels que définis dans la spécification de fetch(), sont automatiquement expurgés. Ces en-têtes sont Cookie, Set-Cookie, Authorization et Proxy-Authorization. Si vous avez malgré tout besoin d&rsquo;enregistrer ces en-têtes, par exemple pendant une session de débogage, Francis Lavoie a ajouté une nouvelle option permettant de réactiver l&rsquo;ancien comportement : log_credentials.



<h2>Des filtres supplémentaires !</h2>



Mais cette modification ne suffit pas à couvrir tous les cas où des données sensibles doivent être supprimées des logs. Bien que cela soit considéré comme une mauvaise pratique de sécurité, il est courant que les paramètres de requête contiennent des informations sensibles.&nbsp;



Quelques exemples :



<ul><li>les jetons d&rsquo;accès OAuth</li><li>les « liens magiques » et autres URL temporaires</li><li>les IDs de session PHP</li><li>les JWT Mercure (la raison pour laquelle j&rsquo;ai commencé à travailler sur ce sujet en premier lieu)</li></ul>



Dans de nombreux cas, vous pouvez souhaiter logguer certains paramètres de requête, mais supprimer ou remplacer certains autres qui contiennent des données sensibles. Par exemple : le paramètre de requête access token défini dans les spécifications OAuth 2.



De même, au lieu de supprimer entièrement l&rsquo;en-tête Cookie, ce qui signifie supprimer tous les cookies, vous pouvez vouloir supprimer certains cookies spécifiques mais en conserver d&rsquo;autres. Pour couvrir ces cas d&rsquo;utilisation plus avancés mais assez courants, j&rsquo;ai ajouté un certain nombre de nouveaux filtres.



Le premier nouveau filtre permet de supprimer, remplacer ou hacher des paramètres de requête spécifiques :



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="458" src="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-1-1024x458.png" alt="" class="wp-image-5161" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-1-1024x458.png 1024w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-1-600x268.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-1-300x134.png 300w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-1-768x343.png 768w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-1.png 1432w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



J&rsquo;ai également contribué à un filtre similaire pour manipuler les cookies :



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="461" src="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-2-1024x461.png" alt="" class="wp-image-5162" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-2-1024x461.png 1024w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-2-600x270.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-2-300x135.png 300w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-2-768x345.png 768w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-2.png 1436w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



Enfin, j&rsquo;ai ajouté la possibilité de hacher ou d&rsquo;appliquer une expression régulière à la valeur de n&rsquo;importe quel champ enregistré :







<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="349" src="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3-1024x349.png" alt="" class="wp-image-5164" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3-1024x349.png 1024w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3-600x204.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3-300x102.png 300w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3-768x262.png 768w, https://api.les-tilleuls.coop/wp-content/uploads/2022/05/image-3.png 1424w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



Le filtre de hachage est particulièrement utile pour éviter que différentes requêtes ne soient pas distinguables dans les journaux, ou lorsque vous voulez pouvoir regrouper des requêtes qui ont les mêmes valeurs caviardées, mais qui sont caviardées.



Si vous avez besoin d&rsquo;aide pour mettre en place ou même pour mettre à jour Caddy, si vous voulez faire appel à une équipe de développeurs Go expérimentés, ou si vous avez besoin d&rsquo;experts pour sécuriser votre application : <a href="https://les-tilleuls.coop/" target="_blank" rel="noreferrer noopener">contactez-nous </a>!



<a href="https://les-tilleuls.coop/" target="_blank" rel="noreferrer noopener"> Les-Tilleuls.coop </a>peut vous aider !

Nouveauté de Caddy 2.5 : Expurger les données sensibles de vos logs

Découvrez ici l&rsquo;article original Caddy est l&rsquo;étoile montante des serveurs web : rapide, facile à configurer, complet (génération et renouvellement automatique des certificats TLS, HTTP/3, cloud-native, rechargement à chaud de la configuration&#8230;) et sécurisé (écrit en Go et pas en C). Grâce à son extensibilité inégalée, Caddy est une plateforme applicative de premier ordre, disposant [&hellip;]

Nouveauté de Caddy 2.5 : Expurger les données sensibles de vos logs | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/12/vignette-tilleuls-classique-nouveau-logo.png

Le Web2day en chiffres :

Nous sommes heureux de vous annoncer que nous sommes <a href="https://web2day.co/partenaires/" target="_blank" rel="noreferrer noopener">partenaires Gold du Web2day 2022</a>. Les 1er, 2 et 3 juin, aura lieu le plus grand festival francophone des professionnels du numérique, à Nantes !



Un événement incontournable autour de la tech digne ! Il réunit chaque année plus de 10 000 participants. En onze éditions, <a href="https://web2day.co/" target="_blank" rel="noreferrer noopener">le Web2day </a>s’est imposé comme un événement incontournable pour l’écosystème d’innovation Français, en réinventant les formats de conférences traditionnels.



Nous vous donnons rendez-vous <a href="https://web2day.co/comment-venir-au-web2day/" target="_blank" rel="noreferrer noopener">sous les nefs des Machines de l’île de Nantes</a>. N’hésitez pas à venir nous voir sur notre stand, vous aurez droit à quelques surprises !&nbsp;



<center><blockquote class="twitter-tweet">3️⃣0️⃣ petits jours avant de se retrouver&#8230; 🎉 En attendant, faites un tour du côté de la programmation pour découvrir les speakers de cette nouvelle édition ➡️ <a href="https://t.co/lyJqqQeohH">https://t.co/lyJqqQeohH</a> <a href="https://t.co/vZ9zfE7jdg">pic.twitter.com/vZ9zfE7jdg</a>— Web2day (@web2day) <a href="https://twitter.com/web2day/status/1521044094843244544?ref_src=twsrc%5Etfw">May 2, 2022</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><center></center></center>



<h2>Le Web2day en chiffres :</h2>



<ul><li>3 journées intenses</li><li>10 000 participants</li><li>225 speakers du monde entier</li><li>160 conférences</li><li>Une vingtaine de coopérateurs présents !&nbsp;</li></ul>



Conférences, workshops, showroom, soirées… <a href="https://web2day.co/le-festival/" target="_blank" rel="noreferrer noopener">Le Web2day est une manifestation qui s’adresse  à l’ensemble des acteurs du numérique </a>( PME, entreprises innovantes, développeurs.ses, designers, professionnel.les de la communication…) Plus de 5000 m2 d’espaces sont dédiés aux démos, exposants et autres animations du festival.



Nous serons aussi présents en tant que conférenciers car notre coopérateur <a href="https://twitter.com/s0yuka" target="_blank" rel="noreferrer noopener">Antoine Bluchet</a> , qui fait partie de notre agence de Nantes, présentera API Platform 3. <a href="https://web2day.co/event/un-standard-incontournable-pour-vos-apis-api-platform/" target="_blank" rel="noreferrer noopener">Retrouvez-le le Vendredi 3 juin à partir de 9h40</a> !



Depuis quelques années et notre première implantation à Nantes, on peut dire que notre équipe a déjà bien grandi ! Doucement mais sûrement, <a href="https://les-tilleuls.coop/la-cooperative/equipe" target="_blank" rel="noreferrer noopener">d’autres coopérateurs</a> rejoignent nos équipes de l’ouest de la France 🙂



Nous sommes impatients d’y être après deux années de pause !&nbsp; Et vous, vous y serez ? Dites-le nous <a href="https://twitter.com/coopTilleuls" target="_blank" rel="noreferrer noopener">sur Twitter </a>!

Les-Tilleuls.coop Sponsor Gold  et speaker du Web2day 2022 !

Nous sommes heureux de vous annoncer que nous sommes partenaires Gold du Web2day 2022. Les 1er, 2 et 3 juin, aura lieu le plus grand festival francophone des professionnels du numérique, à Nantes ! Un événement incontournable autour de la tech digne ! Il réunit chaque année plus de 10 000 participants. En onze éditions, [&hellip;]

Les-Tilleuls.coop Sponsor Gold et speaker du Web2day 2022 ! | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2022/04/Annonce-partenariat-•-Paysage.png

Les-Tilleuls.coop Sponsor Gold et speaker du Web2day 2022 !

Comme vous le savez peut-être, chaque vendredi (ou presque) depuis le début de cette année 2022, nous organisons des Twitter Space afin d’évoquer ensemble et de vive voix, différents sujets techniques d’actualité. 



Cela se passe sur <a href="https://twitter.com/coopTilleuls">notre compte Twitter</a> le vendredi à partir de 12h00, et ces moments sont souvent co-animés par <a href="https://twitter.com/dunglas" target="_blank" rel="noreferrer noopener">Kévin Dunglas</a> ainsi que d’autres coopérateur·rice·s. La semaine dernière par exemple, nous avons discuté d&rsquo;Api Platform 3 avec <a href="https://twitter.com/s0yuka" target="_blank" rel="noreferrer noopener">Antoine Bluchet</a> , <a href="https://twitter.com/_alanpoulain" target="_blank" rel="noreferrer noopener">Alan Poulain</a> et <a href="https://twitter.com/matarld" target="_blank" rel="noreferrer noopener">Mathias Arlaud</a> afin qu’ils présentent leurs dernières contributions et les nouveautés apportées par cette version. Mais les sujets abordés ne sont pas tous techniques, vous pouvez aussi retrouver des thèmes comme : la place des femmes dans l’IT, le modèle coopératif (en direct du congrès des Scop) ou encore le financement des logiciels libres.



<center><blockquote class="twitter-tweet">Après plus d’un an de travail acharné, API Platform 3 est enfin disponible en version alpha ! Venez discuter du projet avec des mainteneurs et des contributeurs : <a href="https://twitter.com/s0yuka?ref_src=twsrc%5Etfw">@s0yuka</a> <a href="https://twitter.com/_alanpoulain?ref_src=twsrc%5Etfw">@_alanpoulain</a> <a href="https://twitter.com/matarld?ref_src=twsrc%5Etfw">@matarld</a> <a href="https://twitter.com/dunglas?ref_src=twsrc%5Etfw">@dunglas</a> et bien d’autres. <a href="https://twitter.com/hashtag/TwitterSpaces?src=hash&amp;ref_src=twsrc%5Etfw">#TwitterSpaces</a> <a href="https://twitter.com/hashtag/PHP?src=hash&amp;ref_src=twsrc%5Etfw">#PHP</a> <a href="https://twitter.com/hashtag/JS?src=hash&amp;ref_src=twsrc%5Etfw">#JS</a> <a href="https://t.co/mzpcJyhgt8">https://t.co/mzpcJyhgt8</a>— Les-Tilleuls.coop (@coopTilleuls) <a href="https://twitter.com/coopTilleuls/status/1516795823866187776?ref_src=twsrc%5Etfw">April 20, 2022</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><center></center></center>



Durant ces échanges, vous pouvez interagir et poser vos questions aux différent·e·s coopérateur.ice.s qui animent ce podcast en direct.&nbsp;



Nous avons décidé d&rsquo;enregistrer ces émissions afin de les regrouper sur <a href="https://les-tilleuls.coop/la-cooperative/podcasts" target="_blank" rel="noreferrer noopener">une page dédiée de notre site internet.</a> Nous sommes également présents sur toutes les plateformes d’écoute ! Vous pouvez dès aujourd&rsquo;hui retrouver tous nos podcasts sur <a href="https://www.deezer.com/show/3534737" target="_blank" rel="noreferrer noopener">Deezer</a>, <a href="https://podcasts.apple.com/fr/podcast/les-tilleuls-coop-podcast/id1615851528" target="_blank" rel="noreferrer noopener">Apple Podcast</a>, <a href="https://open.spotify.com/show/3IrVRm5qFL5f6MlyBVeOz1" target="_blank" rel="noreferrer noopener">Spotify</a> et les ré-écouter autant que vous le souhaitez !



S’il y a des sujets dont vous voudriez que l’on discute, n’hésitez pas à nous en parler <a href="https://twitter.com/coopTilleuls" target="_blank" rel="noreferrer noopener">sur nos réseaux </a>!



A bientôt sur les ondes

Nos podcasts sont en ligne !

Comme vous le savez peut-être, chaque vendredi (ou presque) depuis le début de cette année 2022, nous organisons des Twitter Space afin d’évoquer ensemble et de vive voix, différents sujets techniques d’actualité. Cela se passe sur notre compte Twitter le vendredi à partir de 12h00, et ces moments sont souvent co-animés par Kévin Dunglas ainsi [&hellip;]

Nos podcasts sont en ligne ! | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2022/04/podcast-g933208de3_1280.png

Une m&ecirc;me ressource, des repr&eacute;sentations diff&eacute;rentes


GET /blog/a-propos-des-requetes HTTP/1.1
Host: exemple.com
Accept: application/json

HTTP/1.1 200 OK
Content-Type: application/json

{
  "title": "A propos des requetes",
  "...": "..."
}

GET /blog/a-propos-des-requetes HTTP/1.1
Host: exemple.com
Accept: text/html

HTTP/1.1 200 OK
Content-Type: text/html

&lt;!DOCTYPE html>
&lt;title>A propos des requetes&lt;/title>
&lt;!-- yes, this is a valid HTML document! -->

Router les requ&ecirc;tes avec le serveur web Caddy 


# Matches requests for HTML documents
@pwa expression `{header.Accept}.matches("\\btext/html\\b")`

reverse_proxy @pwa http://front
reverse_proxy http://api

<a href="https://dunglas.fr/2022/01/preventing-cors-preflight-requests-using-content-negotiation/" data-type="URL" data-id="https://dunglas.fr/2022/01/preventing-cors-preflight-requests-using-content-negotiation/" target="_blank" rel="noreferrer noopener">Read the original version of this post.</a>



Dans les applications web modernes, il est courant de servir l&rsquo;API web et l&rsquo;application frontend à partir de sous-domaines différents :&nbsp;



<ul><li>https://api.exemple.com : votre API Web, qui expose généralement des documents JSON.&nbsp;</li><li>https://exemple.com : votre application web, généralement construite en JavaScript, qui génère des documents HTML à partir des données JSON brutes récupérées grâce à l&rsquo;API.</li></ul>



C&rsquo;était le modèle mis en œuvre par <a href="https://api-platform.com/" target="_blank" rel="noreferrer noopener">API Platform</a> jusqu&rsquo;à l&rsquo;année dernière mais nous l&rsquo;avons changé pour deux raisons principales : les performances et les principes REST.



<h2>CORS nuit aux performances</h2>



Parlons d&rsquo;abord des performances. Lorsque vous servez votre API à partir d&rsquo;une <a rel="noreferrer noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Origin" target="_blank">origine</a> différente de celle de l&rsquo;application frontend, les navigateurs envoient automatiquement une requête OPTIONS supplémentaire avant toute requête adressée à l&rsquo;API. Il s&rsquo;agit d&rsquo;une <a href="https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request" target="_blank" rel="noreferrer noopener">requête de pré-vérification</a>, qui est nécessaire en raison du <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> (Cross-Origin Resource Sharing ou partage des ressources entre origines multiples). Ces requêtes de pré-vérification garantissent que l&rsquo;application frontend est autorisée à interagir avec les ressources servies par l&rsquo;API.



<a rel="noreferrer noopener" href="https://nickolinger.com/blog/2021-08-04-you-dont-need-that-cors-request/" target="_blank">Comme l&rsquo;explique Nick Olinger dans un récent article</a>, ces requêtes de pré-vérification ajoutent une latence inutile, elles ralentissent les applications, gaspillent la batterie des appareils mobiles et augmentent la charge des serveurs.



Le problème des requêtes de pré-vérification est encore plus grave lors de la mise en œuvre de styles d&rsquo;API tirant parti <a rel="noreferrer noopener" href="https://dunglas.fr/2019/11/vulcain-http-2-server-push%e2%80%a8-and-the-rise-of-client-driven-rest-apis/" target="_blank">des capacités de multiplexage de HTTP/2 et HTTP/3</a>, comme <a rel="noreferrer noopener" href="http://vulcain.rocks" target="_blank">Vulcain.rocks</a>. L&rsquo;idée principale des approches similaires à Vulcain est de télécharger de petites ressources en parallèle, uniquement lorsque cela est nécessaire et avec un bon taux de réussite du cache. Ces approches sont des alternatives au <a rel="noreferrer noopener" href="https://medium.com/apis-you-wont-hate/lets-stop-building-apis-around-a-network-hack-9a68f7e83dd2" target="_blank">téléchargement de gros documents composés</a> comme dans <a rel="noreferrer noopener" href="https://graphql.org/learn/queries/#fields" target="_blank">GraphQL</a> ou <a rel="noreferrer noopener" href="https://jsonapi.org/format/#fetching-includes" target="_blank">JSON:API</a>. Mais si &#8211; à cause de ce problème de requêtes preflight &#8211; le nombre de demandes effectuées est multiplié par 2, la latence sera mauvaise et les avantages des approches de type Vulcain seront réduits à néant.



La solution pour éviter ces requêtes est simple : servir l&rsquo;API et l’application frontend à partir de la même origine ! Et c&rsquo;est ce que nous avons fait dans API Platform 2.6.



Dans son article, Nick propose une solution rapide : configurez votre reverse proxy pour créer un alias de votre API en tant que chemin avec la même origine que votre application web. https://api.exemple.com devient https://exemple.com/api, toutes les ressources appartiennent à la même origine, problème résolu ! Mais nous pouvons faire encore mieux en suivant les principes REST.



<h2>Une même ressource, des représentations différentes</h2>



Le modèle architectural du web est connu sous le nom de REST (Representational State Transfer). Ce style a été <a href="https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm" target="_blank" rel="noreferrer noopener">défini par Roy Fielding</a> alors qu&rsquo;il travaillait sur les standards qui constituent encore aujourd’hui la base duweb : URI (Uniform Resource Identifier) et HTTP (Hypertext Transfer Protocol) :



<blockquote class="wp-block-quote">La première édition de REST a été développée […] principalement comme un moyen de communiquer les concepts du Web alors que nous rédigions la spécification HTTP/1.0 et la proposition initiale HTTP/1.1. Elle a été améliorée de manière itérative au cours des cinq années suivantes et appliquée à diverses révisions et extensions des normes du protocole Web.<cite>Roy T. Fielding, <a href="https://www.ics.uci.edu/~fielding/pubs/dissertation/evaluation.htm#sec_6_1" target="_blank" rel="noreferrer noopener">Architectural Styles and the Design of Network-based Software Architectures</a></cite></blockquote>



Fondamentalement, une bonne application web devrait suivre les principes REST, car <a rel="noreferrer noopener" href="https://httpwg.org/specs/rfc7231.html#rfc.xref.REST.1" target="_blank">REST est le style architectural du web lui-même</a>. Dans sa thèse de doctorat, Fielding définit les concepts de « <a rel="noreferrer noopener" href="https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_2_1_1" target="_blank">ressource</a> » et de « <a rel="noreferrer noopener" href="https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_2_1_2" target="_blank">représentation de ressource</a>« . Une ressource est une abstraction d&rsquo;information. Il peut s&rsquo;agir de « toute information qui peut être nommée ». Sur le web, une ressource est identifiée par un URI (<a rel="noreferrer noopener" href="https://www.w3.org/Addressing/#background" target="_blank"><a href="https://www.w3.org/Addressing/#background">aussi connu sous le nom d&rsquo;URL</a></a>). Une représentation de ressource est une concrétion, c&rsquo;est « une séquence d&rsquo;octets, plus des métadonnées de représentation pour décrire ces octets ». Habituellement, la représentation d&rsquo;une ressource est connue sous le nom de « fichier » ou de « document ». Cela signifie que la même ressource, ayant le même identifiant (son URI ou son URL), peut avoir différentes représentations.



Comme un exemple vaut mieux qu’un long discours, imaginons une plateforme de blog. Cette plateforme expose des articles de blog. Les articles sont disponibles par le biais d&rsquo;une API web, pour être récupérés par des machines. Ils sont également disponibles sur un site web, sous forme d&rsquo;articles lisibles par des humains. Sous le capot, le site web interroge l&rsquo;API web pour récupérer les articles sous forme de données&nbsp; brutes au format JSON et les transforme en un document HTML lisible par les humains. 



Si nous pensons en termes de concepts REST, nous avons une ressource (l&rsquo;abstraction) : l&rsquo;article de blog. Cette ressource a un identifiant unique : son URI, par exemple https://exemple.com/blog/a-propos-des-requetes. Cette ressource a deux représentations :



<ul><li>Le document JSON, servi par l&rsquo;API : la représentation de la ressource </li><li>Le document HTML, servi par le site web : représentation de la même ressource lisible par un humain</li></ul>



Ça semble pas mal, mais si les deux représentations ont le même identifiant, comment le serveur peut-il savoir celle qu&rsquo;il doit retourner ? C&rsquo;est là qu&rsquo;intervient la négociation du contenu.



REST, ainsi que le protocole HTTP, définissent des <a href="https://httpwg.org/specs/rfc7231.html#content.negotiation" target="_blank" rel="noreferrer noopener">mécanismes permettant au serveur d&rsquo;envoyer la représentation appropriée de la ressource</a>. Grâce au mécanisme de « négociation proactive », le client peut informer le serveur qu&rsquo;il préfère une représentation JSON de la ressource, en utilisant l&rsquo;en-tête de requête Accept :





De même, un navigateur web peut utiliser l&rsquo;en-tête Accept pour demander une représentation HTML :





Nous disposons désormais d&rsquo;un moyen élégant pour se passer des requêtes de pré-vérification CORS ! En vérifiant les principes REST, nous avons identifié que nous ne servions pas deux ressources différentes, mais deux représentations d&rsquo;une même ressource. La négociation de contenu permet au serveur d&rsquo;envoyer la représentation appropriée de la ressource en fonction du client : notre application JavaScript obtiendra la représentation JSON tandis que le navigateur web obtiendra la représentation HTML. Comme toutes les ressources sont maintenant servies à partir de la même origine (et ont même une URL identique), nous n&rsquo;avons plus besoin de requêtes de pré-vérification.



Cependant, de nos jours, les API et les sites web sont généralement développés à l&rsquo;aide de technologies différentes (par exemple Go, Rust ou PHP pour l&rsquo;API, JavaScript pour le site web). Et c&rsquo;est pourquoi il est pratique de les servir à partir de différents sous-domaines. Est-ce que nous tournons en rond ? Par chance, les serveurs web modernes et les reverse proxies permettent d&rsquo;acheminer facilement les requêtes vers différents backends en fonction des en-têtes de négociation du contenu.



<h2>Router les requêtes avec le serveur web Caddy </h2>



Comme vous le savez peut-être, nous aimons beaucoup chez Les-Tilleuls.coop <a rel="noreferrer noopener" href="https://caddyserver.com/" target="_blank">le serveur web Caddy</a> ! Si vous ne connaissez pas Caddy, il s&rsquo;agit d&rsquo;une alternative moderne, disposant de nombreuses fonctionnalités et distribué sous forme de logiciel libre à Apache et NGINX. Caddy est écrit en Go. Utilisé comme un reverse proxy, Caddy permet d&rsquo;inspecter facilement la requête et de la router vers l&rsquo;API web ou vers le site web en fonction de l&rsquo;en-tête Accept. Voici une version simplifiée du fichier Caddyfile fourni par <a href="https://dunglas.fr/2020/12/api-platform-2-6-php-8-support-next-js-and-nuxt-js-app-generator-caddy-server-activitypub-and-much-more/">API Platform 2.6</a> pour y parvenir :





Tout d&rsquo;abord, un <a rel="noreferrer noopener" href="https://caddyserver.com/docs/caddyfile/matchers" target="_blank">request matcher</a> est défini. Si l&rsquo;en-tête Accept contient le type MIME text/html, la requête est acheminée vers l&rsquo;application JavaScript (http://front), sinon, la requête est transmise à l&rsquo;API (http://api). Il s&rsquo;agit d&rsquo;URL internes. L&rsquo;URL publique est la même pour les deux représentations, Caddy se charge de la répartition. Et voilà ! Plus de requêtes de pré-vérification, et un design propre respectant les principes REST ! 



API Platform contient <a href="https://github.com/api-platform/api-platform/blob/main/api/docker/caddy/Caddyfile" target="_blank" rel="noreferrer noopener">un exemple plus avancé</a>. Bien entendu, il est également possible de réaliser cette opération à l&rsquo;aide d&rsquo;autres reverse proxies.

Empêcher les requêtes de pré-vérification CORS grâce à la négociation de contenu

Read the original version of this post. Dans les applications web modernes, il est courant de servir l&rsquo;API web et l&rsquo;application frontend à partir de sous-domaines différents :&nbsp; https://api.exemple.com : votre API Web, qui expose généralement des documents JSON.&nbsp; https://exemple.com : votre application web, généralement construite en JavaScript, qui génère des documents HTML à partir [&hellip;]

Empêcher les requêtes de pré-vérification CORS grâce à la négociation de contenu | Les-Tilleuls.coop

https://secure.gravatar.com/avatar/54fb8ea2a1a36c3b9ef44f25bf976b48?s=96&d=mm&r=g

Cécile Hamerel

git clone https://github.com/dunglas/symfony-docker

docker-compose build --pull --no-cache

docker-compose up

Docker Compose et les Dockerfile Flex Configurators


<a href="https://symfony.com/blog/introducing-docker-support" data-type="URL" data-id="https://symfony.com/blog/introducing-docker-support" target="_blank" rel="noreferrer noopener">Read the original version of this post.</a>



Au fil des ans, <a rel="noreferrer noopener" href="https://docker.com/" data-type="URL" data-id="https://docker.com/" target="_blank">Docker</a> est de facto devenu un standard pour construire, déployer et exécuter des applications serveur. Docker permet de rassembler toutes les instructions nécessaires pour construire l’environnement qui accueillera votre logiciel, et ce juste à côté du code dans le dépôt du projet. 



Nous sommes aujourd&rsquo;hui heureux d’annoncer qu’après 6 ans de travail en commun, Symfony et <a href="https://api-platform.com/" target="_blank" rel="noreferrer noopener">API Platform</a> incluent désormais un ensemble d’outils conçus pour créer, gérer et exécuter automatiquement les conteneurs Docker nécessaires à vos applications.



<h2>Docker Compose et les Dockerfile Flex Configurators</h2>



Comme vous le savez probablement, Symfony embarque un outil bien pratique appelé <a href="https://symfony.com/doc/current/quick_tour/flex_recipes.html" data-type="URL" data-id="https://symfony.com/doc/current/quick_tour/flex_recipes.html" target="_blank" rel="noreferrer noopener">Flex</a>. Flex est un plugin Composer qui facilite l’ajout de nouvelles fonctionnalités à vos projets. Lorsque vous installez une nouvelle bibliothèque PHP, Flex génère automatiquement le code et la configuration nécessaires pour que cette bibliothèque fonctionne.



Flex a aujourd’hui de nouveaux super pouvoirs ! Il est désormais capable de générer et de mettre à jour le fichier <code>docker-compose.yml</code> afin d’ajouter automatiquement les services requis par les bibliothèques que vous venez d’installer.



Par exemple, pour utiliser l’ORM Doctrine vous avez besoin d’un SGBD. Et bien, devinez quoi ? Lorsque vous installez Doctrine (e.g. <code>composer require orm</code>), Flex vous demandera désormais si vous voulez mettre à jour votre fichier <code>docker-compose.yml</code>. Si vous répondez “oui”, il ajoutera automatiquement un serveur PostgresSQL prêt à être utilisé ! 



<a href="https://asciinema.org/a/453483" target="_blank" rel="noopener"><img src="https://asciinema.org/a/453483.svg"></a>



Autre exemple : vous utilisez <a rel="noreferrer noopener" href="https://github.com/symfony/ux-turbo" data-type="URL" data-id="https://github.com/symfony/ux-turbo" target="_blank">Symfony UX Turbo</a> et vous souhaitez profiter de <a rel="noreferrer noopener" href="https://symfonycasts.com/screencast/turbo/mercure?cid=apip" data-type="URL" data-id="https://symfonycasts.com/screencast/turbo/mercure?cid=apip" target="_blank">ses fonctionnalités “temps-réel”</a>, alors vous avez besoin d’un hub <a rel="noreferrer noopener" href="https://mercure.rocks/" data-type="URL" data-id="https://mercure.rocks/" target="_blank">Mercure.rocks</a>. Symfony Flex est là pour vous aider : il peut automatiquement ajouter une ligne dans votre fichier&nbsp;<code>docker-compose.yml</code> ! 



Lancez la commande <code>docker-compose up</code> et c’est tout !



Il existe également un configurateur <code>Dockerfile</code> —en plus des “Docker Compose Configurators”— capable d’ajouter à un Dockerfile compatible les extensions PHP (e.g. <code>pdo_pgsql</code>) requises par les packages PHP que vous installez. On reparlera de ça bientôt !



À l’heure actuelle, les recettes Flex suivantes utilisent ces nouveaux configurateurs :



<figure class="wp-block-image size-medium"><img loading="lazy" width="600" height="177" src="https://api.les-tilleuls.coop/wp-content/uploads/2021/12/tableau-600x177.jpg" alt="" class="wp-image-3903" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2021/12/tableau-600x177.jpg 600w, https://api.les-tilleuls.coop/wp-content/uploads/2021/12/tableau-1024x302.jpg 1024w, https://api.les-tilleuls.coop/wp-content/uploads/2021/12/tableau-300x89.jpg 300w, https://api.les-tilleuls.coop/wp-content/uploads/2021/12/tableau-768x227.jpg 768w, https://api.les-tilleuls.coop/wp-content/uploads/2021/12/tableau-1536x453.jpg 1536w, https://api.les-tilleuls.coop/wp-content/uploads/2021/12/tableau.jpg 1600w" sizes="(max-width: 600px) 100vw, 600px" /></figure>



Le “Docker Compose Configurator” génère également <a href="https://docs.docker.com/compose/extends/" data-type="URL" data-id="https://docs.docker.com/compose/extends/" target="_blank" rel="noreferrer noopener">deux fichiers “override”</a> : <code>docker-compose.override.yml</code> contient la configuration spécifique à l’environnement de développement, et <code>docker-compose.prod.yml</code> la configuration de production. Nous reviendrons là-dessus plus tard.



<h2>Symfony CLI et Docker Compose&nbsp;</h2>



La <a rel="noreferrer noopener" href="https://github.com/symfony/cli" data-type="URL" data-id="https://github.com/symfony/cli" target="_blank">Symfony CLI</a> —que Fabien Potencier a open-sourcée durant <a rel="noreferrer noopener" href="https://live.symfony.com/2021-world-winter/" data-type="URL" data-id="https://live.symfony.com/2021-world-winter/" target="_blank">la keynote d’ouverture du SymfonyWorld</a>— est capable de <a rel="noreferrer noopener" href="https://symfony.com/doc/current/setup/symfony_server.html#symfony-server-docker" data-type="URL" data-id="https://symfony.com/doc/current/setup/symfony_server.html#symfony-server-docker" target="_blank">détecter automatiquement les services Docker Compose et de configurer automatiquement votre application pour les utiliser</a>. Pour faire ça, Symfony CLI requête l’API Docker Engine pour trouver les ports utilisés par les conteneurs Docker et valoriser les variables d’environnement utilisées par l’application pour s’y connecter. Grâce au <code>docker-compose.override.yml</code> généré, les services ajoutés par Symfony Flex sont compatibles avec cette fonctionnalité.



<a href="https://asciinema.org/a/453502" target="_blank" rel="noopener"><img src="https://asciinema.org/a/453502.svg"></a>



<figure class="wp-block-image size-medium"><img loading="lazy" width="600" height="463" src="https://api.les-tilleuls.coop/wp-content/uploads/2021/12/symfony-toolbar-symfony-cli-docker-600x463.png" alt="" class="wp-image-3876" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2021/12/symfony-toolbar-symfony-cli-docker-600x463.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2021/12/symfony-toolbar-symfony-cli-docker-1024x790.png 1024w, https://api.les-tilleuls.coop/wp-content/uploads/2021/12/symfony-toolbar-symfony-cli-docker-300x232.png 300w, https://api.les-tilleuls.coop/wp-content/uploads/2021/12/symfony-toolbar-symfony-cli-docker-768x593.png 768w, https://api.les-tilleuls.coop/wp-content/uploads/2021/12/symfony-toolbar-symfony-cli-docker.png 1104w" sizes="(max-width: 600px) 100vw, 600px" /></figure>



Et ce n’est pas tout : vous pouvez démarrer plusieurs projets en même temps sans aucun conflit (avec par exemple un serveur PostgreSQL sur chaque projet). Pour accomplir cela, les services Docker Compose dans <code>docker-compose.override.yml</code> sont mappés à des ports du host aléatoires ! Lancez la commande <code>docker-compose ps</code> depuis le répertoire de votre projet pour voir les ports assignés.



<h2>Squelette Docker et installateur</h2>



La Symfony CLI est le moyen le plus simple pour démarrer avec Symfony. Mais elle requiert une installation local de PHP et de Composer, et elle est conçue pour être utilisée uniquement en développement.



Mais alors comment faire si vous souhaitez être certain que tous les développeurs de votre équipe utilisent bien la même version de PHP ? Comment faciliter l’intégration de nouvelles personnes sans qu’elles soient forcées d’installer PHP ou Composer en local ? Comment faire pour utiliser la même configuration dans votre CI voire même en production ?



La réponse est : Symfony Docker !



<a rel="noreferrer noopener" href="https://github.com/dunglas/symfony-docker" data-type="URL" data-id="https://github.com/dunglas/symfony-docker" target="_blank">Symfony Docker</a> est un squelette contenant tout le nécessaire pour installer et exécuter un projet Symfony. Dès lors que vous disposez d’un Docker Compose fonctionnel, il vous permet de créer de nouveaux projets Symfony sans rien installer en local. Symfony Docker contient deux simples images :



<ol><li>PHP FPM (avec CLI)</li><li>Le serveur web <a href="https://caddyserver.com/" data-type="URL" data-id="https://caddyserver.com/" target="_blank" rel="noreferrer noopener">Caddy</a></li></ol>



Il contient des fichiers <code>Dockerfile</code> et <code>docker-compose.yml</code> compatibles avec les configurateurs Symfony Flex. Il est conçu pour être simple, lisible et minimaliste, tout en permettant d’exécuter vos projets localement, dans votre CI et en production !



Comme Symfony CLI, Symfony Docker valorise également les variables d’environnement utilisées par votre projet pour s’assurer qu’il se connecte bien aux services Docker Compose installés par le configurateur Flex.



Comme Symfony Docker utilise le serveur web Caddy, les certificats TLS sont générés et renouvelés automatiquement (pour <code>localhost</code> comme pour votre domaine en production), le support de HTTP/2 et HTTP/3 est natif, et vous pouvez installer <a rel="noreferrer noopener" href="https://caddyserver.com/download" data-type="URL" data-id="https://caddyserver.com/download" target="_blank">les modules Caddy</a> que vous voulez (les modules <a href="https://mercure.rocks/docs/hub/install#custom-caddy-build" data-type="URL" data-id="https://mercure.rocks/docs/hub/install#custom-caddy-build" target="_blank" rel="noreferrer noopener">Mercure</a> et <a href="https://github.com/dunglas/vulcain/blob/main/docs/caddy.md" data-type="URL" data-id="https://github.com/dunglas/vulcain/blob/main/docs/caddy.md" target="_blank" rel="noreferrer noopener">Vulcain</a>, un module <a href="https://authp.github.io/" data-type="URL" data-id="https://authp.github.io/" target="_blank" rel="noreferrer noopener">OAuth/OpenID Connect</a>, un module de <a href="https://github.com/darkweak/souin#caddy-module" data-type="URL" data-id="https://github.com/darkweak/souin#caddy-module" target="_blank" rel="noreferrer noopener">cache HTTP</a>, …) !



Utiliser Symfony Docker est très simple :





C’est tout, Symfony a été installé, votre projet est démarré et est en cours d’exécution. Installez Doctrine, ou Blackfire, ou n’importe quel package supporté par les configurateurs et les services/extensions PHP seront installés automatiquement !



Symfony Docker contient d’autres fonctionnalités intéressantes, comme la possibilité de choisir la version de Symfony à installer. Il peut également être ajouté sur des projets déjà existants. <a href="https://github.com/dunglas/symfony-docker#docs" data-type="URL" data-id="https://github.com/dunglas/symfony-docker#docs" target="_blank" rel="noreferrer noopener">Lisez sa documentation</a> pour en savoir plus.



Symfony Docker est aussi un <a href="https://github.com/dunglas/symfony-docker/generate" data-type="URL" data-id="https://github.com/dunglas/symfony-docker/generate" target="_blank" rel="noreferrer noopener">template GitHub</a> dont vous pouvez vous servir afin de bootstraper votre projet. Il contient <a href="https://github.com/dunglas/symfony-docker/blob/main/.github/workflows/ci.yml" data-type="URL" data-id="https://github.com/dunglas/symfony-docker/blob/main/.github/workflows/ci.yml" target="_blank" rel="noreferrer noopener">un workflow de GitHub Actions</a> qui exécute automatiquement vos tests en utilisant les conteneurs Docker fournis !



Symfony Docker n’est pas le seul squelette compatible avec les nouveaux configurateurs Flex : <a rel="noreferrer noopener" href="https://api-platform.com/docs/distribution/#using-the-api-platform-distribution-recommended" data-type="URL" data-id="https://api-platform.com/docs/distribution/#using-the-api-platform-distribution-recommended" target="_blank">la distribution API Platform</a> les supporte également !



<h2>Kubernetes</h2>



Symfony Docker (tout comme la distribution API Platform) est <a rel="noreferrer noopener" href="https://github.com/dunglas/symfony-docker/blob/main/docs/production.md" data-type="URL" data-id="https://github.com/dunglas/symfony-docker/blob/main/docs/production.md" target="_blank">utilisable en production via Docker Compose</a>, mais seuls les déploiements “single-host” sont supportés. Ce qui peut être pleinement suffisant pour des projets de petite ou moyenne taille, mais au-delà vous aimeriez probablement utiliser le roi des orchestrateurs : <a href="https://kubernetes.io/" data-type="URL" data-id="https://kubernetes.io/" target="_blank" rel="noreferrer noopener">Kubernetes</a>.



Les images Docker fournies par Symfony Docker ont été conçues pour être compatibles avec Kubernetes. Mais il y a mieux encore ! Le projet API Platform fournit un chart <a rel="noreferrer noopener" href="https://helm.sh/" data-type="URL" data-id="https://helm.sh/" target="_blank">Helm</a> (le gestionnaire de paquets de Kubernetes) pour déployer votre projet sur n’importe quel cluster Kubernetes en une seule commande !&nbsp;Ce chart est totalement compatible avec Symfony Docker (pas besoin d’utiliser API Platform). Copiez/collez ce chart en entier dans votre projet, et c&rsquo;est tout ! 



<a rel="noreferrer noopener" href="https://api-platform.com/docs/deployment/minikube/" data-type="URL" data-id="https://api-platform.com/docs/deployment/minikube/" target="_blank">Apprenez à déployer vos applications dans Kubernetes</a>.



Pour plus de détails à propos de cette toute nouvelle intégration Docker, vous pouvez regarder la conférence à ce sujet donnée lors du <a href="https://live.symfony.com/2021-world-winter/" data-type="URL" data-id="https://live.symfony.com/2021-world-winter/" target="_blank" rel="noreferrer noopener">Symfony World 2021</a> :



<center><iframe class="speakerdeck-iframe" src="//speakerdeck.com/player/563d315d06714ffa88017663e83540d1?" title="null" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" style="border: 0px; background: padding-box rgba(0, 0, 0, 0.1); margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 698px; height: 393px;" frameborder="0"></iframe></center>







Alors, que pensez-vous de cette nouvelle fonctionnalité ? Vous souhaitez être accompagné·e dans sa mise en place ? <a rel="noreferrer noopener" href="mailto:contact@les-tilleuls.coop" data-type="mailto" data-id="mailto:contact@les-tilleuls.coop" target="_blank">Contactez-nous</a> !

Présentation du support de Docker dans Symfony

Read the original version of this post. Au fil des ans, Docker est de facto devenu un standard pour construire, déployer et exécuter des applications serveur. Docker permet de rassembler toutes les instructions nécessaires pour construire l’environnement qui accueillera votre logiciel, et ce juste à côté du code dans le dépôt du projet. Nous sommes [&hellip;]

Présentation du support de Docker dans Symfony | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/08/419.png

Quels genres d'interventions &ecirc;tes-vous amen&eacute;s &agrave; faire ?


Julien, Thomas : pouvez-vous nous pr&eacute;senter en quelques mots votre parcours ?


Qu'est-ce qui vous pla&icirc;t dans votre m&eacute;tier ?


Nous avons récemment accueilli au sein de notre coopérative Julien Francoz et Thomas Samson, qui occupent le poste de Site Reliability Engineer. Découvrons à travers cet article le parcours de nos deux nouvelles recrues et en quoi consiste ce poste tout à fait complémentaire de nos offres de services actuelles.&nbsp;



<h2>Julien, Thomas : pouvez-vous nous présenter en quelques mots votre parcours ?</h2>



<h4>Julien </h4>



Je suis arrivé récemment chez Les-Tilleuls.coop, au poste de Site Reliability Engineer. J’ai passé les quinze années précédentes chez un infogéreur, où je suis passé d’administrateur système Linux, à architecte système/DevOps. J’ai consacré mes dernières années quasi exclusivement à de l’orchestration de containers (Docker/OpenShift/Kubernetes). J’y ai fait aussi un peu de management, et énormément d’escalade technique sur tout type d’incident. Dans cette entreprise, nos clients avaient d’un côté un infogéreur, de l’autre une agence web, avec toutes les problématiques qui vont avec : l&rsquo;infogérant et l’agence web ne travaillent pas suffisamment ensemble, les environnements ne sont pas ISO entre la dev/recette chez l’agence web, et les environnements de pré-production et production chez l&rsquo;infogérant. Cela amène souvent à des situations où chacun se renvoie la responsabilité.



J’ai voulu rejoindre Les-Tilleuls.coop, pour être dans une entreprise à taille bien plus humaine, avec un fonctionnement totalement différent (SCOP), et surtout travailler main dans la main avec les développeurs, plutôt que presque l’un contre l’autre dans ma précédente société.



<h4>Thomas </h4>



Je suis chez Les-Tilleuls.coop depuis cet automne en tant que Site Reliability Engineer. J’étais précédemment au sein d’un gros infogéreur en tant qu’administrateur système et réseaux. J’y réalisais la gestion de plusieurs SI, principalement sous Windows. J’administrais également toute la partie réseau (Switch, routeur, firewall…).&nbsp;



Je suis issu d’une formation axée principalement sur la culture DevOps et le monde des logiciels libres, et cet aspect me manquait vraiment là où j’étais. J’ai voulu rejoindre Les-Tilleuls.coop pour trouver un nouveau challenge, et parce que le poste correspondait réellement à tout ce que je voulais apprendre et faire à l’avenir. L’aspect coopératif de l’entreprise a fini de me convaincre.



<h2>Quels genres d&rsquo;interventions êtes-vous amenés à faire ?</h2>



Notre poste comprend différentes missions. Tout d’abord en tant que SRE, nous sommes responsables de la disponibilité des sites, ce qui implique de tout mettre en œuvre pour que cela fonctionne au mieux, anticiper tous les problèmes, et réagir au plus vite en cas d’incident.



Cela implique une part de design d’architecture. Nous conseillons nos clients pour mettre en place le meilleur compromis entre haute disponibilité et coût de la plateforme : une association humanitaire n’a pas le même budget qu’un site e-commerce, et pourtant en cas de crise humanitaire, elle peut aussi subir un très fort pic de trafic.



Nous allons ensuite réaliser la mise en production des plateformes, c&rsquo;est-à-dire les construire telles qu’elles ont été prévues, y installer les sites, réaliser d’éventuels tests de montée en charge, du tuning…



C’est aussi l’occasion de mettre en place le pipeline d’intégration et de déploiement continu, afin de permettre aux développeurs de mettre à jour le site de manière autonome, en garantissant que le site a préalablement été testé sur l’environnement de pré-production. Enfin, nous mettons aussi en place tous les outils qui vont ensuite nous permettre de l’exploiter pendant plusieurs années : sauvegarde, monitoring, agrégation des logs, scan de sécurité, capacity planning…



Une fois le site passé en production, nous surveillons la plateforme en 24/7, pour réagir au plus vite en cas d’incident. Un suivi est aussi fait des versions, qu’il faut mettre à jour régulièrement, notamment pour la sécurité. Dans le cas de Kubernetes, c’est un projet assez jeune, qui évolue très rapidement, et qui nécessite des mises à jour très régulières. 



Nous avons aussi un rôle de conseil, pour accompagner le client vers des évolutions, des nouvelles technologies… Et enfin, si jamais un client nous quitte, nous l’accompagnons dans sa migration vers un autre prestataire.



<h2>Qu&rsquo;est-ce qui vous plaît dans votre métier ?</h2>



<h4>Julien </h4>



C’est un métier qui me passionne techniquement, c’est un domaine qui évolue très vite, on apprend tous les jours. De plus, j&rsquo;adore les problèmes, investiguer, trouver des solutions. Et comme chaque site à des technologies différentes, chaque client à des besoins différents, chaque cloud provider a des produits différents pour chaque besoin, pas le temps de s’ennuyer.



De plus dans le cas du poste de SRE chez Les-Tilleuls.coop, nous sommes en train de monter une offre d’infogérance dans une société dont ce n’est pas initialement le métier et il y a tout à faire : choisir les bons outils, packager l’offre, la faire évoluer en fonction des besoins de nos clients, recruter, former…



<h4>Thomas</h4>



Ce qui me plaît dans le domaine SRE, c’est surtout les technologies employées. Nous sommes obligés d’être sans cesse en évolution sur les solutions techniques et c’est réellement passionnant. Je suis jeune dans le domaine SRE et j’ai donc énormément de choses à apprendre et c’est ce que j’aime. Je découvre chaque jour de nouvelles choses (de nouvelles technos, de nouveaux moyens d’automatisation … etc).&nbsp;



Chaque solution mise en place est différente. Elles représentent toutes un nouveau challenge et c’est ça qui rend ce domaine réellement passionnant. Les-Tilleuls.coop nous offrent une totale liberté sur le choix des solutions techniques. 



<h2>Comment faites-vous votre veille ?</h2>



<h4>Julien </h4>



Quand je peux, je vais au FOSDEM à Bruxelles : <a href="https://fosdem.org/">https://fosdem.org/</a>. Je participe aussi à quelques meetups. Concernant la veille autour de Kubernetes, c’est plutôt au cas par cas lors d’un besoin en particulier, que je vais regarder du côté du landscape de la Cloud Native Computing Foundation ( <a href="https://landscape.cncf.io/">https://landscape.cncf.io/</a> ) pour trouver l’outil adapté, faire des tests sur un labo…Je suis aussi quelques blogs.



<h4>Thomas </h4>



J’utilise l’application Feedly, qui est un agrégateur de flux RSS. Dedans j’ai plusieurs fils qui classent mes abonnements par technologies que je suis. L’information vient directement à moi sur les sujets qui m’intéressent et les articles intéressants, je les stocke dans GetPocket.



Merci Julien et Thomas pour cette présentation ! N&rsquo;hésitez pas à <a href="mailto:contact@les-tilleuls.coop" target="_blank" rel="noreferrer noopener">nous contacter</a> si vous rencontrez des problématiques de disponibilité de vos applications, nous serons ravis de vous accompagner.

Rencontre avec Julien et Thomas, membres de notre équipe SRE

Nous avons récemment accueilli au sein de notre coopérative Julien Francoz et Thomas Samson, qui occupent le poste de Site Reliability Engineer. Découvrons à travers cet article le parcours de nos deux nouvelles recrues et en quoi consiste ce poste tout à fait complémentaire de nos offres de services actuelles.&nbsp; Julien, Thomas : pouvez-vous nous [&hellip;]

Rencontre avec Julien et Thomas, membres de notre équipe SRE | Les-Tilleuls.coop

import type { CheerioAPI } from 'cheerio';

// ...

export async function getStaticProps({ params: { legacy } }: PathsParams) {
  // ...

  const cheerio: CheerioAPI = require('cheerio');
  const $ = cheerio.load(content);
  const head = $('head').first();
  const title = head.find('title').first().text();
  const metas = head
    .find('meta')
    .map((_, { attribs: { name, 'http-equiv': httpEquiv, content } }) =&gt; ({
      ...(name &amp;&amp; { name }),
      ...(httpEquiv &amp;&amp; { httpEquiv }),
      ...(content &amp;&amp; { content }),
    }))
    .toArray();
  const links = head
    .find('link')
    .map((_, { attribs: { rel, href, hreflang: hrefLang, type, sizes, crossorigin: crossOrigin } }) =&gt; ({
      ...(rel &amp;&amp; { rel }),
      ...(href &amp;&amp; { href }),
      ...(hrefLang &amp;&amp; { hrefLang }),
      ...(type &amp;&amp; { type }),
      ...(sizes &amp;&amp; { sizes }),
      ...(undefined !== crossOrigin &amp;&amp; { crossOrigin }),
    }))
    .toArray();
  const scripts = head
    .find('script')
    .map((_, { attribs: { id, src, type, defer, async, crossorigin: crossOrigin }, children }) =&gt; ({
      ...(id &amp;&amp; { id }),
      ...(src &amp;&amp; { src }),
      ...(type &amp;&amp; { type }),
      ...(undefined !== defer &amp;&amp; { defer: true }),
      ...(undefined !== async &amp;&amp; { async: true }),
      ...(undefined !== crossOrigin &amp;&amp; { crossOrigin }),
      text: $(children).text(),
    }))
    .toArray();

  head.remove();
  $('header').remove();

  return {
    props: {
      title,
      metas,
      links,
      scripts,
      html: $('body').html(),
    },
    revalidate: isHome ? 1800 : false,
  };
}

Utilisation du contenu pars&eacute; dans le composant de migration


import Head from 'next/head';

import Layout from 'components/Layout';

const Legacy = ({ title, metas, links, scripts, html }: Props) =&gt; (
  &lt;&gt;
    &lt;Head&gt;
      &lt;title&gt;{title}&lt;/title&gt;
      {metas.map(({ name, httpEquiv, content }, index) =&gt; (
        &lt;meta
          key={`meta_${index}`}
          {...(name &amp;&amp; { name })}
          {...(httpEquiv &amp;&amp; { httpEquiv })}
          {...(content &amp;&amp; { content })}
        /&gt;
      ))}
      {links.map(({ rel, href, hrefLang, type, sizes, crossOrigin }, index) =&gt; (
        &lt;link
          key={`link_${index}`}
          {...(rel &amp;&amp; { rel })}
          {...(href &amp;&amp; { href })}
          {...(hrefLang &amp;&amp; { hrefLang })}
          {...(type &amp;&amp; { type })}
          {...(sizes &amp;&amp; { sizes })}
          {...(undefined !== crossOrigin &amp;&amp; { crossOrigin })}
        /&gt;
      ))}
      {scripts.map(
        ({ id, src, type, defer, async, crossOrigin, text }, index) =&gt; (
          &lt;script
            key={`script_${index}`}
            {...(id &amp;&amp; { id })}
            {...(src &amp;&amp; { src })}
            {...(type &amp;&amp; { type })}
            {...(undefined !== defer &amp;&amp; { defer })}
            {...(undefined !== async &amp;&amp; { async })}
            {...(undefined !== crossOrigin &amp;&amp; { crossOrigin })}
            dangerouslySetInnerHTML={{ __html: text }}
          /&gt;
        )
      )}
    &lt;/Head&gt;
    &lt;Layout&gt;
      &lt;div dangerouslySetInnerHTML={{ __html: html }}&gt;&lt;/div&gt;
    &lt;/Layout&gt;
  &lt;/&gt;
);

export default Legacy;

/pages
  account/profile.tsx
  new.tsx
  [[...legacy]].tsx

export async function getStaticPaths() {
  return {
    paths: [
      { params: { legacy: [] } },
      { params: { legacy: ['booking', 'new'] } },
    ],
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params: { legacy } }: PathsParams) {
  // ...
  const isHome = !legacy;

  return {
    props: {
      html: content,
    },
    revalidate: isHome ? 1800 : false,
  };
}

Parser le HTML de la legacy avec Cheerio


Chez Les-Tilleuls.coop, une problématique revient régulièrement : le code de production tourne sur des technologies vieillissantes et a besoin d&rsquo;être migré vers des versions plus récentes ou bien un changement complet de technologie est demandé.



Plusieurs stratégies de migration existent, et nous adaptons notre réponse selon le contexte et les besoins de chaque client.



Une des stratégies les plus intéressantes est la migration incrémentale : le nouveau et l&rsquo;ancien code tournent en même temps et le code peut donc être réécrit au fur et à mesure.



Le risque d&rsquo;impacter les utilisateurs est amoindri et il est même possible de déployer des <a rel="noreferrer noopener" href="https://martinfowler.com/bliki/CanaryRelease.html" target="_blank">releases canary</a> pour s&rsquo;assurer de ne pas introduire de bugs.



Une des manières les plus simples de réaliser cette stratégie est de se baser sur la configuration du reverse proxy : l&rsquo;utilisateur utilise l&rsquo;ancien code ou le nouveau selon le chemin de la page sur laquelle il se trouve. Les deux codes peuvent utiliser des infrastructures différentes, mais il est nécessaire de migrer complètement une partie de l&rsquo;application pour réaliser cette technique.



<figure class="wp-block-image size-full"><img loading="lazy" width="592" height="306" src="https://api.les-tilleuls.coop/wp-content/uploads/2021/11/reverse-proxy.png" alt="Schéma d'une migration avec un reverse proxy" class="wp-image-3610" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2021/11/reverse-proxy.png 592w, https://api.les-tilleuls.coop/wp-content/uploads/2021/11/reverse-proxy-300x155.png 300w" sizes="(max-width: 592px) 100vw, 592px" /></figure>



Dans le cas de certaines technologies, il est possible d&rsquo;avoir les deux codes en même temps. C&rsquo;est par exemple le cas avec AngularJS, Angular et l&rsquo;outil <a rel="noreferrer noopener" href="https://angular.io/guide/upgrade#upgrading-with-ngupgrade" target="_blank">ngUpgrade</a> que nous avons eu l&rsquo;occasion de mettre en place chez <a href="https://www.alicesgarden.fr/" target="_blank" rel="noreferrer noopener">Alice&rsquo;s Garden</a>, assurant la migration de leur administration au fil de l&rsquo;eau sur plusieurs mois sans jamais couper leurs services. Cette stratégie est idéale puisque chaque composant peut être migré indépendamment mais peu de technologies supportent cette technique.



<figure class="wp-block-image size-full"><img loading="lazy" width="661" height="538" src="https://api.les-tilleuls.coop/wp-content/uploads/2021/11/angular.png" alt="Schéma d'une migration avec ngUpgrade" class="wp-image-3611" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2021/11/angular.png 661w, https://api.les-tilleuls.coop/wp-content/uploads/2021/11/angular-600x488.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2021/11/angular-300x244.png 300w" sizes="(max-width: 661px) 100vw, 661px" /></figure>



Cet article a pour but d&rsquo;aborder une troisième manière de faire : appliquer le <a rel="noreferrer noopener" href="https://martinfowler.com/bliki/StranglerFigApplication.html" target="_blank">Strangler Fig</a> pour migrer petit à petit des parties d&rsquo;une page, en particulier pour migrer une page classique HTML + JavaScript (peu importe la technologie du backend utlisée pour générer cette page) vers une page Next.js.



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="470" src="https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-1024x470.png" alt="Schéma d'une migration micro-incrémentale avec Next.js" class="wp-image-3612" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-1024x470.png 1024w, https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-600x275.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-300x138.png 300w, https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-768x352.png 768w, https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next.png 1035w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



J&rsquo;ai choisi d&rsquo;appeler cette stratégie « migration micro-incrémentale », pour exprimer ce découpage en petites parties d&rsquo;une page, que l&rsquo;on peut migrer indépendamment.



Cette approche partage de nombreuses similitudes avec l&rsquo;architecture <a rel="noreferrer noopener" href="https://martinfowler.com/articles/micro-frontends.html" target="_blank">micro frontends</a> et plus précisément l&rsquo;architecture <a rel="noreferrer noopener" href="https://jasonformat.com/islands-architecture/" target="_blank">islands</a>. Les composants React constituent un îlot tandis que la page legacy, préalablement découpée pour ne garder que les parties non migrées, constitue un deuxième îlot.



Mais avant d&rsquo;aller plus loin, abordons rapidement ce qu&rsquo;est Next.js et ce qu&rsquo;il nous apporte dans cette situation.



<h2>Next.js, le framework SSR de React</h2>



Contrairement à Vue.js ou Angular, React n&rsquo;est pas un framework, c&rsquo;est une bibliothèque. Pour réaliser une application complète, il est souvent nécessaire d&rsquo;utiliser des bibliothèques supplémentaires, par exemple pour le routage.



Dans une utilisation classique de React, de Vue.js ou d’Angular, le DOM est construit dynamiquement côté navigateur : le serveur ne renvoie quasiment pas de HTML ce qui peut poser des problèmes, en terme de SEO et de performance notamment.



Next.js propose de résoudre ces deux problèmes à la fois. C&rsquo;est un framework, donc il amène notamment son propre système de routage et il gère plusieurs types de rendu : SSR (rendu HTML côté serveur avec Node.js), SSG (fichiers HTML générés dans des fichiers plats) et même <a rel="noreferrer noopener" href="https://nextjs.org/blog/next-12#react-server-components" target="_blank">composants serveur</a> dans sa version 12.



Pourquoi ce framework nous intéresse-t-il dans le cas d&rsquo;une migration micro-incrémentale ? Comme vous allez le constater dans la partie suivante, utiliser cette technique ajoute un coût en terme de performance : il faut récupérer la page legacy, la parser et la rendre avec le reste des composants.



Next.js va nous permettre dans le meilleur des cas de générer statiquement certaines pages, ce qui effacera ce surcoût par rapport à la legacy, voire améliorera les performances si les pages n&rsquo;étaient pas statiques avant la migration.



À noter qu’il est possible d’utiliser la stratégie reverse proxy avec Next.js en se servant des <a rel="noreferrer noopener" href="https://nextjs.org/docs/api-reference/next.config.js/rewrites" target="_blank">rewrites</a>.



Rentrons maintenant dans le vif du sujet : comment fait-on pratiquement ?



<h2>Gérer le routage</h2>



La première étape est de gérer le routage de notre application. Nous voulons avoir à la fois la possibilité d&rsquo;avoir des pages totalement migrées et des pages partiellement migrées.



Le routeur de Next.js se base sur le nom des fichiers. Les pages complètement migrées seront créées de manière classique et nous allons créer une page spéciale qui va récupérer dynamiquement toutes les autres routes legacy avec la <a href="https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes" target="_blank" rel="noreferrer noopener">syntaxe spéciale <code>[[...]]</code></a>.



Cela va donner :





Nous voulons qu&rsquo;un maximum de pages soient générées statiquement. Nous allons ainsi utiliser la fonction spéciale <code>getStaticProps</code> :





Pour l&rsquo;instant nous nous contentons de retourner tout le code HTML de la page legacy dans la prop <code>html</code>.



Vous pouvez constater qu&rsquo;il est intéressant d&rsquo;avoir créé au préalable un sous-domaine <code>legacy</code> de votre site, qui retournera les anciennes pages.



Afin d&rsquo;indiquer à Next.js quelles pages doivent être générées statiquement à la compilation, il faut utiliser la fonction <code>getStaticPaths</code> :





Dans cet exemple, Next.js va générer deux pages statiques à la compilation : la page d&rsquo;accueil et la page <code>/booking/new</code> de la legacy :



<figure class="wp-block-image size-full"><img loading="lazy" width="504" height="99" src="https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-build-1.png" alt="Capture d'écran du résultat de la commande build de Next.js" class="wp-image-3620" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-build-1.png 504w, https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-build-1-300x59.png 300w" sizes="(max-width: 504px) 100vw, 504px" /></figure>



Vous pouvez constater que <code>blocking</code> a été choisi pour la <a href="https://nextjs.org/docs/basic-features/data-fetching#fallback-blocking" target="_blank" rel="noreferrer noopener">propriété <code>fallback</code></a> : si le chemin legacy n&rsquo;est pas dans la liste des <code>paths</code>, Next.js fera le rendu côté serveur lorsqu&rsquo;il recevra la requête (SSR classique), puis un fichier plat sera créé. Les requêtes suivantes sur ce même chemin utiliseront le fichier.



Les pages ne seront pas regénérées tant qu&rsquo;une nouvelle compilation ne sera pas réalisée. Imaginons que la page d&rsquo;accueil legacy possède un bloc changeant régulièrement d&rsquo;apparence. Nous pouvons dire à Next.js de regénérer à intervalle régulier la page (regénération statique incrémentale) grâce à la <a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation" target="_blank" rel="noreferrer noopener">propriété <code>revalidate</code></a> de l&rsquo;objet retourné par <code>getStaticProps</code> :





Dans le cas de la page d&rsquo;accueil, Next.js regénérera la page toutes les 30 minutes.



Une autre possibilité est d&rsquo;utiliser une <a href="https://fr.wikipedia.org/wiki/Edge_Side_Includes" target="_blank" rel="noreferrer noopener">balise ESI</a> pour le bloc à contenu changeant : la page contenant la balise est générée statiquement et un reverse proxy comme Varnish se charge de remplacer la balise par le bloc, en le mettant à jour de manière régulière.



Ce bloc pourra ensuite être migré indépendamment en gardant la balise ESI grâce à l&rsquo;utilisation de <a href="https://github.com/dunglas/react-esi/" target="_blank" rel="noreferrer noopener">React ESI</a>.



Si certaines pages ne peuvent pas être statiques, même pendant un temps très court, il sera possible de créer les pages correspondantes et d&rsquo;utiliser la fonction <code>getServerSideProps</code> pour que le rendu soit effectué à chaque requête.



Attention cependant : la plupart du temps il est possible de gérer le contenu côté navigateur, par exemple dans le cas d&rsquo;un utilisateur connecté, étant donné que les problématiques de SEO sont inexistantes.



Maintenant que le routage est géré, nous pouvons passer à l&rsquo;étape suivante : remplacer une partie d&rsquo;une page legacy par un composant React. Pour cela, nous devons tout d&rsquo;abord parser le code HTML reçu.



<h2>Parser le HTML de la legacy avec Cheerio</h2>



La bibliothèque que nous devons choisir pour parser le HTML doit être capable de s&rsquo;exécuter en Node.js et nous souhaitons aussi qu&rsquo;elle soit performante.



La bibliothèque <a rel="noreferrer noopener" href="https://github.com/jsdom/jsdom" target="_blank">jsdom</a> est par exemple à proscrire : elle interprète beaucoup trop le HTML (CSS, JS) pour nos besoins.



Mon choix s&rsquo;est porté sur <a rel="noreferrer noopener" href="https://cheerio.js.org/" target="_blank">cheerio</a> : la librairie se veut être très rapide puisque, contrairement à jsdom, elle n&rsquo;interprète aucun contenu du DOM. En « bonus » : l&rsquo;API de cheerio se base sur celle de jQuery, peut-on faire plus familier ?



Admettons que sur <code>https://legacy.mywebsite.com</code>, un header soit présent dans une balise <code>&lt;header&gt;</code>. Nous voulons migrer seulement ce header pour le remplacer par un composant React plus moderne.



Nous allons découper le HTML de la façon suivante : le <code>&lt;head&gt;</code> sera découpé en titre, métadonnées (<code>&lt;meta&gt;</code>), ressources externes (<code>&lt;link&gt;</code>) et scripts, le <code>&lt;body&gt;</code> sera quant à lui en une seule partie, avec le <code>&lt;header&gt;</code> en moins.



Notez que nous pourrions découper le body en blocs pour pouvoir le manipuler comme nous le souhaitons dans le JSX.



Voyons ce que cela donne :





Comme vous pouvez le constater, il y a un peu de plomberie à réaliser, pour deux raisons :



<ul><li>Next.js a besoin de sérialiser le contenu retourné par <code>getStaticProps</code> en JSON : il n&rsquo;est pas possible d&rsquo;avoir de valeurs <code>undefined</code>.</li><li>React utilise des props en camelCase : nous devons convertir les attributs qui sont en kebab-case.</li></ul>



<h2>Utilisation du contenu parsé dans le composant de migration</h2>



Le plus difficile est fait ! Nous allons maintenant utiliser les différents contenus dans notre composant. Nous allons en particulier utiliser le composant <code>Head</code> de Next.js et nous allons entourer le contenu du body dans un composant <code>Layout</code> se chargeant d&rsquo;ajouter un header moderne.



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="346" src="https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-header-1024x346.png" alt="Schéma de l'utilisation du composant Layout avec le reste du code legacy" class="wp-image-3679" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-header-1024x346.png 1024w, https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-header-600x202.png 600w, https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-header-300x101.png 300w, https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-header-768x259.png 768w, https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-header.png 1126w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



C&rsquo;est parti :





Encore une fois, un peu de plomberie, qui ressemble beaucoup à celle précédemment réalisée. Cette fois, elle est nécessaire à cause d&rsquo;un fonctionnement interne du composant <code>Head</code> de Next.js.



Celui-ci déduplique les balises en fonction des props, y compris celles qui sont <code>undefined</code> (<a rel="noreferrer noopener" href="https://github.com/vercel/next.js/blob/16d56e2c49b2d4bff93e6e74e8939efae2ccda4d/packages/next/shared/lib/head.tsx#L57" target="_blank">voir la fonction <code>unique</code> du composant</a>).



Une remarque importante également : étant donné que nous utilisons la prop spéciale <code>dangerouslySetInnerHTML</code>, nous avons besoin d&rsquo;une <code>div</code> supplémentaire qui va entourer notre contenu HTML.



Ce changement pourra dans certains cas, casser le CSS de la legacy : il faudra donc adapter le CSS pour gérer ce changement.



Une <a rel="noreferrer noopener" href="https://github.com/reactjs/rfcs/pull/129" target="_blank">RFC</a> proposant un composant <code>RawHTML</code> existe, mais n&rsquo;a pas encore été adoptée.



Pour tester que tout fonctionne, vous pouvez exécuter <code>npm run build</code> puis <code>npm run start</code>. En allant sur <code>http://localhost:3000/</code>, notre page legacy avec son nouveau header devrait être envoyée très rapidement par le serveur.



Avec ce code, nous venons de réaliser nos fondations pour notre migration micro-incrémentale ! Le reste de la migration se fera au fur et à mesure : nous découperons de plus en plus le body pour le remplacer par de nouveaux composants React.



<h2>Conclusion</h2>



Cette architecture, bien que non nécessairement liée à Next.js, est néanmoins très dépendante au moins de l&rsquo;utilisation d&rsquo;un framework SSR/SSG.



L&rsquo;implémentation de celle-ci dans Next.js vous a permis je l&rsquo;espère de comprendre un peu plus une utilisation avancée de ce framework de référence.



Un article à venir sur le blog rentrera dans le détail sur le fonctionnement de la génération des pages statiques, suivez-nous pour être informé de sa sortie !

Migration micro-incrémentale d'un legacy avec Next.js

Chez Les-Tilleuls.coop, une problématique revient régulièrement : le code de production tourne sur des technologies vieillissantes et a besoin d&rsquo;être migré vers des versions plus récentes ou bien un changement complet de technologie est demandé. Plusieurs stratégies de migration existent, et nous adaptons notre réponse selon le contexte et les besoins de chaque client. Une [&hellip;]

Migration micro-incrémentale d'un legacy avec Next.js | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/11/next-js.jpg

Migration micro-incrémentale d&rsquo;un legacy avec Next.js

https://secure.gravatar.com/avatar/04b6d9886e782e0676c0d26063f77ac9?s=96&d=mm&r=g

Alan Poulain

Une menace pour les libert&eacute;s et la vie priv&eacute;e


Qu&rsquo;est-ce que le Federated Learning of Cohorts (FLoC) ?


En tant qu'utilisateur&middot;trice :

En tant que d&eacute;veloppeur&middot;se :

Sources&nbsp;: <a href="https://www.eff.org/fr/deeplinks/2021/03/googles-floc-terrible-idea" target="_blank" rel="noopener">https://www.eff.org/fr/deeplinks/2021/03/googles-floc-terrible-idea</a> &amp; <a href="https://plausible.io/blog/google-floc" target="_blank" rel="noopener">https://plausible.io/blog/google-floc</a>&nbsp;



Google mène la charge pour <a href="https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html" target="_blank" rel="noopener">remplacer les cookies tiers</a> au profit d’une nouvelle série de technologies permettant de proposer un meilleur ciblage tout en préservant la vie privée des utilisateurs. Parmi elles, se trouve une technologie nommée FLoC, qui renforce à nouveau le pouvoir des GAFAM et renforce le <a href="https://coveryourtracks.eff.org/">fingerprinting</a>. Découvrons ensemble&nbsp;en quoi cette solution consiste et pourquoi elle est problématique.



<h3>Qu’est-ce que le Federated Learning of Cohorts (FLoC) ?</h3>



Le&nbsp;<a href="https://github.com/WICG/floc" target="_blank" rel="noopener">Federated Learning of Cohorts</a> ou l&rsquo;apprentissage fédéré des cohortes (FLoC) est une solution proposée par Google qui permet aux entreprises de réaliser un ciblage publicitaire ou comportemental sans cookie, sans consentement et avec <a href="https://searchengineland.com/googles-current-floc-tests-arent-gdpr-compliant-347168" target="_blank" rel="noopener">un respect du RGPD discutable</a>.&nbsp;



Au lieu de suivre les individus sur le web à l&rsquo;aide d&rsquo;outils tels que Google Analytics qui reposent sur les cookies tiers, c’est le navigateur Chrome lui-même qui va observer le comportement de tous les internautes et qui va les classer dans des cohortes aux intérêts, habitudes et comportements similaires, pour ensuite les cibler avec des publicités personnalisées. Selon Google, chaque cohorte devrait regrouper au minimum quelques milliers d&rsquo;utilisateurs.



Google teste FLoC depuis la sortie de la version 89 de son navigateur aux États-Unis, au Canada, en Australie, au Brésil, au Japon et dans plusieurs autres pays. Le géant américain prévoit de l&rsquo;activer pour tous les utilisateurs d’ici la fin de l’année.&nbsp;



<h3>Comment fonctionne le FLoC ?</h3>



Avec cette technologie, le navigateur de chaque utilisateur partagera avec les sites web et les annonceurs des identifiants de cohortes, indiquant à quels groupes d’internautes il ou elle appartient. En résumé, vos identifiants de cohortes seront comme un résumé succinct de votre activité récente sur le Web et cette activité de navigation sera réduite à une étiquette comportementale envoyée aux sites et annonceurs.



De l’autre côté, les sites et régies publicitaires communiquent avec <a href="https://github.com/google/ads-privacy/blob/master/proposals/FLoC/FLOC-Whitepaper-Google.pdf" target="_blank" rel="noopener">l’API du système de cohortes</a> et délivrent des publicités ciblées non plus individuellement, mais à des groupes d&rsquo;utilisateurs relativement similaires. Cette API démocratise l&rsquo;accès à certaines informations relatives à l&rsquo;historique de navigation d&rsquo;une personne (et donc à ses intérêts généraux) pour tout site qui en fait la demande. Les sites qui connaissent les données personnelles d&rsquo;une personne (par exemple, lorsqu’une personne se connecte en utilisant son adresse email) pourraient enregistrer et révéler leur cohorte. Cela signifie que les informations sur les intérêts d&rsquo;une personne peuvent éventuellement devenir publiques, par exemple suite à une fuite de données comme celle qui <a href="https://www.businessinsider.fr/us/stolen-data-of-533-million-facebook-users-leaked-online-2021-4" target="_blank" rel="noopener">a récemment touché 533 millions d’utilisateurs de Facebook</a>. Pour que FLoC soit utile aux annonceurs, la cohorte d&rsquo;un utilisateur révélera forcément des informations sur son comportement et sans surprise, cela créera des risques concernant la protection de la vie privée.



Les cohortes FLoC ne devraient pas fonctionner comme des identifiants en soi sauf que toute entreprise capable d&rsquo;identifier un utilisateur &#8211; par exemple, en offrant des services de « connexion avec Google » &#8211; sera en mesure de relier les informations obtenues par FLoC au profil de l&rsquo;utilisateur.



Deux catégories d&rsquo;informations peuvent être exposées de cette manière :



<ul><li role="presentation">Des&nbsp;informations spécifiques sur l&rsquo;historique de navigation. Les traqueurs peuvent être en mesure de déterminer que tout utilisateur appartenant à une cohorte spécifique a probablement ou certainement visité des sites spécifiques (si en recoupant nos données avec celles d&rsquo;autres sources et sachant que Pierre, Paul&nbsp;et 100 autres utilisateurs ont visité le site A&nbsp;et font partie de la cohorte B, on peut statistiquement inférer que Martin&nbsp;a très probablement aussi visité ce site).&nbsp;</li><li role="presentation">Des informations générales sur les données démographiques ou les centres d’intérêts.&nbsp;</li></ul>



Tous les sites que vous visitez sauront quel type de personne vous êtes au premier contact, sans avoir à vous suivre à travers le web. De plus, comme votre cohorte FLoC sera mise à jour au fil du temps, les sites qui peuvent vous identifier par d&rsquo;autres moyens seront également en mesure de suivre l&rsquo;évolution de votre navigation.&nbsp;



<h3>Une menace pour les libertés et la vie privée</h3>



L&rsquo;objectif affiché de FLoC est d&rsquo;éviter de laisser des traqueurs accéder à des informations spécifiques liées à des personnes spécifiques, sauf que FLoC peut en réalité aider les traqueurs dans d’autres contextes. Même si Google est en mesure d&rsquo;itérer sur sa conception, l&rsquo;objectif principal du FLoC est en contradiction avec les libertés civiles.&nbsp;Les préjudices de la publicité ciblée ne se limitent pas aux violations de la vie privée, la publicité ciblée a aussi le pouvoir de discriminer.&nbsp;



Par définition, les publicités ciblées permettent aux annonceurs d&rsquo;atteindre certains types de personnes tout en en excluant d&rsquo;autres. Au fil des ans, le mécanisme de la publicité ciblée a souvent été utilisé à des fins d&rsquo;exploitation, de <a href="https://www.reuters.com/article/us-facebook-advertisers/u-s-charges-facebook-with-racial-discrimination-in-targeted-housing-ads-idUSKCN1R91E8" target="_blank" rel="noopener">discrimination</a> ou de <a href="https://stoponlinevaw.com/wp-content/uploads/2018/10/Black-ID-Target-by-Russia-Report-SOVAW.pdf" target="_blank" rel="noopener">manipulation</a>.



FLoC utilise un algorithme non supervisé pour créer ses cohortes. Cela signifie que personne n&rsquo;aura un contrôle direct sur la façon dont les gens seront regroupés. Idéalement, pour les annonceurs, FLoC créera des groupes ayant en commun des comportements et des intérêts significatifs. Mais le comportement en ligne est lié à toutes sortes de caractéristiques sensibles &#8211; des données <a href="https://ojs.aaai.org/index.php/ICWSM/article/view/14776" target="_blank" rel="noopener">démographiques</a> telles que le genre, l&rsquo;origine ethnique, l&rsquo;âge et le revenu, <a href="https://www.pnas.org/content/117/30/17680" target="_blank" rel="noopener">des traits de personnalité</a> et <a href="https://link.springer.com/chapter/10.1007/978-3-642-23620-4_22" target="_blank" rel="noopener">même la santé mentale</a>. Il est fort probable que FLoC regroupera également les utilisateurs selon certains de ces axes.



Avec un système d&rsquo;opt-in pour les annonceurs, et d’opt-out pour les utilisateurs, Google se vante d’une transparence et d’un contrôle fait directement par l&rsquo;utilisateur, tout en sachant pertinemment que la grande majorité de ses utilisateurs ne comprendront pas le fonctionnement du FLoC, voire n’auront pas conscience de son existence, et que très peu d&rsquo;entre eux feront l&rsquo;effort de le désactiver.&nbsp;



Chez Les-Tilleuls.coop, nous rejetons catégoriquement cette technologie. Le web devrait avant tout être au service des utilisateurs, et non à celui des publicitaires ou de la surveillance de masse.



<h3>Que faire ?</h3>



<h4>En tant qu&rsquo;utilisateur·trice :</h4>



N&rsquo;utilisez pas Google Chrome. Utilisez Firefox et installez l&rsquo;extension <a href="https://addons.mozilla.org/fr/firefox/addon/ublock-origin/" target="_blank" rel="noopener">uBlock Origin</a> qui bloque toutes les publicités et trackers.&nbsp;Dans les paramètres de Firefox, section « Vie privée&nbsp;et sécurité », activez&nbsp;le mode « Strict ». Si vous aimez utiliser Google Chrome, il est possible de désactiver le FLoC. Cela signifie que Google vous placera dans une cohorte aléatoire au lieu d&rsquo;une cohorte précise.



Google a aussi annoncé une option dans les paramètres de Chrome pour refuser FLoC :



<ul><li role="presentation">Déconnectez-vous de votre compte Google et désactivez la synchronisation des données d&rsquo;historique avec Chrome.</li><li role="presentation">Bloquez les cookies tiers ou naviguez en mode privé.</li><li role="presentation">Désactivez les options suivantes dans les contrôles d&rsquo;activité : « Activité sur le Web et les applications », “Inclure l&rsquo;historique Chrome et l&rsquo;activité liée aux sites, aux applications et aux appareils qui utilisent les services Google ».</li><li role="presentation">Décochez l’option de personnalisation dans les paramètres de <a href="https://adssettings.google.com/authenticated?hl=enhttps://adssettings.google.com/authenticated?hl=en" target="_blank" rel="noopener">Google Ads</a>. Vous pouvez aussi consulter et contrôler cette personnalisation <a href="http://www.youronlinechoices.com/fr/controler-ses-cookies/" target="_blank" rel="noopener">ici</a>.</li></ul>



<a href="https://www.eff.org/" target="_blank" rel="noopener">L&rsquo;EFF</a> a aussi lancé début avril <a href="https://amifloced.org/" target="_blank" rel="noopener">Am I FLoCed</a>, un site permettant de savoir si votre navigateur fait partie d’une cohorte.&nbsp;



<h4>En tant que développeur·se :</h4>



Vous pouvez déclarer à Google que votre site ne souhaite pas être inclus dans la liste des sites pour le calcul de la cohorte. Si vous ne déclarez rien,&nbsp;cela&nbsp;sera activé uniquement si le site affiche des publicités ciblées ou utilise l&rsquo;API JavaScript de FLoC.



Pour le désactiver sur votre site, définissez l’en-tête HTTP suivante :



<pre class="wp-block-preformatted">Permissions-Policy: interest-cohort=()</pre>



Plusieurs outils ou technologies sont déjà en train de mettre en place cet en-tête sur leurs sites parmi lesquels :&nbsp;&nbsp;



<ul><li role="presentation"><a href="https://github.com/api-platform/api-platform/pull/1879" target="_blank" rel="noopener">API Platform</a></li><li role="presentation"><a href="https://github.com/caddyserver/website/pull/152" target="_blank" rel="noopener">Caddy</a>&nbsp;</li><li role="presentation"><a href="https://github.com/php/web-php/commit/9bc507afae21c9da1c30ee1ab0654fea8150549b" target="_blank" rel="noopener">PHP</a></li><li role="presentation"><a href="https://make.wordpress.org/core/2021/04/18/proposal-treat-floc-as-a-security-concern/" target="_blank" rel="noopener">WordPress</a></li></ul>



Et vous, que pensez-vous de cette initiative de Google ? Connaissez-vous d&rsquo;autres projets qui ont mis en place l&rsquo;en-tête empêchant d&rsquo;être inclus dans ces listes ? <a href="https://twitter.com/coopTilleuls" target="_blank" rel="noopener">Dites-le nous</a> !&nbsp;

Pourquoi Google FLoC est problématique pour la sécurité des utilisateurs du web

Sources&nbsp;: https://www.eff.org/fr/deeplinks/2021/03/googles-floc-terrible-idea &amp; https://plausible.io/blog/google-floc&nbsp; Google mène la charge pour remplacer les cookies tiers au profit d’une nouvelle série de technologies permettant de proposer un meilleur ciblage tout en préservant la vie privée des utilisateurs. Parmi elles, se trouve une technologie nommée FLoC, qui renforce à nouveau le pouvoir des GAFAM et renforce le fingerprinting. Découvrons [&hellip;]

Quoi de neuf chez Les-Tilleuls.coop ?