¿Orientación sobre la lista blanca de atributos HTML arbitrarios?

Soporte
1

Al parecer, antes había un tema aquí en Meta que ayudaba a guiar sobre cómo inyectar scripts, pero ha sido eliminado.

Al principio no sabía que Markdown eliminaría los atributos id y las clases de las publicaciones en HTML, y justo después descubrí que los scripts deben ejecutarse de manera diferente.

Estoy intentando hacer que este ejemplo de CodePen funcione dentro del sitio de Discourse, pero no sé por dónde empezar, ya que claramente no funciona con el método habitual de copiar y pegar:

Entiendo que solo puedo colocar los scripts desde el panel de administración, lo cual hice, pero creo que hay más trabajo por hacer para que funcione dentro de los temas.

Básicamente, estos scripts externos se activan para inyectar contenido en un div que tiene ciertos atributos de datos.

¿Tengo que reescribir todos los scripts externos con jQuery y Ember para inyectar los divs con contenido? Espero no tener que reinventar la rueda.

Gracias de antemano,

2

No entiendo esta solicitud. ¿Quieres que los usuarios promedio puedan inyectar JavaScript arbitrario en tu Discourse simplemente publicándolo en una respuesta? Esto sería una pesadilla de seguridad.

3

Gracias por la rápida respuesta, Jeff.

El usuario promedio no añadirá los scripts externos, solo proporcionará divs con atributos de datos que estarán en la lista blanca para activar los scripts externos de JS y rellenar el contenido cuando se encuentren esos divs.

¿Acaso los divs con atributos (HTML básico) ya no están soportados y aceptados en los editores para que el usuario promedio publique? ¿O es que, como soy administrador, también puedo usar HTML básico, pero ellos no?

Otros sitios web grandes como Wowhead e Icy Veins han estado usando estos scripts para sus usuarios; ¿quizás ellos están en riesgo?

Gracias de nuevo por tu ayuda.

4

Entonces no quieres JS, quieres

<div attribute='blah'>

Voy a editar el título de tu tema para que refleje mejor lo que realmente preguntas. No estoy seguro de si permitimos la lista blanca arbitraria de atributos HTML individuales.

Sin embargo, podrías permitir la lista blanca de dominios de <iframe> en la configuración de tu sitio para lograr algo similar.

5

Si buscas “wowhead” en la búsqueda Meta, encontrarás:

donde te ofrecemos algunos ejemplos de cómo integrar publicaciones con bases de datos de juegos.

¿Tienes algún ejemplo concreto de lo que quieres lograr?

6

Gracias, Jeff. He podido permitir iframes en el pasado, pero no es el comportamiento que busco.

Hola Rafael,
creo que no me explico bien. Hay un ejemplo en este post:

En la parte inferior de ese enlace, en mi publicación, dice “Cargando”. Ese es un div con atributos específicos que debería activar los scripts externos que he colocado en la sección /body del tema de administración (donde van los scripts) y que se generan con contenido (rellenados con barras de estadísticas) mediante JavaScript.

Al final, debería verse como el Codepen que enlacé anteriormente en la parte superior de este tema cuando se generan los datos.

Los atributos de datos personalizados ya están permitidos por defecto en Discourse y no se eliminan del div como ocurre con id o class.

Mi problema es: ¿cómo puedo hacer que estos scripts externos se ejecuten y generen datos dentro de estos divs vacíos basándose en los atributos? Según estos atributos, podrían ser diferentes por tema o publicación y activar el script para mostrar datos distintos que son generados por estos scripts externos.

Para resumir lo que pretendo hacer

Scripts externos colocados en la sección 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 en el editor por un usuario o por mí:

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

Salida cuando se encuentra el div y se ejecutan los scripts externos de JavaScript (los scripts que coloqué en el lado de administración) y se activan para generar contenido basado en esos atributos de datos:

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

¿Tiene sentido lo que digo? Disculpa si no me explico bien, ya que soy bilingüe y a veces tiendo a hacer que las cosas suenen más complicadas.

7

Esto es exactamente lo que @Falco te enlazó, lee GitHub - xfalcox/discourse-hearthstone · GitHub; tiene todo lo que necesitas.

8

Hola Joffrey,

Vale, gracias. He intentado leer y entender algo del código; veremos hasta dónde llego.

Gracias de nuevo.

9

Acabo de darme cuenta de que nunca escribí sobre esto, pero Generic bbcode wrapper for theme components podría ser muy útil para tu caso de uso.