Conseils sur la liste blanche des attributs HTML arbitraires ?

Soutien
1

Apparemment, il existait auparavant un sujet ici sur Meta qui vous guidait sur la façon d’injecter des scripts, mais il a été supprimé.

Au début, je ne savais pas que Markdown supprimait les attributs id et class des posts en HTML, et juste après, j’ai découvert que les scripts doivent être exécutés différemment.

J’essaie de faire fonctionner cet exemple CodePen à l’intérieur du site Discourse, mais je ne sais pas par où commencer, car cela ne fonctionne évidemment pas avec la méthode habituelle de copier/coller :

Je comprends que je ne peux ajouter les scripts que depuis le panneau d’administration, ce que j’ai fait, mais je pense qu’il reste encore du travail à faire pour qu’ils fonctionnent à l’intérieur des sujets.

En gros, ces scripts externes sont déclenchés pour injecter du contenu dans un div possédant certains attributs de données.

Dois-je réécrire l’intégralité des scripts externes avec jQuery et Ember pour injecter les div avec du contenu ? J’espère ne pas avoir à réinventer la roue.

Merci d’avance,

2

Je ne comprends pas cette demande. Vous voulez que des utilisateurs moyens puissent injecter du JavaScript arbitraire dans votre Discourse, simplement en le publiant dans une réponse ? Ce serait un cauchemar en matière de sécurité.

3

Merci pour votre réponse rapide, Jeff.

L’utilisateur moyen n’ajoutera pas les scripts externes, il fournira uniquement des div avec des attributs de données qui seront mis sur liste blanche pour déclencher les scripts JS externes afin de remplir le contenu lorsque ces div seront détectés.

Les div avec des attributs (HTML de base) ne sont-ils pas déjà pris en charge et acceptés dans les éditeurs pour que l’utilisateur moyen puisse publier ? À moins que, parce que je suis administrateur, je puisse aussi utiliser le HTML de base, mais eux non ?

D’autres grands sites comme Wowhead et Icy Veins utilisent ces scripts pour leurs utilisateurs ; peut-être qu’ils sont à risque ?

Merci encore pour votre aide.

4

Donc vous ne voulez pas de JS, vous voulez

<div attribute='blah'>

Je vais modifier le titre de votre sujet pour qu’il reflète mieux votre véritable question. Je ne sais pas si nous autorisons une liste blanche arbitraire d’attributs HTML individuels.

Vous pouvez toutefois autoriser des domaines spécifiques pour <iframe> dans les paramètres de votre site pour obtenir un résultat similaire.

5

Si vous recherchez « wowhead » dans la recherche Meta, vous trouverez :

où nous vous donnons quelques exemples d’intégration de publications avec des bases de données de jeux.

Avez-vous un exemple concret de ce que vous souhaitez réaliser ?

6

Merci Jeff, j’ai pu autoriser les iframes par le passé, mais ce n’est pas le comportement que je recherche.

Bonjour Rafael,
Je suppose que je ne m’exprime pas très bien. Il y a un exemple dans ce sujet :

Au bas de ce lien, dans mon message, il est indiqué « Chargement ». Il s’agit d’un div avec des attributs spécifiques censé déclencher les scripts externes que j’ai placés dans la section /body du thème administrateur (là où les scripts sont insérés) et qui sont ensuite générés avec du contenu (remplis de barres de statistiques) via JavaScript.

À la fin, cela devrait ressembler au CodePen que j’ai lié précédemment en haut de ce sujet une fois les données générées.

Les attributs de données personnalisés sont déjà autorisés par défaut avec Discourse et ne sont pas supprimés du div comme le sont l’id ou la classe.

Mon problème est le suivant : comment puis-je faire en sorte que ces scripts externes s’exécutent et génèrent des données à l’intérieur de ces div vides en fonction des attributs ? En fonction de ces attributs, ils pourraient varier d’un sujet ou d’un message à l’autre et déclencher le script pour afficher différentes données générées par ces scripts externes.

Pour résumer ce que je souhaite faire

Scripts externes placés dans la section Admin > Personnaliser > Thème « Modifier CSS/HTML » :

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://bloodmallet.com/js/bloodmallet_chart_import.min.js"></script>

Entrée dans l’éditeur par un utilisateur ou par moi-même :

<div 
  data-bloodmallet="chart"
  data-wow-class="shaman" 
  data-wow-spec="elemental" 
  data-chart-engine="highcharts"
  data-tooltip-engine="wowhead"
  data-type="trinkets"
  data-azerite-tier="all"
  data-fight-style="patchwerk"
  data-entries="7"
  data-background-color="#343a40" 
  data-font-color="#f8f9fa" 
  data-axis-color="#828282"
  data-language="en"
>Chargement...</div>

Sortie une fois le div détecté et les scripts JavaScript externes (ceux que j’ai placés côté administrateur) exécutés et déclenchés pour générer du contenu basé sur ces attributs de données :

58%20PM
58%20PM1232×409 45 KB

Est-ce que je suis clair ? Je m’excuse si je ne m’exprime pas bien, étant bilingue, j’ai parfois tendance à rendre les choses plus compliquées qu’elles ne le sont.

7

C’est exactement ce que @Falco vous a lié : lisez GitHub - xfalcox/discourse-hearthstone · GitHub, tout ce dont vous avez besoin s’y trouve.

8

Bonjour Joffrey,

Ok, merci. J’ai essayé de lire et de comprendre une partie du code, je verrai jusqu’où je peux aller.

Merci encore.

9

Je viens de réaliser que je n’avais jamais écrit à ce sujet, mais Generic bbcode wrapper for theme components pourrait être très utile pour votre cas d’usage.