Rendre son site un peu meilleur sur Joomla

Au mois de janvier, je me suis enfin décidée à en finir avec Joomla et à passer mon portfolio sur WordPress après y avoir passé ce blog. Si je n’ai pas réussi à vous convaincre de ne pas utiliser Joomla, avant d’en finir définitivement, je voulais quand même partager quelques tuyaux ; quelques trucs qui m’ont aidé à rendre mon site un peu moins pourri en terme de sécurité et de performances d’affichage notamment. Certains points sont valables pour n’importe quel site mais je me suis dit que ce n’était pas plus mal de les mettre quand même.

J’ai dit, le mois dernier aussi, que l’intégrateur ne devait pas forcément se faire développeur mais devait tout au moins maîtriser son environnement ; il ne s’agit que de ça ici. Je n’ai pas réinventé la roue mais pioché des idées par ci par là au détour d’une page web trouvée sur un moteur de recherche.

À titre d’information, j’utilisais Joomla dans sa version 3.6.5.

Optimiser la sécurité et les performances dans le fichier .htaccess

Quelques points autour de la sécurité

1 – Empêcher qu’on puisse accéder au contenu des répertoires

Si vos répertoires n’ont pas d’index (fichier index.html ou index.php par exemple), alors, lorsqu’on tapera leur URL, on arrivera sur une page qui listera tous les fichiers présents dans ce répertoire. Pour éviter ça, on a besoin d’une seule ligne de code.

# directory browsing
Options All -Indexes

2 – Empêcher l’accès au fichier de configuration

Le fichier configuration.php contient les accès à votre base de données et à votre boîte mail, entre autres, en clair. N’importe qui ne doit donc pas pouvoir accéder à ce fichier.

<Files configuration.php>
	order allow,deny
	deny from all
</Files>

Quelques points autour des performances

En performance, on peut gagner des points facilement en activant la compression GZIP et en mettant en cache navigateur les fichiers.

Si vous utilisez des polices avec @font-face, il se peut que vous deviez, au préalable, ajouter les types de fichiers otf, ttf, eot et woff pour que cela fonctionne.

# Ajout types de fichiers
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff

# Compression gzip
<IfModule mod_deflate.c>
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE x-font/ttf
	AddOutputFilterByType DEFLATE x-font/otf
	AddOutputFilterByType DEFLATE x-font/eot
	AddOutputFilterByType DEFLATE x-font/woff
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE text/css
</IfModule>

# Mise en cache navigateur
<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresByType image/gif "access plus 1 month"
	ExpiresByType image/jpeg "access plus 1 month"
	ExpiresByType image/png "access plus 1 month"
	ExpiresByType text/css "access plus 1 week"
	ExpiresByType text/javascript "access plus 1 month"
	ExpiresByType application/javascript "access plus 1 month"
	ExpiresByType image/svg+xml "access plus 1 month"
	ExpiresByType x-font/otf "access plus 1 year"
	ExpiresByType x-font/ttf "access plus 1 year"
	ExpiresByType x-font/eot "access plus 1 year"
	ExpiresByType x-font/woff "access plus 1 year"
	ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

Sécuriser l’accès à l’admin /administrator/

Un peu comme on peut le trouver sur WordPress avec iThemes Security, j’ai cherché un plugin sur Joomla permettant de masquer son URL d’administration pour éviter les piratages. A l’époque, j’avais trouvé un plugin, jSecure Lite, qui permet d’ajouter un paramètre choisi à l’URL et qui empêchait donc l’accès au lien /administrator/ sans ce paramètre (redirection vers la page d’accueil). Exemple : http://www.monsite.fr/administrator/?MonSuperParametre

Le problème est que ce plugin n’a pas été mis à jour depuis 2012 (contrairement à ce qui est indiqué sur la page de téléchargement). Il n’est donc pas tout à fait compatible avec PHP 5.6 ou PHP 7 : cela génère des erreurs dans les logs même si ça ne l’empêche pas pour autant de fonctionner.

Une autre solution consiste à placer un fichier .htaccess avec un htpassword dans le répertoire /administrator/ en choisissant bien sûr un login et mot de passe différents de ceux de la connexion à la page d’admin. Cette technique est un peu plus contraignante pour ceux qui doivent se connecter.

Optimiser son thème, dans le fichier « index.php »

Surcharger ce qui nous embête pour gagner en performance d’affichage

Au début, je me suis attachée à essayer de corriger mon en-tête de page HTML en supprimant la meta generator (pour raison de sécurité), en supprimant les scripts que le cœur de Joomla charge mais qui ne me servaient à rien. Sauf, que je devais laisser les scripts qui, s’ils n’étaient pas chargés, généraient des erreurs JavaScript visibles dans la console de l’outil de développement du navigateur car des scripts inline les appelaient. J’optimisais donc les performances d’affichage de mon site mais je ne pouvais pas aller jusqu’au bout.

// Supprimer la meta generator
$this->setGenerator(’’);

