Catégorie : Web

Tout ce qui est lié au web dans sa globalité.

Vincent Lecomte
[Dossier] Le format WebP sur WordPress

[Dossier] Le format WebP sur WordPress

Suite à la lecture d’un article du site Cachem, je suis passé au format d’images WebP sur mes deux blogs WordPress. Ce format existe depuis 2010 et est désormais plutôt bien supporté par les navigateurs récents. Quant à Internet Explorer, il est tout simplement incapable d’afficher ces images. L’un des avantages du WebP est qu’on réduit significativement la taille des images, ce qui permet de les charger plus rapidement.

Pour effectuer une transition sans accroc je suis passé par l’extension WebP Express. Celle-ci est très complète et permet notamment de décider quel format d’image afficher en fonction du navigateur. Elle convertit également les images lors de l’upload. Cependant, sa prise en main n’est pas forcément aisée, déjà parce qu’elle n’est pas traduite en français, mais aussi parce qu’elle propose énormément de paramètres.

Réglages

Depuis l’administration de WordPress, rendez vous dans Réglages puis WebP Express.

Mode de fonctionnement

Dans mon cas, j’ai choisi la méthode « Varied image responses » qui me permettra de fournir la bonne image en fonction du navigateur. Comme je n’utilise pas de CDN, et comme je n’ai pas voulu me prendre la tête avec trop d’options à configurer, c’est ce qui semblait être le meilleur choix.

Général

Depuis cette catégorie, il faudra tout d’abord indiquer la portée (paramètre Scope). L’extension peut gérer les thèmes. Dans mon cas j’ai préféré m’en tenir aux images Le seque j’envoie via la médiathèque de WordPress (paramètre « Uploads only« ).

Le second paramètre à définir concerne les types de fichiers sur lesquels l’extension doit travailler. Autant voir grand et choisir à la fois PNG et JPG.

Ensuite il faut déterminer où les images seront stockées. Le mode « Mingled » indique que les images se trouvent dans le même dossier, côte-à-côte. Le paramètre suivant, « File extension« , indique si on utilise le nom du fichier suffixé par « .webp » ou s’il faut utiliser le nom complet et l’extension originale en y rajoutant « .webp ». Par facilité j’ai choisi « Set to .webp » pour avoir des noms d’image parfaitement identiques.

Enfin les options suivantes importent peu. Je les ai donc laissées par défaut. Je n’ai pas défini la politique de cache (celle-ci est gérée par une autre extension sur mon blog).

Règles du fichier .htaccess

L’extension vous propose d’activer les deux premiers modes, mais dans le cas où il resterait des images non converties sur votre blog, la première suffira (à savoir « Enable direct redirection to existing converted images« ).

Si vous n’avez pas l’extension Apache mod_header activée sur votre hébergement, cela pourrait ne pas fonctionner correctement.

Conversion

L’extension propose des paramètres pour gérer la qualité de la conversion des images. Il est même possible de modifier l’ordre des méthodes de conversion en fonction de ce qui est disponible sur votre hébergement.

Dans mon cas j’ai également coché la case « Convert on upload » pour activer la conversion à partir de l’outil d’upload de WordPress. Attention que cela a un impact sur les performances d’envoi, en fonction des miniatures à générer.

Altérer le code HTML

La dernière option permet de modifier le contenu de la page pour l’affichage des images en WebP. L’auteur recommande d’activer l’option en plus de la redirection via .htaccess.

Pour maximiser la compatibilité avec de vieux navigateurs, j’ai coché l’option « Replace image URLs » ainsi que « Only do the replacements in webp enabled browsers« .

Le dernier paramètre modifie le comportement de l’extension lors de la modification du code. La première option, « Use content filtering hooks« , est recommandée d’après la bulle d’aide affichée.

Conclusion

L’extension offre de multiples possibilités pour convertir et gérer vos images au format WebP pour votre site WordPress. Si vous avez des commentaires ou si vous connaissez bien WebP Express, n’hésitez pas à donner vos astuces de configuration pour en améliorer le comportement.

[Astuces] Réaliser une capture d’écran avec Firefox

[Astuces] Réaliser une capture d’écran avec Firefox

