Ciao,
Non sono ancora riuscito a far funzionare questo sistema in alcun modo e vorrei sapere se le mie aspettative sono errate.
Mi sto integrando con la mia installazione di pretix (per la vendita di biglietti per eventi). Questo dovrebbe consistere semplicemente nell’aggiungere HTML a un post e assicurarsi che l’HTML e il CSS di pretix siano inclusi.
<link rel="stylesheet" type="text/css" href="https://pretix.eu/demo/democon/widget/v1.css">
<script type="text/javascript" src="https://pretix.eu/widget/v1.en.js" async></script>
<!-- altrove, in un post -->
<pretix-widget event="https://pretix.eu/demo/democon/">
</pretix-widget>
<noscript>
<div class="pretix-widget">
<div class="pretix-widget-info-message">
JavaScript è disabilitato nel tuo browser. Per accedere al nostro negozio di biglietti senza JavaScript,
per favore <a target="_blank" href="https://pretix.eu/demo/democon/">clicca qui</a>.
</div>
</div>
</noscript>
Ovviamente, gli script di pretix scansionano il documento alla ricerca degli elementi appropriati per tag e li sostituiscono con voci personalizzabili (come desidero).
Credo di poter (e desidero) ottenere questa integrazione in modo leggero, e stavo pensando di poter semplicemente utilizzare i componenti del tema personalizzato per raggiungere questo obiettivo includendo gli script/stili esterni di pretix e aggiungendo l’HTML del widget ai post (cioè, solo con la ‘configurazione’).
Ho prima incontrato le protezioni CSP (bene) e la allowList (anche bene). Allo stesso modo, ho aggiunto la configurazione CSP, ma ora apparentemente non riesco a modificare la allowList senza modifiche effettive al codice, quindi sono costretto a inserire HTML ‘filtrato’ nei post e poi provare a modificarli dopo il rendering.
Ho proceduto a provare a utilizzare un po’ di JS leggero nelle specifiche del componente del tema (solo come script inline), qualcosa del genere, utilizzando l’esclusione [data-*] della allowList.
function upgradeWidgets() {
const divsWithDataEvent = document.querySelectorAll('div[data-event]');
divsWithDataEvent.forEach((div) => {
const attributes = div.attributes;
for (let i = 0; i < attributes.length; i++) {
const attr = attributes[i];
if (attr.nodeName.startsWith('data-')) {
const newAttrName = attr.nodeName.replace('data-', '');
const attrValue = attr.nodeValue;
div.setAttribute(newAttrName, attrValue);
div.removeAttribute(attr.nodeName);
}
}
});
}
Naturalmente, questo è ora soggetto a problemi di temporizzazione: non posso agganciarmi a onload (lo script viene rimosso dal componente del tema?!) e ogni altro evento DOM che riesco a catturare dagli script non è in un punto in cui l’HTML di questo post sia affidabilmente disponibile nel documento.
Sono sicuro che c’è un modo particolarmente idiomatico per fare tutto questo in Discourse, ma speravo di non dover essere un esperto per eseguire un’integrazione così leggera.
Sono felice di ricevere qualche indicazione.