
đ WA-Tech&DevNews N°15
Bienvenue Ătranger
LâĂ©ditoCâest âlâintroductionâ, mais cela fait davantage journal, Ă©crit comme ça. |
Ceci est un texte, il est lĂ pour compenser un manque dâinspiration et crĂ©er une cohĂ©rence visuelle entre les diffĂ©rentes parties de ce document.
LâactualitĂ©
Cookies/trackers : La date limite de mise en conformité approche !
Vous avez probablement remarquĂ© vous aussi que de nouvelles rĂšgles sur la gestion des cookies entraĂźnaient lâapparition de fenĂȘtres de plus en plus grandes et envahissantes sur vos sites prĂ©fĂ©rĂ©s. Et bien vous aussi, allez devoir en mettre : la CNIL laisse jusquâau 31 mars 2021 pour vous mettre en conformitĂ© sur les nouvelles rĂšgles de gestion des cookies. Et aprĂšs cela, câest le strike. Vous trouverez directement sur le site de la CNIL les rĂšgles Ă mettre en place : https://www.cnil.fr/fr/cookies-et-traceurs-comment-mettre-mon-site-web-en-conformite
#actu:focus : Quand lâhĂ©bergement français sâenflamme
Merci OVH.
Cette semaine on est obligĂ© de penser Ă ce magnifique feux de joie. Que faut-il en retenir ? LES BACKUPS et l’importance de vĂ©rifier que les backups sont bien stockĂ©s Ă des endroits diffĂ©rents dans le monde !
En tant que Consultant câest aussi notre devoir de mettre ces sujets sur la table et dâĂ©duquer nos clients sur la sĂ©curisation de leurs donnĂ©es.
Un environnement de développement public sur le net ?
La semaine derniÚre un de nos consultants à subit les foudres des bots informatiques et à perdu une base de données de dev. Pourquoi ?
Un environnement de dĂ©veloppement accessible publiquement Ă©tait disponible sur le net. Symfony configurĂ© en mode dev ne bloque pas le phpinfo. RĂ©sultat : les variables dâenvironnement de symfony Ă©taient lisibles par des petits bots qui se sont amusĂ©s Ă drop la base de donnĂ©es.
Que puis-je mettre en place pour améliorer la sécurité de mon environnement ?
- VĂ©rifier que la commande phpinfo est dĂ©sactivĂ©e, que votre php.ini nâest pas lisible et plus gĂ©nĂ©ralement que vos ports soient bien configurĂ©s.
- Mettre en place un accĂšs VPN si possible
- Mettre en place des utilisateurs de BDD avec des droits limités ( Exemple : AprÚs avoir fait votre build et fait vos updates de BDD, remplacer le user mysql du .env par un user plus restreint
- DĂ©sactiver lâaccĂšs distant de votre base de donnĂ©es en public et ne lâautoriser que pour votre serveur, votre vpn et si possible que sur certains utilisateurs.
- Restreindre lâaccĂšs par localisation Ă votre serveur. Exemple pour un site de dev en public: il est quasiment sĂ»r que vous nâavez pas besoin dây accĂ©der depuis un autre pays que la France. Cela rĂ©duit drastiquement les bots qui peuvent vous attaquer. Il faut en discuter avec lâĂ©quipe Infra. Sur AWS il est possible de mettre en place des stratĂ©gies de traffic via AWS Route53
- Mettre en place un module permettant de limiter le trafic dâune mĂȘme IP. ( Permet notamment de se prĂ©munir des attaques DDOS et de limiter la charge de votre serveur Ă un trafic plus ârĂ©elâ ). Sous apache par exemple il y a mod_ratelimit ou mod_qos
- Vous pouvez également mettre en place un .htaccess sur votre environnement avec des identifiants ( dédicace au SI ! )
- Pour les utilisateurs AWS je vous invite aussi à regarder du cÎté de AWS SHIELD et AWS WAF pour bénéficier des blacklists AWS mises à jour en temps réel
Webdomadaire
has() : la feature CSS de la semaine
Deep dive dans le CSS4.
DĂ©couvrons une nouvelle propriĂ©tĂ© compatible nulle part. Mais elle est terriblement pratique : nâavez-vous jamais ressenti le besoin dâappliquer un style Ă un conteneur parent en fonction de la prĂ©sence dâun enfant en particulier ? Câest ce que vous propose la pseudo-classe :has(), actuellement en working draft. Votre navigateur connaĂźt dĂ©jĂ des propriĂ©tĂ©s et pseudo-classes CSS 4 ! Ce site permet de les dĂ©couvrir.
Des animations CSS / JS stylées ?
Les confins de codepen.io.
Je vous propose quelques liens avec du code sources pour rĂ©aliser des animations et vous donner quelques idĂ©es pour vos projets đ
Steam inspired game card hover effect
Card Hover Interactions (codepen.io)
Image slider with multiple controls and mobile swipe control (Javascript) (codepen.io)
Animated Tab Bar v.2 (codepen.io)
SVG clip-path Hover Effect (codepen.io)
CSS Search Field Animation (codepen.io)
Voyage Slider | GSAP (codepen.io)
Sliding tabs | CSS transitions only (codepen.io)
Pokemon Card Holo Effect (codepen.io)
Les dossiers
Symfony : cas dâĂ©tude – un mode maintenance facile.
On sâest tous ou presque retrouvĂ© Ă devoir mettre un site en maintenance pour une durĂ©e variable. Plusieurs mĂ©thodes existent : avoir une ligne Ă dĂ©commenter dans le .htaccess, une branche dĂ©diĂ©e Ă dĂ©ployer avec le index.php qui redirige tout vers un maintenance.html⊠Peut-ĂȘtre mĂȘme avec un filtrage dâIP pour pouvoir en tant quâadmin continuer Ă consulter le site. RĂ©cemment je suis tombĂ© sur une mĂ©thode que je trouve assez sympa et qui nĂ©cessite peu dâintervention serveur. Ce cas dâĂ©tude est sur un site en Symfony 3.4, et complĂšte ce tutorial en ligne, en ajoutant quelques trucs supplĂ©mentaires assez sympa, comme la possibilitĂ© de vous balader sur votre site pendant que celui-ci est en mode maintenance.
Créer un détecteur de mode maintenance
Le principe est trĂšs simple : on va crĂ©er un eventListener qui dĂ©tecte la prĂ©sence dâun fichier .lock dans le dossier web (public pour symfony 4 et plus) de notre application. Peu importe son contenu. Sâil est prĂ©sent, lâapplication active le mode maintenance.
Pré-requis
Pour pouvoir utiliser ce mode maintenance facile, il vous faudra un accĂšs terminal Ă votre serveur avec la permission dâĂ©crire dans le dossier de votre application.
Ătape 1 : Config
On va commencer par indiquer Ă notre application oĂč chercher ce fameux fichier .lock :
Ensuite, on va créer notre listener :
On remarque que notre service prend en paramĂštre du constructeur notre lockFilePath, du coup on oublie pas de lâindiquer dans le services.yaml, avec les bons tags pour signaler quâon va Ă©couter lâĂ©vĂšnement request.
Quâest-ce que fait notre listener du coup ? Pour reprendre une cĂ©lĂšbre citation de Jamy Gourmaud âHĂ© bien câest trĂšs simpleâ, notre eventListener regarde sâil y a un fichier .lock dans le dossier web/ de notre application, et si oui, la rĂ©ponse Ă toutes les requĂȘtes sera forcĂ©ment âLe site est en maintenanceâ.
Désormais, on peut activer et désactiver le mode maintenance depuis un terminal connecté au serveur :
Câest cool, mais on aimerait une vraie page de maintenance, non ?
Ătape 2 : ajoutons du twig
Pas de souci câest pas bien dur, on va simplement insĂ©rer Ă©galement Twig dans notre event listener. Ăditons un peu notre dĂ©claration de service :
Parfait, maintenant on va pouvoir utiliser twig dans notre eventListener :
Ici on est en symfony 3.4, on aura donc mis notre template de maintenance dans app/Resources/views/maintenance.html.twig, mais libre Ă vous dâajuster le path. Vous ĂȘtes des grand.e.s dĂ©veloppeur.euse.s đ
La cerise sur le gĂąteau : je suis admin, je fais ce que je veux !
Câest cool ce petit mode maintenance, hein ? Ce qui serait encore plus cool câest quâen tant que dev je puisse me balader librement sur le site mĂȘme quand le mode maintenance est actif. Ă partir de lĂ , on sort du tuto dont je vous ai mis le lien pour aller dans les ajouts perso.
On va ajouter un filtre par IP dans notre petit event déjà dans la déclaration du service :
On remarque quâon a rajoutĂ© un troisiĂšme paramĂštre : %trusted_ips%, ce paramĂštre, on va le dĂ©finir dans notre fichier config.yml, et quâon pourra ajuster dans notre config-dev.yml ou notre config_prod.yml. Il contiendra la liste des ips qui pourront consulter le site mĂȘme si le mode maintenance est actif.
Par exemple, ici en local, on va autoriser 127.0.0.1 Ă consulter le site. On va actualiser notre petit Event Listener avec ce nouveau paramĂštre :
Et voilĂ , maintenant les personnes voulant accĂ©der au site avec les IP inscrites dans vos fichiers de config pourront accĂ©der librement au site ! Alors oui jâai un peu menti, si vous voulez ajouter des IP autorisĂ©es il faudra Ă©diter vos fichier de config. Mais ça arrivera beaucoup moins souvent que de devoir activer/dĂ©sactiver le mode maintenance.
La cerise sur le gĂąteau : Afficher que le mode maintenance est actif.
Histoire de ne pas oublier que vous avez activé/désactivé le mode maintenance, je vous propose de pouvoir vérifier dans vos fichiers twig si le mode maintenance est activé. Pour ça, on va déclarer notre paramÚtre lockPathFile comme variable globale de twig :
Avec cette petite dĂ©claration, vous pouvez accĂ©der Ă {{ lockFilePath }} dans nâimporte quel fichier twig. PlutĂŽt cool, hein ? Sauf que lockFilePath contient le chemin vers le fichier .lock, et non une indication sur lâexistence de ce fichier. Pas de soucis, on va faire comme notre eventListener et utiliser la fonction php file_exists(). Sauf que non, on ne peut pas lâappeler telle quelle en twig. On va donc devoir crĂ©er une fonction twig qui le fait pour nous :
Et voilĂ , on a recréé la fonction file_exists() pour twig. Et maintenant on prend notre base.html.twig etâŠ
âŠOn aura un beau bandeau de footer nous affichant que le mode maintenance est activĂ©.
No Comment