Il n’est jamais trop tard pour apprendre de nouvelles astuces, et la preuve, c’est qu’aujourd’hui j’ai découvert que Mozilla Firefox intégrait un outil permettant de réaliser une capture d’écran. Et vous savez la meilleure? Cet outil existe depuis la version 78 du navigateur. J’arrive un peu tard pour faire croire à une exclusivité.

réaliser capture d'écran Firefox

Pour accéder à cette fonctionnalité, il vous suffit d’effectuer un clic droit dans une zone de la page puis de choisir l’entrée « Effectuer une capture d’écran » dans le menu contextuel.

réaliser capture d'écran Firefox: menu contextuel

Il existe aussi un raccourci clavier : Ctrl + MAJ + S.

La page s’assombrit alors et l’outil vous propose de sélectionner une image, un élément de la page, ou bien de réaliser vous-même le tracé de la zone que vous souhaitez capturer. Lors de la sélection, le défilement sera automatique, ce qui signifie que vous pouvez réaliser une capture d’écran aussi haute que vous le désirez.

Deux autres options s’offrent à vous : capturer la page complète ou capturer la zone visible.

réaliser capture d'écran Firefox: zone

Une fois la sélection validée vous pourrez ensuite sauvegarder l’image sur votre PC ou directement la copier dans le presse-papiers.

Autre petite astuce au passage: vous pouvez aussi ajouter un bouton de raccourci vers la fonctionnalité Firefox Screenshots à la barre d’outils du navigateur. Pour cela, consultez la base de connaissances.

Les alternatives

Les systèmes d’exploitation récents intègrent généralement un outil de capture d’écran. C’est le cas de Windows avec son outil Capture d’écran et croquis. Quant au navigateur Microsoft Edge il propose lui aussi un outil de capture d’écran.

En guise d’alternative vous pouvez également utiliser le très bon utilitaire Greenshot. Même si la dernière version date d’août 2017, elle propose de nombreuses fonctionnalités d’intégration avec divers logiciels, mais aussi un outil d’édition des captures pour surligner, ajouter du texte, etc.

Sources

[Astuces] Réduire la taille des éléments de l’interface Proton dans Mozilla Firefox 89

[Astuces] Réduire la taille des éléments de l’interface Proton dans Mozilla Firefox 89

Il y a seulement trois jours, mardi 1er juin 2021, Mozilla déployait la version 89 de son navigateur Firefox avec la nouvelle interface: Proton.

Firefox 89 est disponible et inaugure Proton, sa nouvelle interface
– Par Geoffroy Ondet, 01net, 1 juin 2021

Comme plusieurs autres utilisateurs, j’ai cherché à savoir s’il était possible de réduire la taille des éléments de l’interface, dont la hauteur de la barre d’onglets. La réponse est « Oui » et l’astuce a notamment été proposée par quelqu’un sur Reddit.

taille interface Firefox

Actuellement il n’existe pas d’option à modifier dans les paramètres pour faire cela. Il faut donc aller bidouiller dans les variables. On accède à celles-ci en tapant about:config dans la barre d’adresses. Une fois l’avertissement lu et accepté, saisissez dans la recherche le mot-clé browser.uidensity.

taille interface Firefox paramètres avancés

Il existe plusieurs valeurs:

  • 0 : c’est la valeur par défaut pour la nouvelle interface. Par défaut on a donc une barre d’onglets qui permet d’afficher du texte sur deux lignes (par exemple, quand de l’audio est joué dans un onglet, cela affiche la mention « Lecture en cours » sous le nom de la page) ;
  • 1 : cette valeur permet de revenir à une interface plus compacte (voir ci-dessus), d’une taille quasiment identique aux versions précédentes de Firefox. Quand un onglet produit du son, on retrouve l’icône en forme de haut-parleur, comme avant ;
  • 2 : permet également l’affichage sur deux lignes dans les onglets, mais agrandit l’interface par rapport à la valeur par défaut.

Bravo, vous savez désormais comment modifier la taille de l’interface Proton dans Firefox !

A lire également…

[Firefox] Réafficher le message d’avertissement lorsqu’on ferme plusieurs onglets

Cette astuce concerne Firefox 4.0+. Il se pourrait que vous ayez coché la case qui propose de ne plus poser de question lors de la fermeture de plusieurs onglets. Cela est encore plus contrariant si Firefox restaure la session précédente lors de son redémarrage. Comment faire alors pour réinitialiser tous les paramètres ? Restaurer le […]

