Linee guida per l'approvazione di attributi HTML arbitrari?

Supporto
1

Sembra che ci fosse un argomento qui su meta che aiutava a guidare su come iniettare script, ma è stato rimosso.

All’inizio non sapevo che Markdown rimuovesse gli ID e le classi dai post in HTML, e subito dopo ho scoperto che gli script devono essere eseguiti in modo diverso.

Sto cercando di far funzionare questo esempio di CodePen all’interno del sito Discourse, ma non so da dove iniziare, dato che ovviamente non funziona con il solito copia/incolla:

So che posso inserire gli script solo dal lato amministratore, cosa che ho fatto, ma credo ci sia ancora lavoro da fare per farli funzionare all’interno dei topic.

In sostanza, questi script esterni vengono attivati per iniettare contenuto in un div che ha determinati attributi data.

Devo riscrivere l’intero script esterno usando jQuery e Ember per iniettare i div con il contenuto? Spero di non dover reinventare la ruota.

Grazie in anticipo,

2

Non capisco questa richiesta. Vuoi che utenti medi possano iniettare JavaScript arbitrario nel tuo Discourse, semplicemente pubblicandolo in una risposta? Sarebbe un incubo per la sicurezza.

3

Grazie per la rapida risposta, Jeff.

L’utente medio non aggiungerà gli script esterni, ma fornirà solo dei div con attributi dati che saranno inseriti in whitelist per attivare gli script JS esterni e riempire il contenuto quando tali div vengono rilevati.

I div con attributi (HTML di base) non sono già supportati e accettati negli editor per gli utenti medi che pubblicano contenuti? A meno che, dato che sono un amministratore, io possa utilizzare anche l’HTML di base, mentre loro no?

Altri grandi siti come Wowhead e Icy Veins utilizzano questi script per i loro utenti; forse sono a rischio?

Grazie ancora per il tuo aiuto.

4

Quindi non vuoi JS, vuoi

<div attribute='blah'>

Modificherò il titolo del tuo argomento in modo che rifletta meglio ciò che stai effettivamente chiedendo. Non sono sicuro che consentiamo l’approvazione arbitraria di singoli attributi HTML.

Potresti comunque autorizzare i domini <iframe> nelle impostazioni del tuo sito per ottenere qualcosa di simile.

5

Se cerchi “wowhead” nella ricerca Meta, troverai:

dove ti forniamo alcuni esempi di integrazione dei post con database di giochi.

Hai un esempio concreto di ciò che desideri ottenere?

6

Grazie Jeff, in passato sono riuscito a mettere in whitelist gli iframe, ma non è il comportamento che sto cercando.

Ciao Rafael,
immagino di essere poco bravo a spiegarmi. C’è un esempio in questo post:

In fondo a quel link, nel mio post, c’è scritto “Loading”. Si tratta di un div con attributi specifici che dovrebbe attivare gli script esterni che ho inserito nella sezione /body del tema amministrativo (dove vanno gli script) e che vengono generati con del contenuto (riempiti con barre statistiche) tramite JavaScript.

Alla fine dovrebbe apparire come nel CodePen che ho collegato precedentemente all’inizio di questo argomento, una volta generati i dati.

Gli attributi di dati personalizzati sono già in whitelist di default con Discourse e non vengono rimossi dal div come invece accadrebbe per id o class.

Il mio problema è: come posso far sì che questi script esterni vengano eseguiti e generino dati all’interno di questi div vuoti basandosi sugli attributi? In base a questi attributi, potrebbero essere diversi per ogni argomento o post e attivare lo script per visualizzare dati diversi generati da questi script esterni.

Per riassumere ciò che intendo fare

Script esterni inseriti nella sezione admin > personalizza > tema “Modifica CSS/HTML” :

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

Input nell’editor da parte di un utente o da parte mia:

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

Output quando il div viene rilevato e gli script JavaScript esterni (quelli che ho inserito sul lato amministrativo) vengono eseguiti e attivati per generare contenuti basati su quegli attributi di dati:

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

Ha senso? Mi scuso se non riesco a spiegarmi bene, essendo bilingue a volte tendo a rendere le cose più complicate di quanto non siano.

7

È esattamente ciò a cui @Falco ti ha collegato: leggi GitHub - xfalcox/discourse-hearthstone · GitHub, contiene tutto ciò di cui hai bisogno.

8

Ciao Joffrey,

Ok, grazie. Ho provato a leggere e capire un po’ del codice, vedremo fino a dove riuscirò ad arrivare.

Grazie ancora.

9

Ho appena realizzato di non aver mai scritto di questo, ma Generic bbcode wrapper for theme components potrebbe essere molto utile per il tuo caso d’uso.