Orientação sobre whitelist de atributos HTML arbitrários?

Aparentemente, havia um tópico aqui no Meta que ajudava a orientar sobre como injetar scripts, mas ele foi removido.

No início, eu não sabia que o Markdown removeria IDs e classes de postagens em HTML e, logo em seguida, descobri que os scripts precisam ser executados de maneira diferente.

Estou tentando fazer este exemplo do CodePen funcionar dentro do site do Discourse, mas não sei por onde começar, já que a maneira usual de copiar e colar, obviamente, não funciona:

Entendo que só posso inserir os scripts pelo lado do administrador, o que fiz, mas acredito que há mais trabalho a ser feito para que funcionem dentro dos tópicos.

Basicamente, esses scripts externos são acionados para injetar conteúdo em uma div que possui certos atributos de dados.

Preciso reescrever todos os scripts externos usando jQuery e Ember para injetar as divs com conteúdo? Espero não ter que reinventar a roda.

Obrigado antecipadamente,

Não entendo essa solicitação. Você quer que usuários comuns possam injetar JavaScript arbitrário no seu Discourse, simplesmente postando-o em uma resposta? Isso seria um pesadelo de segurança.

Obrigado pela rápida resposta, Jeff.

O usuário médio não estará adicionando os scripts externos, apenas fornecendo divs com atributos de dados que serão incluídos na lista de permissões para acionar os scripts JS externos e preencher o conteúdo quando essas divs forem encontradas.

As divs com atributos (HTML básico) já não são suportadas e aceitas nos editores para que o usuário médio publique? A menos que, por ser administrador, eu possa fazer HTML básico, mas eles não?

Outros grandes sites como o Wowhead e o Icy Veins vêm usando esses scripts para seus usuários; talvez eles estejam em risco?

Obrigado novamente pela sua ajuda.

Então você não quer JS, você quer

<div attribute='blah'>

Vou editar o título do seu tópico para que ele reflita melhor o que você está realmente perguntando. Não tenho certeza se permitimos a whitelist arbitrária de atributos HTML individuais.

Você pode, no entanto, adicionar domínios de <iframe> à whitelist nas configurações do seu site para alcançar algo semelhante.

Se você pesquisar “wowhead” na busca Meta, encontrará:

onde fornecemos alguns exemplos de integração de posts com bancos de dados de jogos.

Você tem algum exemplo concreto do que deseja alcançar?

Obrigado, Jeff. Consegui permitir iframes no passado, mas não é esse o comportamento que estou procurando.

Olá Rafael,
Acho que não estou me explicando bem. Há um exemplo neste post:

No final daquele link, no meu post, aparece “Carregando”. Isso é uma div com atributos específicos que deveria acionar os scripts externos que coloquei na seção /body do tema de administração (onde os scripts são inseridos) e ser preenchida com conteúdo (barras de estatísticas) via JavaScript.

No final, deveria ficar parecido com o CodePen que linkei anteriormente no início deste tópico, quando os dados são gerados.

Os atributos de dados personalizados já são permitidos por padrão no Discourse e não são removidos da div como id ou class.

Meu problema é: como faço para que esses scripts externos sejam executados e gerem dados dentro dessas divs vazias com base nos atributos? Com base nesses atributos, eles podem variar por tópico ou post e acionar o script para exibir diferentes dados gerados por esses scripts externos.

Para resumir o que pretendo fazer

Scripts externos colocados na seção admin > personalizar > tema “Editar CSS/HTML” :

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

Entrada no editor por um usuário ou por mim:

<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"
>Carregando...</div>

Saída quando a div é encontrada e o JavaScript externo (os scripts que coloquei no lado da administração) é executado e acionado para gerar conteúdo com base nesses atributos de dados:

Faz sentido? Peço desculpas se não consigo me explicar bem, pois sou bilíngue e, às vezes, tenho a tendência de tornar as coisas mais complicadas do que precisam ser.

Isso é exatamente o que o @Falco te linkou. Leia GitHub - xfalcox/discourse-hearthstone · GitHub, pois tem tudo o que você precisa.

Olá Joffrey,

Ok, obrigado. Tentei ler e entender parte do código, vamos ver até onde consigo chegar.

Obrigado novamente.

Acabei de perceber que nunca escrevi sobre isso, mas Generic bbcode wrapper for theme components pode ser muito útil para o seu caso de uso.