0 commentaire

Sources

[WordPress] L’extension Ninja Forms également touchée par plusieurs failles de sécurité

[WordPress] L’extension Ninja Forms également touchée par plusieurs failles de sécurité

L’un des avantages de WordPress, c’est la possibilité d’installer des extensions pour en étendre les fonctionnalités. En 2019 on en comptait plus de 55.000 rien que dans le dépôt officiel. Et parmi celles-ci la populaire extension Ninja Forms fait parler d’elle. En effet c’est via Clubic que nous apprenons qu’elle est touchée par plusieurs failles de sécurité.

wordpress ninja forms failles

Pour ceux qui ne connaissent pas cette extension, Ninja Forms est en fait un gestionnaire de formulaires pour vos sites (exemple basique : pour créer facilement une page de contact pour vos visiteurs). D’après la page descriptive, il y aurait plus d’un million d’installations actives.

Les failles découvertes sont au nombre de quatre, et sont très bien détaillées par le site Threatpost. La première permettrait d’intercepter le trafic des e-mails envoyés via SendWP. Cela fait repenser au bug qui avait été découvert dans l’extension Easy WP SMTP Settings. Nous en parlions il y a quelques semaines. Le score CVSS de cette vulnérabilité est de 9.9 sur 10.

Ensuite deux failles concernent l’outil de gestion des modules complémentaires, intégré à Ninja Forms. L’une d’entre elle permettrait de mettre fin à une connexion autorisée via OAuth. Enfin, la dernière faille – considérée comme moyennement grave avec un score CVSS de 4,8 – permettrait de rediriger aisément un utilisateur vers une URL malveillante après sa connexion.

Un correctif rapide

Heureusement tous ces problèmes seraient résolus depuis la version 3.4.34.1 publiée le 8 février 2021. Depuis l’extension a reçu d’autres mises à jour. Les statistiques nous montrent qu’actuellement 64,2 % des versions actives sont en 3.4 (sans spécifier le numéro précis). 13% d’entre elles sont en version 3.2 ou inférieur. Cela fait donc potentiellement un paquet de sites vulnérables.

Si vous utilisez WordPress et en particulier Ninja Forms, vérifiez vite les mises à jour, sauf si vous avez activé l’automatisation de celles-ci pour vos extensions (ce qui peut être utile dans ce cas précis). De manière générale il est bon de rappeler de faire attention à ce que vous installez. Par exemple, une extension ou un thème dont le développement n’est plus suivi, pourrait être problématique.

Sources

[WordPress] Découverte d’une faille dans l’extension Easy WP SMTP Settings

[WordPress] Découverte d’une faille dans l’extension Easy WP SMTP Settings

WordPress est un CMS – Content Management System, ou « Système de gestion de contenu » en français – largement utilisé sur de nombreux sites. Il offre notamment aux utilisateurs la possibilité d’installer des extensions développées par des tiers. Celles-ci ne sont pas toujours sans défaut. C’est en tout cas ce qu’a démontré la découverte d’une faille dans l’extension Easy WP SMTP Settings, heureusement déjà corrigée.

faille plugin smtp

Comme son nom le suggère, l’extension permet aux propriétaires de leur site de configurer les paramètres pour l’envoi d’e-mail. Cela concerne notamment ceux envoyés par WordPress. Par exemple, quand un utilisateur veut réinitialiser son mot de passe, un lien est généré puis transmis à l’utilisateur par e-mail.

C’est malheureusement à cause de ceux-ci que des personnes mal intentionnées ont été capables d’intercepter les liens et réinitialiser les mots de passe de comptes. En effet, dans la version 1.4.2 (et inférieures) le dossier de l’extension ne contient pas de page « index.html » ou similaire. Cela a pour conséquence de permettre l’affichage du contenu du dossier si la fonctionnalité est active sur le serveur.

Il est ainsi possible d’accéder à un fichier journal, qui contient toutes les traces d’envoi des mails. Il reprend évidemment le contenu de ceux-ci. Ainsi il ne reste plus qu’à récupérer les liens de réinitialisation… et le tour est joué !

