Bonjour,

Dans l'admin j'ai intégré l'éditeur TinyMCE pour la balise <htmleditor>, tout fonctionne bien, sauf que il m'est impossible d'enregistrer une balise <iframe> (pour les vidéos Youtube) dans cette éditeur..

J'ai tout de suite pensé que c'était une config à faire dans TinyMCE, donc rien avoir avec Jelix, aprs avoir cherché j'ai trouvé cela:

• http://www.tinymce.com/wiki.php/Configuration:valid_elements
• Et
• http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements

J'ai donc essayé de mettre ceci dans la config de TinyMCE:

tinyMCE.init({
        ...
        extended_valid_elements : "iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder]",
});

Ou encore

tinyMCE.init({
        ...
        valid_elements : "*[*]",
});

Mais tout ça ne change rien...du coup est-ce que le problème est lié avec Jelix? qui nettoie le code avant d'enregistrer dans la base?

Une idée?

Merci d'avance

Oui, c'est jelix, et plus exactement jForms, qui fait un nettoyage complet via jFilter:cleanHtml. Et il n'y a pas moyen de régler ça. Ce nettoyage est fait pour éviter les problèmes de sécurité comme XSS et cie.

Ce serait bien effectivement si on pouvait alléger ces restrictions.

valid_elements : "*[*]",

Donc l'utilisateur peut mettre tout et n'importe quoi dans le code html, y compris du JS etc.. -> trou de sécurité (bon, jforms fait le nettoyage derrière, mais quand même, dans un autre contexte, ce serait très dangereux ;-) ).

Aie très embêtant tout ça...Comment faire?

Cette éditeur se trouve dans une console d'administration que nous gérons nous même...on ne va donc pas mettre du code malicieux sur notre propre site...:)

il suffit d'un contentieux entre admin du site et plaf le site (c'est du vécu)

Peut-être...Mais ça n'arrange quand même pas mon problème...

La seule solution que je vois actuellement, c'est de ne pas utiliser <htmleditor>, mais la balise <textarea> de jforms. Et c'est à toi dans ton template de mettre le code js "à la main" qui va initialiser TinyMCE sur la balise textarea générée par jforms, comme on fait quand on n'utilise pas Jelix. Et c'est à toi aussi de faire la vérification en JS, et de faire la vérification dans le contrôleur.

on ne va donc pas mettre du code malicieux sur notre propre site.

Peut être pas directement. mais si un utilisateur met une iframe contenant une page externe qui affiche je ne sais quoi, tu n'as aucun contrôle sur ce que fait l'iframe. Et paf le trou de sécu (bon, cependant les navigateurs ont des barrières de sécurité entre l'iframe et la page, mais il ne faut pas sous-estimé les compétences des pirates).

Pire encore, si tu autorises à mettre des balises scripts, contenant un script qui va récupérer des infos sur un autre site pour l'affichage de trucs dans ta page (comme par exemple les bouts de code pour afficher des pubs comme google). Là, non seulement tu n'as aucun contrôle sur ce que va faire ce script, mais en plus, vu qu'il est directement dans ta page, il peut faire tout ce qu'il veut : vole de cookie de session etc.. Bref, mega trou de sécurité.

Même si l'utilisateur est de bonne foi, il peut être dangereux de l'autoriser à mettre n'importe quoi, rien ne dit que le script qui est injecté par les quelques lignes de JS qu'il a écrit, ne contient pas du code malicieux. L'hébergeur de ce script peut être piraté etc...

On va peut-être me prendre pour un parano, mais on trouve de trop nombreux exemples sur le net de comptes piratés ou autre, qui ont été permis par ce genre de trou de sécurité.

personnellement, pour ton cas, je pense qu'à la soumission du formulaire, en JS, je remplacerai la balise qui affiche la video youtube par un tag de mon cru, genre [YOUTUBE:id_de_la_video]. Jforms peut alors tout nettoyer ce qu'il veut. Et à l'affichage, je remplace ce tag par le code html qui va bien. Autre avantage : si le contenu HTML pour afficher une video youtube change (parce que youtube aurait changé quelque chose par exemple), ou si tu veux un jour changer les paramètres (genre agrandir toutes les vidéos parce que ta nouvelle charte graphique le permet), tu n'a rien à changer dans le contenu, juste le code qui va remplacer le tag.

Bon, après, c'est une solution qui va couter un peu plus de temps de dev :-)

J'ai pour ma part réalisé un système proche de ce qu'indique Laurent.

J'ai créé un plugin TinyMCE qui ouvre une simple fenêtre avec un champ dans lequel l'utilisateur colle le code du player vidéo (l'iFrame de dailymotion, par exemple).

Lorsque l'utilisateur valide le code collé, je procède au netoyage du code pour ne conserver que le lien utile affichant le player (je vire donc le tag iframe et ce que Dailymotion ajoute et qui est inutile, comme le lien vers leur site). Et j'insère dans l'éditeur wysiwyg une image représentant une vidéo, avec une classe du genre "obj_video", des attributs width et height de la taille de la vidéo, et le code du player dans l'attribut alt ou autre (je sais plus, faudrait que je regarde ça). Cela a l'avantage de matérialiser dans l'éditeur l'espace qui sera occupé par le player.

Ensuite, à l'affichage, je parse le contenu de l'éditeur pour remplacer les images dont la classe est "obj_video" par celui de mon choix, en l'occurence un iFrame.

Maintenant, plutôt que d'afficher une image dans TinyMce, il pourrait être imaginé l'insertion d'un tag video HTML, tout simplement, et via CSS, le matérialiser dans l'éditeur. Sémantiquement, cela aurait davantage de sens que l'image que j'ai choisi d'insérer. Ce pourrait également être une balise object.

J'ai réalisé cela dans un autre Framework que Jelix, et donc pas pour la raison que tu rencontres (nettoyage par jForms). Si j'ai fais cela, c'est pour garder la maîtrise du code généré pour le player vidéo. Je peux ainsi décider de remplacer l'iFrame par autre chose, ou ajouter dynamiquement des styles au player Dailymotion conformément à la charte graphique du site (plutôt que d'utiliser ceux qui auront été définis par l'utilisateur en personnalisant l'export depuis le site Dailymotion). Je peux aussi jouer dynamiquement sur les dimensions des vidéos affichées, selon le contexte dans lequel apparaît le contenu du champ wysiwyg. Bref, que des avantages, ou presque.

Edit : cela dit, je pense que ce serait bien que Jelix autorise le bypass du filtrage. On devrait pouvoir choisir, explicitement, de court-circuiter pour procéder soi-même au contrôle des données saisies, avec l'aide éventuelle d'une bibliothèque comme HTMLPurifier par exemple (tout en conservant le filtrage par défaut, par mesure de sécurité et de compatibilité).

laurentj a dit :

Bon, après, c'est une solution qui va couter un peu plus de temps de dev :-)

C'est certain ;) En tout cas la méthode cleanHtml de JFilter fonctionne très bien également avec ckeditor. Je me retrouve dans le même cas avec des utilisateurs qui ne peuvent plus ajouter de video youtube depuis le code avec iframe. y'a plus qu'à relever un peu les manches pour trouver la bonne solution ;)