Comparatif de librairie JS pour faire du cropping

Qu’est-ce que le cropping ?

La traduction française vous parlera surement plus, il s’agit du recadrage d’une image.
Lorsque sur Facebook, ou Twitter, vous changez votre photo de profil, vous avez la possibilité de la recardrer vous même en zoomant, et en déplaçant votre photo dans la zone.
Fonctionnalité vraiment utile à l’utilisateur ! Sur les anciens sites web, on avait une préconisation. “Votre photo de profil doit être en JPG et faire 80x80”. Ce qui était clairement pénible car il fallait forcément passer par un logiciel de retouche d’image. Avec l’arrivé des smartphones, le cropping sur l’interface web est devenu une nécessité !

Les librairies javascript

Après une recherche sur Google sur les mots clés cropping javascript, plusieurs choix se sont offerts à moi.

Cropper.js

Avec la basline javascript image cropper, on a frappé à la bonne porte.
La démo est propre. Ce qui est intéressant, c’est que lorsque l’on regarde dans le debuggeur, nous n’avons pas de requête serveur d’executé. Notre photo reste sur notre poste et est manipulée uniquement via Javascript.
Lorsque l’on regarde leur “Photo editor” qui est un exemple avancé de Cropper.js, on voit que l’on est capable de télécharger la photo après recadrage. Dans une utilisation comme Facebook ou Twitter, il suffirait de développer une fonctionnalité permettant l’envoi de cette image vers notre serveur.
Sur “Photo Editor” j’ai été séduit par la simplicité d’utilisation et l’ergonomie mis en place. Le zoom sur la souris, c’est pas grand chose, mais c’est très efficace !

Croppic

Ah, celui-ci a l’air d’être simple à prendre en main ! Oui, mais…
Lorsque j’ai testé avec une photo, cette dernière a été envoyé sur leur serveur avant d’être afficher pour recadrage. Vu que la photo faisait 5Mo, et que ma bande passante est faible en cette période de noël, j’ai dû attendre plusieurs dizaine de seconde. Après cette attente, oh tristesse, le zoom sur la souris ne fonctionne pas.
Dans mon cas d’utilisation, cet outil ne convient pas vraiment. Je souhaite stocker sur mon serveur uniquement l’image recadrée afin de ne pas soliciter inutilement bande passante et espace disque.
Next ?

Best jQuery Image Crop Plugins & Tutorials with Demo sur Jquery Rain

Avec un titre accrocheur comme cela, peut être que j’allais enfin y trouver mon bonheur !
Sur le deuxième lien, le coup de coeur ! Slim Image Cropper. Il répond parfaitement à mon besoin… Mais il n’est pas gratuit ! Compter 15$.
Par contre, il est très bien pensé, le traitement est effectué côté javascript, puis envoyé au serveur après le traitement.
Croopie.js semble vraiment pas mal et simple d’utilisation. Je vais tenter de l’implémenter en utilisant une image uploadé en javascript. Je ferais un billet pour vous raconter cette expérience !

Ajouter meta description et contenu sur vos pages tags sur Hexo

En SEO, il est important de rendre chaque page unique. Par défaut, Hexo met sur ses pages “/tags/“ la description globale de votre blog. Ce qui n’est pas top d’un point de vue référencement naturel. Voyons ensemble dans ce billet comment parer à ce problème et améliorer ainsi notre positionnement google.

Sur Hexo, nous avons la posibilité de définir des variables dans le fichier _config.yml. Ceci est parfait pour y stocker les descriptions de nos tags !
Ajoutez dans votre fichier _config.yml les lignes suivantes :

1
2
3
4
5
tags:
VOTRE_TAG:
description:
keywords:
content:

Vous devez impérativement définir tout les tags que vous utilisez sur votre blog.
Vous ne devez pas suivre le code qui suit à la lettre car cela dépend du thème Hexo que vous utilisez. Pour ma part, j’ai choisi la sobriété avec le thème “light” :)

/themes/light/layout/_partial/head.ejs
J’ai remplacé le code suivant