L’auteur de l’extension a d’ores et déjà corrigé le problème dans la version 1.4.4 d’après les notes de version. On soulignera cependant que le nombre d’installations actives est de plus de 500.000. Si vous consultez la vue avancée sur la page de description de l’extension, vous pourrez constater que 43% de versions actives sont en 1.3, ce qui est relativement inquiétant. Cela signifie que de nombreux sites sont encore vulnérables aux attaques.

Si vous utilisez donc cette extension sur votre site, procédez rapidement à sa mise à jour!

Sources

[Web] Partage de fichiers avec Send

[Web] Partage de fichiers avec Send

Mozilla s’essaie au partage de fichiers, avec Send. Cette plateforme vous permet d’envoyer des fichiers à vos contacts, de manière sécurisée. Chaque lien généré expirera après 24h ou un téléchargement et le fichier ne laissera aucune trace physique sur les serveurs.

L’utilisation du service ne nécessite l’installation d’aucun module. Pour s’assurer que l’envoi aboutit il est recommandé de partager des fichiers pesant de moins d’1 Go.

Pour essayer c’est par ici.

[Divers] Proximus et la neutralité du net

[Divers] Proximus et la neutralité du net

Sur le forum ADSL-BC, la discussion à propos des nouveaux quotas Proximus a soulevé un point important concernant la neutralité du net. On y apprend que le fournisseur travaille sur une banderole qui apparaitra chez chaque utilisateur dépassant son volume mensuel. Celle-ci est toujours en test mais la grande question est : quelle technique le FAI utilise-t-il pour la mettre en place si ce n’est en modifiant le contenu des pages lors de la transmission des données en HTTP ?

L’un des principes fondamentaux de cette neutralité est que le fournisseur ne devrait jamais altérer le contenu transmis à l’utilisateur, d’après Benjamin Bayart. Quelques utilisateurs se penchent actuellement sur la question ; l’un d’entre eux aurait vu du code lié à cette banderole, ajouté à la fin de la balise « body » de chaque page renvoyée. Mais cela reste à confirmer…

Quid du respect de la vie privée, malgré cette bonne intention ? En attendant d’en savoir plus, un blogueur a ouvert le débat sur son blog : netsh. Espérons que Proximus amène des réponses supplémentaires pour mettre tout ça au clair.

Edit du 9/6 : Proximus répond en commentaires sur NetSH

Contenu du commentaire :

Cher Client,

C’est avec étonnement que Proximus a pris connaissance de votre article intitulé ‘Proximus viole-t-il la neutralité du net ?’ publié sur votre blog et différents média sociaux (notamment Twitter) le 25 mai 2016.

Dans cet article vous reprochez à Proximus d’informer ses clients, via un message pop-up, qu’ils ont presque épuisé leur volume internet fixe mensuel. Selon vous, par l’envoi d’un tel pop-up Proximus se rendrait coupable d’une altération du contenu des données transmises via internet, ce qui serait en infraction avec les règles de Net Neutralité. Pour soutenir votre thèse vous renvoyez vers 4 principes que vous avez trouvés sur Wikipédia.

Pour votre information, en matière de Net Neutralité, les fournisseurs d’accès à internet (FAI) sont soumis au respect d’un Règlement européen entré en vigueur le 30 avril 2016. Ce texte est la seule référence juridique valable en matière de Net Neutralité et détermine les règles destinées à garantir le traitement égal et non discriminatoire du trafic internet.

Le message pop-up que nous envoyons à nos clients n’a d’autre objectif que de les informer préventivement qu’ils ont atteint ou presque atteint les limites de leur volume de données. Le seul et unique élément qui détermine donc l’envoi dudit message est le volume consommé. Ces messages sont envoyés de manière automatique. Proximus les informe également des conséquences éventuelles sur leur vitesse de surf et renvoie enfin vers les différentes options disponibles pour l’activation de volumes supplémentaires. Ce message pop-up vient se superposer à la page internet consultée sans en altérer le contenu de la communication et n’enfreint dès lors aucune des règles reprises dans le Règlement européen.

Proximus souhaite informer ces clients de manière appropriée sur leur consommation internet, en sus du pop-up, un e-mail et un SMS sont également envoyés lorsque vous vous approchez du dépassement du volume Internet fixe compris dans votre service internet. Une notification vocale vous est également délivrée lorsque vous appelez notre service à la clientèle. La possibilité vous y est donnée d’activer une extension de volume. Nos extensions de volume peuvent être activées gratuitement par les clients disposant d’un service illimité.

