Du code HTML dans vos commentaires WordPress

Vous n’êtes peut-être pas au courant mais par défaut, seules quelques balises HTML sont autorisées dans les commentaires WordPress. Si quelqu’un qui n’est pas connecté en tant qu’administrateur vous laisse un commentaire qui contient des balises non valides, elles seront automatiquement supprimées. C’est pratique car ça évite qu’une personne mal intentionnée insère du code malveillant sur votre site (on parle alors de faille XSS). Mais dans certains cas, il peut être utile de pouvoir afficher du code HTML dans les commentaires. Pour ne pas que les balises soient supprimées, il faut les encoder. Ça consiste à remplacer les caractères qui ont une signification en langage HTML par leur équivalent en entité HTML de manière à ce que le navigateur ne les interprète pas. Je vous propose de voir ensemble comment encoder le contenu des balises <code> et <pre> de vos commentaires pour éviter qu’il soit supprimé par WordPress et qu’il soit correctement affiché sur vos pages.

Ajout d’une balise autorisée

En HTML, deux balises sont souvent utilisées pour afficher du code :

• <code> permet d’afficher un bref extrait de code qui tient généralement sur une seule ligne (balise HTML, nom de fichier, …).
• <pre> sert à afficher du texte préformaté, ce qui signifie que les tabulations et les retours à la ligne qu’elle contient seront conservés. C’est donc la balise idéale pour afficher du code multi-lignes.

Par défaut, les balise autorisées dans les commentaires sont : a, abbr, acronym, b, blockquote, cite, code, del, em, i, q, s, strike et strong. Vous remarquerez que la balise <code> est autorisée mais pas la balise <pre> , nous allons donc l’ajouter.

Ouvrez le fichier functions.php qui se trouve dans le répertoire /wp-content/themes/<nom du thème>/) puis ajoutez les lignes suivantes :

// Ajout de la balise pre dans la liste des balises autorisées
function comment_post_allow_html_tags() {
   global $allowedtags;
   $allowedtags['pre'] = array();
}

add_action( 'init', 'comment_post_allow_html_tags' );  

Encodage du contenu des balises

Dans l’état, vos visiteurs pourront insérer les balises dans leurs commentaires mais s’ils mettent du code HTML à l’intérieur, il sera supprimé. Nous allons donc faire en sorte que le contenu de ces deux balises soit automatiquement encodé.

Ça se passe toujours à l’intérieur du fichier functions.php , ajoutez simplement les lignes suivantes :

// Remplacement des caractères contenus dans les balises pre et code par leurs entités HTML
function preprocess_comment_encode_html( $data ) {
    $data['comment_content'] = preg_replace_callback( '/<(code|pre).*>(.*)<\/\1/isU' , 'comment_encode_html', $data['comment_content'] );
    return $data;
}

add_filter( 'preprocess_comment', 'preprocess_comment_encode_html' );

function comment_encode_html( $matches ) {
    return str_replace( $matches[2], htmlentities($matches[2]), $matches[0] );
}

Je vais quand même vous donner un peu d’explications. Lorsqu’un commentaire est envoyé, la fonction preg_replace_callback recherche les balises <code> ou <pre> ainsi que leur contenu (grâce une expression régulière) puis exécute la fonction comment_encode_html pour chaque occurrence trouvée. La fonction comment_encode_html permet quant à elle d’encoder le contenu de la balise.

Il existe même un plugin

J’ai pensé à ceux qui n’auraient pas le courage d’éditer les fichiers de leur thème, j’ai créé un plugin. Il se nomme « HTML Code Comments » et permet, en plus d’encoder les balises HTML, d’ajouter toutes les balises et les attributs que vous souhaitez à la liste de ceux qui sont autorisés et d’ajouter automatiquement l’attribut target="_blank" à tous les liens de vos commentaires.

Vous êtes intéressé ? Voici les étapes à suivre pour l’installer :

1. Vous rendre sur la page de recherche des plugins dans l’administration de WordPress.
2. Saisir « HTML Code Comments » dans le champ de recherche.
3. Cliquez sur le bouton « Installer maintenant » du plugin.
4. Attendre la fin de l’installation et cliquer sur activer.

Sinon, vous pouvez l’installer manuellement :

1. Téléchargez l’archive sur la page du plugin puis dézippez-la.
2. Uploadez le dossier html-code-comments et son contenu dans le dossier /wp-content/plugins/ de votre installation WordPress.
3. Rendez-vous dans l’interface d’administration de WordPress, dans le menu « Extensions » puis « Extensions installées ».
4. Activez le plugin qui se nomme « HTML code in comments ».

C’est tout ce que vous avez à faire, vous pouvez maintenant mettre du code HTML dans vos commentaires. Vous avez trouvé ça compliqué ? Si ça vous intéresse, vous pouvez consulter le code du plugin sur GitHub.