// Supprimer scripts inutiles
$doc = JFactory::getDocument();
$headerstuff = $doc->getHeadData();
foreach ($headerstuff[’scripts’] as $file => $type) {
	if (preg_match("#jquery-migrate.min.js#s",  $file)) unset($headerstuff[’scripts’][$file]);
	if (preg_match("#tabs-state.js#s",  $file)) unset($headerstuff[’scripts’][$file]);
	if (preg_match("#jquery-noconflict.js#s",  $file)) unset($headerstuff[’scripts’][$file]);
	if (preg_match("#html5fallback.js#s",  $file)) unset($headerstuff[’scripts’][$file]);
	if (preg_match("#punycode.js#s",  $file)) unset($headerstuff[’scripts’][$file]);
	
	// Seule la page contact d’identifiant 456 a besoin de ces scripts
	if($itemid != 456){
		if (preg_match("#bootstrap.min.js#s", $file)) unset($headerstuff[’scripts’][$file]);
		if (preg_match("#core.js#s",  $file)) unset($headerstuff[’scripts’][$file]);
		if (preg_match("#mootools-core.js#s",  $file)) unset($headerstuff[’scripts’][$file]);
		if (preg_match("#mootools-more.js#s",  $file)) unset($headerstuff[’scripts’][$file]);
	}
}
$doc->setHeadData($headerstuff);

Réécrire l’en-tête à la main

A la fin, je me suis demandée pourquoi je m’embêtais, finalement, avec toutes ces fonctions de surcharge. Je voulais aussi me débarrasser de ces scripts inline inutiles pour me débarrasser, aussi, des scripts qui les appelaient. Alors, j’ai fini par reconstruire mon en-tête à la main.

Créer les variables

Avant toute chose, il faut créer des variables pour récupérer les valeurs qui nous intéressent.

// Variables
$doc = JFactory::getDocument();
$this->language = $doc->language; // Récupérer la langue du site
$this->direction = $doc->direction; // Récupérer la direction de la langue

$metadesc = $doc->getMetaData( ’description’ ); // Récupérer la valeur de la meta description
$robots = $doc->getMetaData( ’robots’ ); // Récupérer la valeur de la meta robots
$title = $this->getTitle(); // Récupérer la valeur de la balise <title>
$baseurl = JUri::root(); // Récupérer l’URL racine de mon site
$url = JURI::current(); // Récupérer l’URL de ma page

Reconstruire le <head>

Dans la balise <head>, on commence par commenter l’inclusion de l’en-tête Joomla.

<?php /* <jdoc:include type="head" /> */ ?>

Puis, on réécrit nos éléments dans l’en-tête <head>. Vous remarquerez que je n’ai pas inclus la balise <link rel="canonical">. Elle est trop buggée sur Joomla donc j’ai désactivé ce composant. De plus, je n’en avais pas besoin.

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="<?php echo $metadesc; ?>" />
	<?php if($robots !== ""): ?>
		<meta name="robots" content="<?php echo $robots; ?>" />
	<?php endif; ?>
	<title><?php echo $title; ?></title>
	<?php /* On n’oublie pas d’inclure les CSS */ ?>
	<link href="/templates/montheme/css/style.css" rel="stylesheet" type="text/css" />
	<link href="/templates/montheme/css/print.css" rel="stylesheet" type="text/css" media="print" />
</head>

On vient placer, si on peut, nos seuls scripts nécessaires dans le pied de page, avant la balise de fermeture </body>.

<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<?php if($itemid == 456): // Pour ma page contact ?>
	<script src="/media/system/js/validate.js" type="text/javascript"></script>
<?php endif; ?>
<script type="text/javascript" src="/templates/montheme/js/jquery.uneLibJQuery.js"></script>
<script type="text/javascript" src="/templates/montheme/js/scripts.js"></script>

Cependant, attention à cette pratique de reconstruction de l’en-tête. Je l’ai utilisée car je maîtrisais vraiment le contenu de mon site et que je savais que je n’allais pas y ajouter d’extensions. Si vous devez ajouter des extensions à votre Joomla qui ont un impact sur la partie front, alors vérifiez que vous n’oubliez rien, qu’ils ne génèrent pas un script inline qui change dynamiquement selon les pages par exemple. Auquel cas, cette technique ne serait pas forcément à utiliser. Sinon, pensez à ajouter les scripts et styles dont votre extension a besoin.

Ajouter les meta Open Graph pour le partage sur les réseaux sociaux

Pour être sûr que lorsqu’on partage une page de son site sur les réseaux sociaux, le lien s’affiche dans une vignette propre dont on a maîtrisé le contenu, il faut placer les balises <meta> Open Graph dans l’en-tête des pages (balise <head>).

<?php if ($menu->getActive() == $menu->getDefault($lang->getTag())):  /* Si c’est la page d’accueil */ ?>
	<meta property="og:title" content="Nom de ma page d’accueil différent de la balise title si j’ai envie" />
	<meta property="og:image" content="<?php echo $baseurl; ?>templates/montheme/images/og-image.jpg" />
<?php else: ?>
	<meta property="og:title" content="<?php echo $title; ?>" />
<?php endif; ?>
<meta property="og:description" content="<?php echo $metadesc; ?>" />
<meta property="og:url" content="<?php echo $url; ?>" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Nom de mon site" />

Quelques liens à propos de Joomla qui m’ont aidée

• La documentation Joomla, bien sûr
• 14 astuces pour les templates Joomla : Cet article est une traduction d’un article de 2011 et parle des astuces pour Joomla 1.5 et 1.6. Certaines sont peut-être encore compatibles avec Joomla 2.5 ou Joomla 3. Sinon, il faut peut-être juste les adapter un peu. En tout cas, cela peut donner des idées.
• Les bonnes pratiques Joomla! : Points de sécurité (archive). Des bonnes pratiques basiques sur la sécurité, qu’on peut appliquer pour tous les sites.
• Comprendre la surcharge de templates sur Joomla (en anglais)