Si nous devions procéder comme vous suggérez de le faire, à savoir, en mettant uniquement des messages sur nos propres sites ou sur des sites spécifiques, nous ne serions plus en mesure d’avertir en direct nos clients quant à l’état de leur consommation de données et ils risqueraient donc d’être mis devant le fait accompli et de voir par exemple leur vitesse de surf se réduire sans avoir reçu le moindre avertissement préalable. Une telle approche ne correspondrait pas au service que nous voulons rendre à nos clients.

Enfin, lorsque nos clients atteignent leur volume de trafic, ils peuvent alors voir leur vitesse de surf se réduire mais, contrairement à ce que vous semblez suggérer, ils continueront toujours à disposer d’un accès complet et ouvert à internet.

Nous espérons, de cette manière, avoir levé vos appréhensions quant au bon respect des règles de la Net Neutralité par nos services.

Cordialement,

L’équipe Proximus 

Contenu de l’édition par l’auteur de NetSH :

Edit du 8/6/2016 – Proximus répond en commentaires :Proximus a pris le temps de répondre à mon article dans les commentaires. Voici donc mon retour sur celle-ci (vous pouvez la trouver dans les commentaires).Après lecture de leur message, ceux-ci semblent s’appuyer sur les lois européennes en matière de « Net Neutrality » qui semble légèrement différent de la version de benjamin B. Après quelques recherches supplémentaires, je suis donc tombé sur une version résumé du dit texte sur le site de l’UE.https://ec.europa.eu/digital-single-market/en/eu-actions-net-neutralityAprès analyse, on se rend compte que le texte fait mention de l’équité du trafic et de blocages comme en fait mention Proximus dans sa réponse. D’un point de vue Europe, il est donc claire que Proximus ne viole pas la neutralité du netDans ce cas, pourquoi ne pas simplement proposer au client de désactiver cette option via les e-services ou simplement en cliquant sur le dit popup (ne plus jamais m’afficher ce message avec un message de confirmation).Il y a quelques années Proximus à fait de même avec une autre option permettant la fermeture de certains ports en entrant bloqué de base. On serait aussi en droit de se poser la question du réseau neutre, mais on se rend compte que Proximus à laissé le choix aux utilisateurs. Ce qui à mon sens reste une très bonne option entre l’accès internet complet et la protection de ses utilisateurs (dans ce cas–là, le blocage était une réaction utile pour protéger ses clients).Pourquoi ne pas faire de même ici (c’est peut-être déjà le cas) ? Au-delà du principe de neutralité, celui qui ne souhaite pas reprendre de Volume Pack et se contente de ses 1 à 3Mbps pour surfer n’en serait que moins dérangé.Dernière précision technique concernant la réponse de Proximus suivante :   

Ce message pop-up vient se superposer à la page internet consultée sans en altérer le contenu de la communication et n’enfreint dès lors aucune des règles reprises dans le Règlement européen. Même si Proximus ne modifie pas le « contenu » au sens « visible » du terme, vous modifiez le code HTML de la page courante.D’un point de vue technique, la notion de contenu englobe le tout (le contenu technique tout comme le contenu visible dans le navigateur). Si on prend un paquet de données avant et après la plateforme qui ajoute le message, il n’est pas identique. C’est sur ce point que j’insiste même si purement visuellement parlant, Proximus ne modifie pas le contenu et ajoute son message.  

Enfin, je tenais à remercier Proximus pour avoir pris le temps de répondre de manière complète et l’Europe pour avoir fait passé une loi sur la neutralité du net (empêchant les dérives évoquées aux USA)

[Web] Qwant

[Web] Qwant

En voilà un drôle de nom. Qwant, c’est un moteur de recherche français lancé en 2013. Il affiche un design épuré, très moderne, avec des caractères de grande taille pour faciliter la lecture. Son interface s’adapte également pour fonctionner sur les tablettes et smartphones. Son objectif : respecter la vie privée des utilisateurs lorsqu’ils effectuent des recherches.