1
<% if (page.description){ %>

par
1
2
3
4
<% if (page.tag){ %>
<meta name="description" content="<%= config['tags'][page.tag]['description'] %>">
<meta name="keywords" content="<%= config['tags'][page.tag]['keywords'] %>">
<% } else if (page.description){ %>

Si la page concerne une liste d’artices par tag, alors j’utilise le fichier de configuration pour afficher les bonnes métas.
Et pour finir, pour rajouter un peu de contenu à page, je modifie le fichier .ejs permettant de mettre en page les rubriques par tag.

/themes/light/layout/_partial/archive.ejs

1
2
3
4
<% if (page.tag){ %>
<p><%= config['tags'][page.tag]['content'] %></p>
<br />
<% } %>

Et le tour est joué !
Votre blog Hexo est un peu plus optimisé pour le SEO !

Le user-agent libwww-perl n'est pas votre ami !

Dans l’univers impitoyable d’Internet, des robots sondent les vulnérabilités des sites internets dans le but de prendre la main sur votre serveur et d’y placer une backdoor.
De cette manière, les hackers pourront utiliser votre serveur pour faire des attaques DDos sur d’autres sites internet ( sans compter le vol éventuel de vos données ! ).
Se protéger totalement de ce type d’attaque est impossible, mais vous pouvez mettre en place des outils permettant de dissuader le hacker de passer du temps sur votre cas.
Il est difficile de se protéger d’un cambriolage, mais si vous fermez votre maison à clé vous éliminez d’office un certain pourcentage d’intrusion. Plus vous ajouterez de couche de protection ( alarme, porte blindée… ), moins vous aurez la malchance d’être cambriolé.
Bref, revenons à notre cher user-agent libwww-perl.

Pour commencer, rendez-vous dans les logs de votre serveur web. /var/log/nginx et lancez la commande suivante :

1
grep 'libwww-perl' access.log

Si comme moi, votre site est en ligne depuis un petit moment, vous contasterez peut être des enregistrements bizarres.

1
IP - - [29/Jan/2016:03:52:10 +0100] "GET /wp/xmlrpc.php HTTP/1.1" 404 168 "-" "libwww-perl/6.15"

Quelqu’un a tenté d’accéder au fichier /wp/xmlrpc.php. Par chance, je n’utilise pas wordpress donc il a reçu une 404 en réponse.
En effectuant une petite recherche sur Google, je découvre que le fichier xmlrpr.php contient une faille permettant de faire une attaque par force brute… Oh joie !

Selon les retours d’expériences, fermer la porte pour cette librairie Perl réduirait entre 50% et 80% des menaces.

Sur nginx il vous suffit de rajouter ces quelques lignes sur la configuration de votre vhost.

1
2
3
if ($http_user_agent ~ "libwww-perl") {
return 403;
}

Je vous conseille d’utiliser cette configuration sur votre vhost pour gagner en sécurité !

Une solution plus durable et sérieuse ( que je ne détaillerais pas dans cet article ), consiterait à isoler votre serveur web ( avec PHP et SQL ) au sein de votre serveur. De cette manière, même si la personne mal attentionée parvenait à s’introduire chez vous, vous limiteriez son impact sur votre serveur.

Rediriger l'adresse IP de votre serveur vers votre nom de domaine sur Nginx

Vous le savez sûrement mais Google fait la guerre au contenu dupliqué. Autrement dit, une adresse doit accéder à une information.
“Mais un IP n’est pas une adresse ? Je n’ai jamais vu de site internet indexé par leur IP sur Google ?!”
Lorsque l’on référence son site internet, on le fait sur le nom de domaine. C’est quand même plus simple à retenir qu’une adresse IP !
Malheuresement, si quelqu’un cherchant à vous nuire découvre cela, il peut référencer votre IP sur les moteurs de recherche, et ainsi vous faire tomber dans le piège du “Duplicate Content”.

Pour éviter cela, c’est très simple. Il suffit de faire une redirection 301 de l’IP vers votre nom de domaine.
Editez votre conf en y ajoutant les lignes suivantes :

1
2
3
4
5
server {
listen 80;
server_name ADRESSE_IP;
return 301 http://VOTRE.DOMAINE
}

Ensuite, faites un reload de votre serveur nginx

1
service nginx reload

Pour vérifier que cela a bien fonctionné, tapez l’IP de votre serveur dans la barre d’adresse de Google, vous devriez être redirigé sur votre nom de domaine !

Désactiver la signature serveur sur Nginx

En production, si vous ne désactivez pas la signature serveur, une personne mal attentionnée peut rapidement savoir quel serveur web vous utilisez et même connaitre sa version.
Avec ces informations, le hacker gagne du temps pour cibler son attaque.

Comment désactiver la signature serveur ?
Sur nginx, c’est très simple. Rendez-vous dans le fichier /etc/nginx/nginx.conf et décommentez la ligne suivante :

1
server_tokens off

Ensuite, faites un reload de votre serveur nginx

1
service nginx reload

Et ça y est ! Votre signature n’est plus lisible ! Un petit pas supplémentaire vers la sécurité web !