Newsletter Apprendre Laravel #12

Envoyée le 04 février 2020

Bienvenue dans cette nouvelle édition de ma newsletter Apprendre Laravel. Ce matin, nous avons débattu du RGPD sur mon Discord et effectivement, tout n'est pas clair. D'un côté, la CNIL liste des exceptions sur sa page sur les cookies (panier d'achat, identifiant de session, personnalisation de la langue…). Concernant le RGPD, tout est plus flou, est-ce que ces exceptions sont toujours valables ? Je n'ai pas réussi à trouver de texte original fiable.

Personnellement, je ne mets pas de bandeau de cookies sur la plupart de mes sites, mais, en échange, je ne fais pas de tracking analytics (ni avec Google Analytics ni avec Matomo) ni de publicité ciblée. Néanmoins, le fait d'en rediscuter m'a fait auditer à nouveau mon site https://www.apprendre-laravel.fr et j'y ai trouvé quelques anomalies :

Ces problèmes sont maintenant résolus et ont demandé seulement quelques minutes de travail.

Concernant le CDN : rien de plus simple. J'ai téléchargé les fichiers depuis CloudFlare vers le dossier public de mon application Laravel et j'ai changé les chemins dans le HTML. Le CDN apporte un seul avantage : si un autre site utilise le même lien que moi pour highlight.js (avec la même version) et via le même CDN (CloudFlare) alors le fichier n'est pas retéléchargé. Dans les faits, je ne suis pas sûr que ce concours de circonstance arrive souvent. Dans le cas où le fichier n'est pas en cache sur le navigateur du visiteur, le temps perdu est assez important, car le fichier doit être récupéré depuis un autre domaine et donc oblige l'initialisation d'une nouvelle requête HTTPS assez lente. Comme j'utilise HTTP2 sur mon serveur, récupérer des fichiers supplémentaires depuis le même serveur devrait être assez rapide (réutilisation de la connexion existante).

Concernant YouTube, le visionnage de la vidéo demande maintenant deux cliques au lieu d'un. Le premier pour afficher l'iframe de YouTube et le deuxième pour lancer la vidéo. Le code est assez simple :

         <div class="w-full max-w-md mx-auto px-6">
             <div class="mb-8 sm:mb-12">
                 <div class="embed-responsive embed-responsive-16by9">
-                    <iframe src="{{ $article->youtube() }}" allowfullscreen="" frameborder="0" class="embed-responsive-item"></iframe>
+                    <div class="embed-responsive-item">
+                        <button onclick="
+                            (document.querySelector('iframe').src = document.querySelector('iframe').dataset.src) &&
+                            document.querySelector('iframe').classList.remove('hidden') &&
+                            this.parentNode.classList.add('hidden')
+                        " class="h-full w-full flex justify-center items-center border text-grey-dark"
+                        >
+                            Cliquez ici pour afficher la vidéo et autoriser les cookies YouTube
+                        </button>
+                    </div>
+                    <iframe data-src="{{ $article->youtube() }}" allowfullscreen="" frameborder="0" class="embed-responsive-item hidden"></iframe>
                 </div>
             </div>

J'ai caché l'iframe (via la classe hidden) et remplacé son attribut src par un attribut data-src afin que l'URL ne soit pas chargée automatiquement par le navigateur. Ensuite, j'ai ajouté un bouton indiquant la source de la vidéo cachée avec un event listener permettant d'afficher la vidéo au clic :

(document.querySelector('iframe').src = document.querySelector('iframe').dataset.src) &&
document.querySelector('iframe').classList.remove('hidden') &&
this.parentNode.classList.add('hidden')

Des améliorations sont possibles :

Ces quelques minutes de code m'ont permis de supprimer tous les cookies et appels tiers de mon site. Le cookie de session de PHP est toujours présent car j'en ai besoin pour la protection CSRF et le message flash du formulaire d'abonnement à la newsletter.

Légalement, je ne suis pas sûr que le RGPD ne m'impose pas un bandeau de cookie même pour mon usage raisonné des cookies, mais je suis personnellement prêt à prendre le risque de ne pas en mettre. La plupart des sites ne proposent de toute manière pas un bandeau conforme, si le bandeau de votre site est :

Il ne me semble pas avoir croisé un seul site respectant tous ces critères. Ironiquement, même la CNIL dépose des cookies Piwik (Matomo) sans bandeau d'information :-)

Bonne fin de journée à tous,

Thibaud

Inscrivez-vous à la newsletter pour recevoir chaque semaine un condensé d'informations sur Laravel : nouveautés du framework, vidéos explicatives, tutoriels et bien plus encore !