En cas d’inscription, Qwant collecte quelques données comme le nom et le prénom, ainsi que l’adresse e-mail. Ils assurent sur leur page de questions/réponses qu’aucune donnée n’est divulguée ou vendue à des tiers. Vous avez également un droit à l’oubli en faisant déréférencer une page associée à vos nom et prénom, ainsi qu’un droit de suppression de vos données sur le site.

L’une des particularités de Qwant, c’est son affichage des résultats sur 3 colonnes distinctes. On retrouve donc les pages internet, les actualités et les réseaux sociaux (par exemple, des tweets). Par défaut, le moteur ne filtre pas le contenu choquant, ainsi il n’est pas impossible de retrouver des images ou des sites à caractère pornographique. Si vous souhaitez éviter cela au maximum pour vos enfants, sachez qu’il existe une version « Junior » de Qwant.

Le site dispose aussi d’une recherche d’images, de vidéos ou bien d’articles disponibles à l’achat (section « Shopping »). Oui, je me suis amusé à rechercher des chats… c’est encore ce qu’il y a de plus cool sur le web !Les Numériques a réalisé un article très intéressant il y a quelques jours. Ils soulignent le fait que les résultats obtenus sont souvent similaires à ceux présentés par Bing ou Yahoo. Ils indiquent également que « selon l’outil de mesure SimilarWeb.com, elle (la fréquentation) est passée de 4,45 à 8 millions de visiteurs uniques entre les mois de juillet et décembre 2015. »

Qwant est donc un moteur de recherche à suivre de très près, car il a clairement sa place parmi les meilleurs, et présente une interface assez claire et agréable visuellement parlant. Depuis peu, une interface plus légère a été lancée ; celle-ci est baptisée « Qwant Lite ». Pour y accéder, suivez le lien ci-contre : lite.qwant.com. Son autre avantage : l’anonymat des recherches. A l’heure actuelle, le respect de la vie privée est très régulièrement remis en question. On peut comprendre l’inquiétude des gens et le fait qu’ils veuillent des alternatives comme celle-ci.

[Web] La recherche Google pour les nuls

[Web] La recherche Google pour les nuls

Vous utilisez le moteur de recherche Google tous les jours mais vous n’en connaissez peut-être pas tous les secrets. En effet, il existe plusieurs opérateurs, signes de ponctuation et symboles pour affiner les résultats obtenus.

  • abc OR def = Effectue une recherche de type « ou » (ici, « abc » ou « def »).
  • site:amazon.fr  = Recherche sur un site spécifique (ici : amazon.fr).
  • related:lemonde.fr = Affiche les pages liées à un site.
  • cache:amazon.fr = Permet de consulter une page telle qu’elle s’affichait lors de la dernière indexation par le moteur de recherche. NB : dans Firefox il suffit de saisir directement dans la barre d’adresses.

Il existe aussi des signes et symboles. Par exemple : #sujet, recherche toutes les pages répondant au hashtag spécifié. Le signe « – » permet d’exclure un terme (ou un site) des résultats. Les guillemets autour d’un mot ou d’une expression font en sorte que les résultats n’incluent que les pages où ces mots s’affichent dans le même ordre (ex : « imagine the people » pour rechercher la phrase complète).

Pour en savoir plus, consultez l’ aide en ligne. Vous pouvez aussi utiliser la recherche avancée qui propose de filtrer par langue, dernière mise à jour, d’activer/désactiver SafeSearch, de choisir des formats de fichier (ex : PDF).

[Web] Facebook écarte Flash pour les vidéos

[Web] Facebook écarte Flash pour les vidéos

Le plugin Flash, très critiqué par de nombreux utilisateurs et développeurs, ne sera plus utilisé sur la plateforme Facebook pour lire des vidéos hébergées sur le site. Le lecteur, qui est sollicité dans de nombreux cas (dans le flux d’actualités, dans le journal, etc) se base désormais sur le HTML5. Bien sûr cela s’appliquera aux navigateurs qui supportent la technologie en question. C’est le cas de toutes les versions récentes de Firefox, Internet Explorer, Edge, Opéra, etc.

Un bon point pour le réseau social puisque cela permet notamment aux pages de se charger plus rapidement qu’avant. C’est aussi l’occasion pour la firme de tirer profit des outils d’accessibilité fournis par HTML5 pour, à terme, aider les utilisateurs souffrant de déficience visuelle.

Sources

Les Numériques.