🆕 WA-Tech&DevNews N°15

🆕 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 🙂

Card hover FX

EC card hover

Steam inspired game card hover effect

3D Card Hover Effect

3D card hover effect

Animated Tab Bar (codepen.io)

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)

Tabbar (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é.

William

Super HĂ©ro du web / CTO Si vous venez dans nos bureaux je vous fais un cafĂ© ☕ et on discute sur Rocket League

Related Posts

[WA Tools] JSON Visio, pour vous aider a visualiser votre json

[WA Tools] JSON Visio, pour vous aider a visualiser votre json

Le Web3 c’est quoi ?

Le Web3 c’est quoi ?

🆕 WA-Tech&DevNews N°21 0 commentaire

🆕 WA-Tech&DevNews N°21

🆕 WA-Tech&DevNews N°20 0 commentaire

🆕 WA-Tech&DevNews N°20

No Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.