Mon petit tuto Htmlpurifier markdown emoji

neecride
Proposition de tutoriels

Bonjour,
Je propose ce petit tuto par-ce-que j'ai pas mal cherché de solution pour faire ce que je souhaitais, le but étant d'afficher notre texte correctement parser avec de jolie smileys.

L'hors de mon voyage dans le de j'ai apris pas mal de chose de par le site de Grafikart, mais on ne trouve pas tout sur le net, le souci que j'avais été que mon parser ne pas parser tout correctement car comme beaucoup de débutants on filtre tout sans vraiment comprendre les tenants et aboutissants.

Et malheureusement on voit ça dans tous les tuto htmlspecialchars($_POST[''mon article propre]) il suffit de chercher dans la doc PHP vous me direz !! mais encore une fois les débutants ne cherchent pas plus loin.

Le problème était pourtant là dans mon cas je filtrais mon article à l'entrée en base de données mais ce n'est vraiment pas la bonne pratique, on verra ça dans cet article.

Les prérequis :

Dans un premier temps vous pouvez suivre par exemple le tuto de Grafikart sur les commentaires imbriquer.

Ensuite il vous faudra si vous souhaiter le même résultat que moi utiliser HTMLpuririfier le bootstrap markdown et enfin le parser que moi j'utilise ( Parsedown ) par-ce-que j'ai pas trouver mieux sans autoloader.

Il nous faudra aussi SecureParsedown un patch pour notre parser on a pas le choix tant qu'il n'est pas implémenté de base.

Biensur vous avez le choix de l'éditeur et du parser cela dit je n'ai pas tester avec du bbcode.

J'espère que vous avez aussi des smiley sous le coude !!!

Maintenant que l'on a tous ça, ou se que vous utiliser habituellement comme parser matkdown on peut commencer.

Le tuto n'est pas vraiment de vous montrer comment parser mai comment bien le faire et evité certains bug justement au niveau du parser et de HTMLpurifier, et le petit plus, ajouter des emojis pour un espace de commentaire ou votre forum etc... car oui c'est exportable on peut l'utiliser pour un forum ou un tchat.

Déjà voici un petit bout de code pour HTMLpurifier une fois celui si inclu :

//htmlpurifier config
$purifierConfig = HTMLPurifier_Config::createDefault();
$purifierConfig->set('Core.Encoding', 'UTF-8');
$purifierConfig->set('HTML.Allowed', 'p, a[href|title], blockquote[cite],span[style|class],i[style|class] , table[style], thead, tr, th[style], td[style], tbody, pre, code[class|style], hr, em, strong, ul, li, img[src|alt|class], br, ol, del, h1, h2, h3, h4, h5, h6');
$Purifier = new HTMLPurifier($purifierConfig);

Le HTMLpurifier ne laissera passer que ce qu'il y a dans sa configuration, et pour purifier une variable retourner par la base de donnée je vous conseil déjà de ne pas utiliser htmlspecialchars a l'entré en BDD mais plutot a sa sortie, vous pourrez bien entendu utiliser des filtres comme trim() qui ne modifiera pas notre text .

Par-ce-que oui contrairement a une idée reçu les failles XSS se font a la sortie et non pas a l'entrée en base de donnée, pour les injections on a les requete prepare.

Sauf que la nous on a installer HTMLpurifier donc pas besoin de htmlspecialchars ou autre filtre, et pour purifier une sortie on fera plutot ça $Purifier->purify($commentText)

Ensuite on aura besoin de notre parser une fois inclu ainsi que notre patch :

//parsedown
$parsedown = new Aidantwoods\SecureParsedown\SecureParsedown;
$parsedown->setSafeMode(true);
$Parsedown = new Parsedown();

Une fois cela fait le echo de notre commentaire ne ressemblera plus a ça $Purifier->purify($commentText) mais a ça $Purifier->purify($Parsedown->text($commentText)); .

Jusque ici vous suivez toujours ?

Alors maintenant que l'on a tout bien fais.

On va ce créer une fonction qui rendra notre commentaire prufier parser et smilyser :

function CommentPurifierParseWithEmoji($comment){

    //on a besoin de notre purify et notre parser on les met en global ou avec un autre moyen
    global $Purifier, $Parsedown; 

    //nos variables purification et parser
    $comment = $Purifier->purify($Parsedown->text($comment));

    //on remplace le code emoji trouver dans le text
    $emoji_replace = [':)',':('];

    //par une image 
    $emoji = ["<img src='".WEBROOT."inc/img/emojis/simple_smile.png' />","<img src='".WEBROOT."inc/img/emojis/emo_sad.png' />"];

    //on remplace ce que l'on trouve dans nos tableau par des emoji 
    $comment = str_replace($emoji_replace,$emoji ,$comment);

    //on renvoie la réponse nétoyez parser et smilysez tout a la fin
    return $comment;
}

Je parle bien ici de ne parser que le text de notre commentaire et non pas le pseudo l'email etc... pour ça on le fais a l'entré en BDD.

Et si vous avez bien suivi le tuto de Grafikart (optionel c'est juste pour avoir une base) vous aurez une fonction suplémentaire pour afficher les commentaire, on les affichera non pas comme ceci $Purifier->purify($Parsedown->text($commentText)); mais avec notre fonction 

<div class="comment_text">
        <!-- on retourne pour notre fonction le commentaire de notre BDD -->
        <?= CommentPurifierParseWithEmoji($response->comment); ?>   
</div>

Je sais qu'il y a forcement moyen de faire mieux avec de l'ogjet mais a partir de la pour mois c'est un autre l'angage.

Donc voila ici on a vue comment bien parser avec HTMLpurifier et en plus avec nos smiley, par-ce-que oui la aussi il y a un ordre si j'aurai parser etc. mon commentaire après les emoji :

    $emoji_replace = [':)',':('];

    $emoji = ["<img src='".WEBROOT."inc/img/emojis/simple_smile.png' />","<img src='".WEBROOT."inc/img/emojis/emo_sad.png' />"];

    $comment = str_replace($emoji_replace,$emoji ,$comment);

    $comment = $Purifier->purify($Parsedown->text($comment));

    return $comment;

HTMLpurifier aurai purifier notre constante WEBROOT mais on a justement besoin de cette constant qui affichera notre smiley .

Si vous avez bien tout fait on aura ce retour (enfin la c'est mon design) :

Vous aurez ceci avec nos petit smiley bien comme il faut, vous pourrez ajouter googleprettify ou autre par la suite et ça fonctionnera de la même manière sans rien a ajouter.

Voila jespère que ça vous aura aidé.

Aucune réponse