Héberger un WordPress : sécurité, optimisation, économie d’énergie

WordPress occupe une part très importante dans l’usage des CMS à l’heure ou j’écris ce billet (62%). Voilà ce qui peut l’expliquer à mon sens :

  • Simple d’utilisation côté utilisateur
  • Plutôt simple côté développeur
  • Un nombre incalculable de thèmes et de plugins sont à disposition (communauté conséquente).

Mais il a aussi les défaut de ses qualités :

  • Côté utilisation de ressources énergétiques (serveur), WordPress est une catastrophe… Surtout dès qu’on lui ajoute des plugins (qui n’en ajoute pas ?).
  • Côté sécurité, il est très attaqué (car très utilisé). Le sport préféré des hackers, c’est le brute force…

Je vais tâcher de balayer ici mes trucs pour transformer un wordpress énergivore en wordpress sobre et sécurisé 🙂

Transformer en site statique (parfait pour les sites vitrines)

Un site « statique » c’est quoi ? C’est un site ou le code est uniquement exécuté sur le client et le serveur ne fait rien d’autre que « servir la page ». Alors qu’un site dynamique par opposition (sous wordpress pour l’exemple) va générer des pages « à la volée » et donc utiliser des ressources sur le serveur.

Mon parti-pris, c’est de convertir le wordpress « visible pour les visiteurs » en site statique « html ». L’utilisateur continue d’utiliser / d’alimenter son site via l’interface (bien faite et connue) wordpress, mais le visiteur lui ce qu’il voit c’est un site « html », sans aucun code dynamique (php ici) exécuté. De cette façon :

  • Le site est inattaquable par les hackers/spameurs, il n’y a plus de code dynamique, donc plus de moyen de corrompre le site / le serveur
  • L’affichage pour le visiteur est beaucoup plus rapide.
  • Le serveur consomme beaucoup moins de ressources (moins d’électricité, plus petit serveur…).
  • Les utilisateurs qui connaissent déjà wordpress ne sont pas bouleversés / impactés par cette optimisation.

Pour cela j’utilise un plugin wordpress qui s’appelle wp2static. Voici la structure du répertoire « web » qui est la racine du site :

  • /wp/ : site wordpress avec le plugin wp2static. Adresse utilisée par l’administrateur du site pour faire ces modifications
  • /static/ : le site statique généré par le plugin
  • /.htaccess : contient les redirections pour que le visiteur ne voit pas de différence

Dans le wordpress installé dans /wp/ rendez -vous dans wp2statics et configuré :

  • Where will you host the optimized version of your site? : Subdirectory
  • Destination URL : http://votresite.fr/
  • Target Directory : /var/www/votreiste.fr/web/static/

Puis dans l’onglet Crawling indiqué :

  • Exclude certain URLs :
    • /wp/
    • /wp-content/uploads/
    • /wp-admin/

Quand c’est fait, vous pouvez cliquer sur Start Static Export.

Ajouter dans votre configuration apache ou dans un .htaccess à la racine du site :

RewriteEngine on
# Pas de ré-écriture pour le contenu uploadé (images, 
RewriteRule ^/wp-content/uploads/(.*)$          /wp/wp-content/uploads//$1 [L]
# Rediriger toutes les requêtes vers /static sauf quand l'accès est souhaité sur le site wordpress original (/wp)
RewriteCond %{REQUEST_URI} !^/wp/ 
RewriteRule ^(.*)$          /static/$1 [L]

Inconvénient majeur de ce type de « transformation » en site full static

  • A chaque modification l’utilisateur doit penser à re-générer le site statique
  • Le contenu dynamique (formulaire de contact / commentaire) est impossible :
    • Pour les commentaires, c’est possible avec des commentaires chargés en Javascript, typiquement HashOver Next (alternative auto-hébergable à DISQUS). J’ai fait un script de migration WordPress > HashOver : wp2hashover
    • Pour les commentaires, il est possible d’utiliser des formulaires en iframe ou formulaire javascript/ajax

Transformer en (presque) site statique (W3 Total Cache)

La solution wp2static n’était pas complètement satisfaisante et j’ai continué mes recherches. En testant le plugin W3 Total Cache, je me suis aperçu qu’il faisait exactement ce que je cherchais à faire et même plus !

Après paramétrage, j’ai trouvé ceci dans le fichier .htaccess :

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
[...]
    RewriteCond %{REQUEST_METHOD} !=POST
[...]
    RewriteCond "%{DOCUMENT_ROOT}/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_SSL}%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" -f
    RewriteRule .* "/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_SSL}%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" [L]
</IfModule>

Pour résumer, ce que font les règles c’est :

  • Si la page HTML static a été générée (le fichier existe) dans /var/www/decroissant-au-beurre.com/web/wp-content/cache/page_enhanced/decroissant-au-beurre.com/services/_index_ssl.html (pour l’appel à https://decroissant-au-beurre.com/services/ alors on l’appelle directement (pas d’exécution de code PHP… ) SINON on appelle la page « normale » dans wordpress et celui-ci génère la page de cache /static pour le prochain visiteur
  • Dès qu’il y a une requête POST, le cache n’est pas appelé. Donc tous les formulaires restent compatibles avec le cache et seules les pages de résultats ne seront pas tirées du cache.

Ca veut dire qu’a performance égale avec la solution précédente, ce plugin fait mieux car il gomme les défauts précédents et permet de continuer d’utiliser des formulaires/les commentaires.

C’est parfait ! Le cache peut aussi être stocké via memcache et non sur disque (ce qui rend l’accès / l’affichage encore plus rapide (d’autres technologies possibles : APC / Xcache…)

Les fonctionnalités supplémentaires :

Minifier : diminuer trafic réseau

W3 Total Cache propose une fonctionnalité de Minification

minifier signifie réduire la taille du code. C’est un processus très utilisé en programmation web pour réduire la taille d’un programme à télécharger depuis un serveur et ainsi réduire l’encombrement du réseau. Cela peut aussi être considéré comme une forme d’offuscation du code.

Pour cela on supprime tous les commentaires et les espaces qui ne gêneront pas le bon fonctionnement de l’application. On remplace aussi le nom des variables interne à l’application pour les réduire à un seul ou deux caractères. Il est aussi possible d’utiliser certaines écritures compactes propres aux langages (couleur en hexadécimal, raccourcis…)

https://fr.wikipedia.org/wiki/Minification

Si on analyse le code après avoir activé la Minification on observe :

<!DOCTYPE html><html lang=fr-FR><head><script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent([...]

Alors qu’un site non-minifié donne plutôt :

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
<link rel="stylesheet" id="extend-builder-css-css" href="assets/static/css/theme.css" type="text/css" media="all">
<style id="extend-builder-css-inline-css" type="text/css">
/* page css */
/* part css : theme */

.h-y-container > *:not(:last-child), .h-x-

Vous pouvez minifier tout ou partie du code (HTML/ CSS / Javascript…). Certains plugins peuvent ne plus fonctionner à cause de la minification. Il est donc important de tester votre site après avoir activé ces options.

Lazy Loading : Afficher les images au besoin

Si vous avez un site très long, il est possible que des images soient présentes en bas de page. Il est pertinent de ne charger ces pages qu’au besoin (que si vous allez jusqu’en bas de la page). Et bien la fonction Lazy Loading permet cela.

Cette fonctionnalité permet aussi un gain non négligeable de bande passante.

Mise en cache navigateur

Vous pouvez améliorer les entêtes navigateurs en spécifiant à celui-ci des dates d’expiration de fichier. De cette façon il ne va pas retourner charger la/les pages sur le serveur en cas de nouvelles visites.

Mesures performance

Voilà un stress test (envoi de requêtes massives) du même site avec ou sans génération en site statique (fait avec W3 total cache ici) :

On constate que c’est 20 fois plus rapide à l’affichage et que c’est plutôt constant. Est-ce que c’est 20 fois moins énergivore ? ça c’est difficile à mesurer mais c’est forcément moins…

Voici ci-après le poids de chargement d’une même page sans optimisation et avec Lazy Loading + Minification

  • Sans optimisation : 21,5Mo
  • Avec Minification et Lazy : 3,9Mo

Soit 5,5 fois moins lourd…

Sécurité

Le minimum pour sécuriser un wordpress c’est :

  • Faire les mises à jour (de nombreux plugins existent pour automatiser cela)
  • Ne pas utiliser « admin » en nom d’utilisateur admin
  • Avoir des mots de passe forts
  • Bloquer les tentatives de brutes forces :

WordPress se fait pas mal attaquer du fait qu’il soit populaire. La principale attaque (hors SPAM sur les commentaires) est faite par brute-force sur la page wp-login.php et xmlrpc. J’ai consacré un article dédié pour intégrer les logs de WordPress dans Fail2ban, et ainsi pouvoir bloquer les tentatives au niveau firewall : WordPress & fail2ban : stopper la brute-force « POST /wp-login.php » (uniquement possible sur un hébergement dédié). C’est particulièrement efficace comme vous pouvez le voir sur ce graphique :

Graphique fail2ban sur 1 semaine

Gestion serveur mutualisé

Si vous gérez un serveur mutualisé, vous pouvez déployer le plugin de cache et faire les mise à jour de tous les wordpress installé sur votre serveur avec wp-cli-isp (taillé pour les serveurs sous ISPconfig, mais c’est adaptable)

WordPress & fail2ban : stopper la brute-force « POST /wp-login.php »

Edit : azerttyu, dans son commentaire signale une solution plus propre (bien que celle-ci fonctionne)

WordPress étant très populaire il est (malheureusement) de fait très attaqué.. La principale (hors SPAM sur les commentaires) est faite par brute-force sur la page wp-login.php. Je l’avais déjà remarqué, mais j’ai récement eu des problèmes d’indisponibilités suite à plusieurs attaques venant de multiple adresse IP (l’attaque passant donc de brute-force à DDOS) J’ai donc dû réagir et pour ce faire j’ai configuré fail2ban pour bloquer les IP’s faisant plus de 6 tentatives de connexions sur tous les sites wordpress du serveur.

Configuration de fail2ban

Note : mon installation de fail2ban est existante et fonctionne déjà pour le FTP & le SSH

Créer le fichier /etc/fail2ban/jail.d/apache-wp-login.conf  :

> [apache-wp-login]
> 
> enabled = true
> port    = http,https
> filter  = apache-wp-login
> logpath = /var/log/apache2/un.autre.blog.wordrepp/access.log
>         /var/log/apache2/mercereau.info/access.log
> maxretry = 6

Puis créer la définition de la regex « apache-wp-login » dans le fichier /etc/fail2ban/filter.d/apache-wp-login.conf

[Definition]
failregex = ^<HOST> -.*POST /wp-login.php HTTP.*
ignoreregex =

Pour finir : un restart du service fail2ban & vous n’avez plus qu’à tester en faisant plus de 6 tentatives de mot de passe sur la page votreblog/wp-admin/

$ service fail2ban restart
$ tail -f /var/log/fail2ban.log
2013-09-05 16:33:39,559 fail2ban.actions: WARNING [apache-wp-login] Ban XX.XX.XX.XX

Pour information, le lendemain 47 IP ont été bloquées grâce à ce système…

$ fail2ban-client status apache-wp-login
Status for the jail: apache-wp-login
|- Filter
| |- Currently failed: 7
| |- Total failed: 59966
| `- File list: /var/log/apache2/mercereau.info/access.log
`- Actions
|- Currently banned: 0
|- Total banned: 4128
`- Banned IP list:

Si comme moi vous gérez un hébergement mutualiser vous pouvez ajouter un script qui toutes les nuits scan votre /var/www à la recherche de wp-login.php et ajout le log dans fail2ban. Ce script est adapté à l’architecture d’ISPconfig :

#!/bin/bash

# Détection des wordpress sur le serveur
# Ajout des logs du site en question dans fail2ban
# Fonctionne avec l'arbo du panel ISPconfig3
# A mettre en tâche planifié

fail2banConf='/etc/fail2ban/jail.d/apache-wp-login.conf'

echo -n "[apache-wp-login]
enabled = true
port    = http,https
filter  = apache-wp-login
maxretry = 8
logpath = " > $fail2banConf

find /var/www/clients -name wp-login.php | while IFS=$'\n' read f ; do
    clientId=`echo $f | cut -d"/" -f5`
    siteId=`echo $f | cut -d"/" -f6`
    # Test si le lien symbolique n'est pas mort
    readlink=`readlink /var/www/clients/$clientId/$siteId/log/access.log`
    ls /var/www/clients/$clientId/$siteId/log/${readlink} &amp;>/dev/null
    if ! (($?)) ; then
		echo "	/var/www/clients/$clientId/$siteId/log/access.log " >> $fail2banConf
    fi
done

/etc/init.d/fail2ban restart >/dev/null

Vous pouvez aussi faire la même chose pour bloquer wp-xmlrpc (qui est très sollicitée en brute force. Dans le script d’automatisation je télécharge les IP utilisé par JetPack (non pas que j’aime ce plugin mais certain de mes utilisateurs l’utilise et c’est bloquant pour xmlrpc…

#!/bin/bash

# Détection des wordpress sur le serveur
# Ajout des logs du site en question dans fail2ban
# Fonctionne avec l'arbo du panel ISPconfig3
# A mettre en tâche planifié

# https://wpchannel.com/wordpress/tutoriels-wordpress/lutter-attaques-ddos-xml-rpc-php-fail2ban/

cd /tmp
wget https://jetpack.com/ips-v4.txt
if ! (($?)) ; then
	ips=`sed ':a;N;$!ba;s/\n/ /g' /tmp/ips-v4.txt`
else 
	ips=''
fi

fail2banConf='/etc/fail2ban/jail.d/apache-wp-xmlrpc.conf'

echo -n "[apache-wp-xmlrpc]
enabled = true
filter = apache-wp-xmlrpc
bantime = 86400
maxretry = 1
port    = http,https
ignoreip = 127.0.0.1/8 ns1.wordpress.com ns2.wordpress.com ns3.wordpress.com ns4.wordpress.com jetpack.wordpress.com $ips 
logpath = " > $fail2banConf

find /var/www/clients -name wp-login.php | while IFS=$'\n' read f ; do
    clientId=`echo $f | cut -d"/" -f5`
    siteId=`echo $f | cut -d"/" -f6`
    # Test si le lien symbolique n'est pas mort
    readlink=`readlink /var/www/clients/$clientId/$siteId/log/access.log`
    ls /var/www/clients/$clientId/$siteId/log/${readlink} &amp;>/dev/null
    if ! (($?)) ; then
		echo "	/var/www/clients/$clientId/$siteId/log/access.log " >> $fail2banConf
    fi
done

/etc/init.d/fail2ban restart >/dev/null

Et le fichier : /etc/fail2ban/filter.d/apache-wp-xmlrpc.conf

[Definition]
failregex = ^ .(GET|POST) /xmlrpc.php .
ignoreregex =

Créer/publier un plugin wordpress simple : « Adblock invite »

Suite à mon article « Incitateur anti-pub« , des demandes ont émergé concernant un plugin WordPress. Très enthousiaste, je l’ai réalisé. Il s’appelle adblock-invite et il est sous licence Beerware. C’est le premier plugin wordpress que je réalise, il est relativement simple et me semble un bon moyen concret de commencer avec WordPress (plus sympa que le « hello world »).

Note : pour ceux qui souhaitent un anti-pub standalone réferez-vous à cet article.

Le but du plugin est simple ; il s’agit d’un Widget avec un champs « titre » (pour le titre du bloc) et un champs « message ». Ce widget ne s’affichera que lorsque le visiteur n’aura pas d’anti-pub.

Créer, tester votre code

Dans le répertoire wp-content/plugins/ nous allons créer arborescence suivante :

$ cd wp-content/plugins/
$ mkdir adblock-invite
$ tree
.
+--- screenshot-1.png
+--- screenshot-2.png
+--- testads
|   +--- banners.js
+--- widget.php
+--- style.css
+--- readme.txt

Détail de l’arborescence :

  • screenshot-*.(png|jpg|jpeg|gif) : Les captures d’écrans du résultat final
  • testads/banners.js : Présent pour simuler une publicité
  • widget.php : Le code PHP d »exécution du script (Détaillé ci-après)
  • style.css : une mini feuille de style simplement destiné à mettre un « display: none » à l’initialisation du widget
  • readme.txt : Très important, pour construire le vôtre, référez vous au readme.txt standard & au readme validator de wordpress

Le fichier widget.php est le cœur du plugin, voici son contenu (A l’heure ou j’écris il est en  0.1)

<?php
/*
Plugin Name: Adblock invite (Yes Adblock)
Plugin URI: http://adblock-invite.zici.fr
Description: Detects if the visitor have AdBlock (or another) plugin/extension installed and if not, gives URL to download it.
Author: David Mercereau
Author URI: http://david.mercereau.info
Version: 0.1
License: Beerware
License URI: http://en.wikipedia.org/wiki/Beerware
*/

// Ajout de code dans le pied de page du thème :

function adblockInviteScriptFooter(){ 
	?>
	<script language="JavaScript" type="text/javascript" src="<?php echo plugins_url('testads/banners.js', __FILE__); ?>"></script>
	<script language="JavaScript" type="text/javascript">
		function widgetAdlblockInviteID(tag) {
                        var regexpParam=/adblock_invite_widget-*/;
                        var tagParam=tag;
                        tagParam = (tagParam === undefined) ? '*' : tagParam;
                        var elementsTable = new Array();
                        for(var i=0 ; i<document.getElementsByTagName(tagParam).length ; i++) {
                                if(document.getElementsByTagName(tagParam)[i].id && document.getElementsByTagName(tagParam)[i].id.match(regexpParam)) {
                                        document.getElementsByTagName(tagParam)[i].style.display='block';
                                }
                        }
		}
		var divAds = document.getElementById("adstest");
		if(divAds) {
			widgetAdlblockInviteID('div');
			widgetAdlblockInviteID('aside');
		}
	</script>
	<?php
} 
add_action('wp_footer', 'adblockInviteScriptFooter'); 

// Ajout d'une feuille de style dans le head (la feuille contenu dans wp-content/plugins/adblock-invite/style.css :

add_action('wp_print_styles', 'addstyle');
function addstyle() {
        wp_enqueue_style('adblock-invite-styles', plugins_url('style.css', __FILE__));
}

// Le code du widget (front et back) :

add_action( 'widgets_init', create_function('', 'return register_widget("adblockInviteWidget");') );
class adblockInviteWidget extends WP_Widget {

	function adblockInviteWidget() {
		$widget_ops = array( 
							'classname' => 'adblock_invite_widget_class', 
							'description' => 'Detects if the visitor have AdBlock (or another) plugin/extension installed and if not, gives URL to download it.' 
							); 
		$this->WP_Widget('adblock_invite_widget', 'Adblock invite', $widget_ops);
	}

	// Formulaire d'administration

	function form($instance) {
		$instance = wp_parse_args( (array) $instance, array( 'title' => 'You do not block ads?', 'message' => '<p>It seems that you don\'t have AdBlock (or another) installed in your browser. I encourage you to install it for free</p> <p><a href="http://adblockplus.org" target="_blank">Download AdBlock</a></p>' ) );
		$title = $instance['title'];
		$message = $instance['message'];
		?>
			<p>
				<label for="<?php echo $this->get_field_id('title'); ?>">Title: </label>
				<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" />
			</p>
			<p>
				<label for="<?php echo $this->get_field_id('message'); ?>">Message: </label>
				<textarea class="widefat" id="<?php echo $this->get_field_id('message'); ?>" name="<?php echo $this->get_field_name('message'); ?>" cols="30" rows="4"><?php echo attribute_escape($message); ?></textarea>
			</p>
		<?php
	}

	// Enregistrement du contenu

	function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['title'] = $new_instance['title'];
		$instance['message'] = $new_instance['message'];
		return $instance;
	}

	// Affichage du widget en front

	function widget($args, $instance) {
		extract($args);

		echo $before_widget;

		$title = apply_filters( 'widget_title', $instance['title'] );
		$message = empty( $instance['message'] ) ? '&nbsp;' : $instance['message'];

		if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };

		echo $message;

		echo $after_widget;
	}
}

Vous pouvez tester votre plugin en l’activant dans le panel d’administration (Extensions / Extensions installées)

Publier sur WordPress.orgadblock-invite-search

Le saint graal pour un plugin WordPress étant d’être dans l’annuaire afin que l’utilisateur final n’est qu’à faire une recherche via son blog pour pouvoir installer d’un seul clic le dit plugin.

Pour ce faire il faut d’abord créer un compte sur wordpress.org puis proposer votre plugin. Une étape de modération est nécessaire.

Vous allez ensuite recevoir un email avec l’URL de votre plugin dont vous serez administrateur. (pour moi c’est http://wordpress.org/extend/plugins/adblock-invite/) Il vous faut ensuite faire le premier commit afin de rendre la page public. Voici la démarche :

$ # Création d'un répertoire de travail
$ cd ~/Projets
$ mkdir adblock-invite
$ cd adblock-invite/
$ # Récupération de arborescence svn
$ svn co http://plugins.svn.wordpress.org/adblock-invite/ .
$ # Copie et ajout du code
$ cp /var/www/wp-content/plugins/adblock-invite/* trunk/
$ svn add trunk/*
$ # Copie des screenshots pour le site de wordpress
$ cp trunk/screenshot-* assets/
$ svn add assets/*
$ # Commit et envoi 
$ svn ci -m 'Adding first version of my plugin'

Pour en savoir plus sur svn rapporté à WordPress vous pouvez vous rendre sur wordpress.org/extend/plugins/about/svn.
Et voilà c’est terminé vous devriez avoir votre page administrable sur wordpress.org & votre plugin doit être disponible dans l’annuaire.

Les ressources

Les liens qui’ m’ont bien aidé dans ma démarche :

N’hésitez pas à me faire part de point à améliorer dans ce plugin ou dans ce tuto (je l’ai fait à posteriori il est donc possible qu’il manque des étapes)

[WP] Créer une page de lien trié par catégorie

Le bute étant de créer une page qui liste tous les liens trié par catégorie ajouté dans WordPress

Dans votre thème créer la page suivante nommé link.php


<?php
/*
Template Name: Links
*/
get_header(); ?>

<div id="primary">
<div id="content" role="main">

<?php wp_list_bookmarks('title_before=<h2>&title_after=</h2>&title_li=&category_before=&category_after=&show_description=1'); ?>

</div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

Vous n’avez plus qu’à créer une nouvelle page puis dans Attribus / Modèle vous avez votre « Link »

Pour aller plus loin consultez la documentation sur la fonction wp_list_bookmarks de wordpress